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填充第二个下拉列表。我可以发送电话＆＃39;我的控制器通过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
        },
    });
});

如果我的答案不够明确，请告诉我。

在ASP MVC中使用不同操作的Ajax表单

1 个答案: