Asp.Net Core Razor应用如何根据DropdownList值变更加载表单字段

首先明确结论：不要用重定向到Index的方案，你这个场景必须用Ajax实现，重定向会触发页面刷新，用户已输入的内容会直接丢失，完全不符合你的需求。 #

现有方案的问题 #

你当前写的PreLoadFormDataBasedOnDropdown方法返回RedirectToAction，本质是触发服务器端302跳转，浏览器会重新加载整个Index页面，除非你手动把所有用户已输入的字段都拼到跳转参数里（字段多了完全不可维护），否则用户之前填的内容都会清空，完全不适用下拉框联动预加载的场景。 #

具体实现步骤 #

1. 改造控制器预加载方法 #

不要返回跳转结果，直接返回你需要预填充的JSON格式字段数据即可，查询类操作用HttpGet更符合规范：

public class SampleController : Controller
{
    // 原有Index、SaveDocument方法保持不变
    
    [HttpGet]
    public async Task<IActionResult> PreLoadFormDataBasedOnDropdown(string companyName)
    {
        if (string.IsNullOrWhiteSpace(companyName)) 
            return BadRequest("公司名称不能为空");
            
        // 注意你原有接口拼接错误，补上参数分隔符
        var requestString = ServerAddress + $"Company/GetCompanyByName?companyName={companyName}";
        var response = await client.GetAsync(requestString);
        
        if (!response.IsSuccessStatusCode) 
            return NotFound("未查询到对应公司数据");
            
        var company = JsonConvert.DeserializeObject<Company>(await response.Content.ReadAsStringAsync());
        
        // 只返回你需要预填充到表单的字段即可
        return Json(new 
        {
            company.Address,
            company.ContactPerson,
            company.ContactPhone,
            company.TaxNumber
            // 其他需要预加载的字段自行补充
        });
    }
}

2. 绑定DevExtreme下拉框值变更事件 #

给你的DevExtreme SelectBox添加OnValueChanged事件绑定，触发Ajax请求拿数据，直接填充到表单对应字段即可，全程页面无刷新，用户已输入内容完全保留：
首先是Razor页面的SelectBox定义：

@* 你的DevExtreme下拉框配置 *@
@(Html.DevExtreme().SelectBox()
    .ID("CompanySelectBox")
    .DataSource(/* 你的下拉框数据源配置保持不变 */)
    .ValueExpr("CompanyName")
    .DisplayExpr("CompanyName")
    .OnValueChanged("handleCompanySelectChange") // 新增值变更事件绑定
)

然后添加对应的JS逻辑：

function handleCompanySelectChange(e) {
    const selectedCompanyName = e.value;
    // 未选中值不触发加载
    if (!selectedCompanyName) return;

    // 发Ajax请求拿预加载数据
    $.ajax({
        url: '@Url.Action("PreLoadFormDataBasedOnDropdown", "Sample")',
        type: 'GET',
        data: { companyName: selectedCompanyName },
        success: function (preloadData) {
            // 普通input字段直接赋值
            $("#AddressInput").val(preloadData.Address);
            $("#ContactPersonInput").val(preloadData.ContactPerson);
            
            // 如果你用的是DevExtreme dxForm控件，用官方方法赋值更方便：
            // const formInstance = $("#YourFormId").dxForm("instance");
            // formInstance.updateData("Address", preloadData.Address);
            // formInstance.updateData("ContactPerson", preloadData.ContactPerson);
        },
        error: function () {
            DevExpress.ui.notify("公司预加载数据获取失败", "error", 3000);
        }
    })
}

常见疑问解答 #

• 需要用HttpPost触发操作吗？不需要，这个场景是查询数据，用HttpGet更合理，就算用Post也可以，只要返回Json不跳转就行。
• 可以保留原有保存逻辑吗？完全可以，上面的实现完全不影响你现有的SaveDocument逻辑，不需要改动原有保存代码。

内容的提问来源于stack exchange，提问作者JohnB