ASP MVC 中具有不同操作的 Ajax 表单

Question

在 ASP.NET MVC 中，我有以下输入表单（简化）：

<div id="ajaxtarget">
@using (Ajax.BeginForm("SubmitForm", "Home", new AjaxOptions { UpdateTargetId = "ajaxtarget" }))
{
        @Html.DropDownListFor(x => x.PostalCode, Model.PostalCodeItemList, new { @name = "PostalCodeId" , @id="PostalCodeId" })

        @Html.LabelFor(x => x.StreetCode)
        @Html.DropDownListFor(x => x.StreetCode, Model.StreetItemList, new {  @id="StreetCodeId" })

        ...
        <input type="submit" value="@Global.Execute" id="btnSubmit" />
}
</div>

当用户从第一个下拉列表中选择某些内容时，应通过 AJAX 填充第二个下拉列表。我可以通过 javascript 发送“呼叫”我的控制器来更新我的视图：

$(document).ready(function () {
        $('#PostalCodeId').on('change', function () {
            $(this).parents('form').submit();
        });
    });

我的问题是我的表单有很多不同的控件来触发我需要在控制器中处理的一些操作，所以我正在寻找一种在提交表单时添加一些额外参数的方法。

现在我找到了一个解决方案，我在我的模型和表单中添加了一个额外的字段，我根据哪个控件触发脚本来填充 javascript。 @Html.HiddenFor(x => x.ChosenControllerAction, new { id = "ChosenAction" }) 在我的控制器中，我可以根据这个值返回一个视图或动作：

    public ActionResult SubmitForm(MyModel model) 
    {
        if (model.ChosenControllerAction == "PopulateStreetCodes")
        {
          ...
        }

我确信一定有一种不同/更好的方式来归档我想做的事情。以复杂的自我更新 ajax 形式返回正确的 ActionResults 的正确方法是什么？

Answer 1

正确的方法是为您想要在控制器中执行的每个操作创建一个方法。并且您应该为每个操作都有一个 javascript 代码。

例子：

控制器

public ActionResult PopulateFirstDropdown(MyModel model)
{
    // Return the new values for your first dropdownlist
    // Or the partial view
}

public ActionResult PopulateSecondDropdown(MyModel model)
{
    // Return the new values for your second dropdownlist
    // Or the partial view
}

public ActionResult SubmitForm(MyModel model)
{
    // Save the form
}

Javascript：

$('#FirstField').on('change', function() {
    $.ajax({
        url: "/YourController/PopulateFirstDropdown",
        type: "POST",
        data:  $(this).closest('form').serialize(),
        success: function (data) {
            // Use data to refresh dropdownlist
            // or refresh the content of the partial view
        },
    });
});

$('#OtherField').on('change', function() {
    $.ajax({
        url: "/YourController/PopulateSecondDropdown",
        type: "POST",
        data:  $(this).closest('form').serialize(),
        success: function (data) {
            // Use data to refresh dropdownlist
            // or refresh the content of the partial view
        },
    });
});

如果我的回答不够清楚，请告诉我。