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

user1073075 发表于 Dev

用户1073075

在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形式返回正确的ActionResult的正确方法是什么？

保罗·DS

正确的方法是为您要在控制器中执行的每个动作创建一个方法。您应该为每个操作使用一个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
        },
    });
});