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

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 发送 'call' 我的控制器来更新我的视图：

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

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

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

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

我确定一定有一种 different/better 方法可以实现我想做的事情。在复杂的 自更新 ajax 表单中 return 正确的 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
        },
    });
});

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

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

Ajax form with different actions in ASP MVC

asp.net-mvc

jquery

asp.net-ajax

razor

asp.net-mvc-4