javascript - MVC5中Ajax调用提交表单而不刷新页面

Question

我需要一些帮助来从 MVC View 提交表单而不刷新页面，但它显示我的下面的 ajax 代码不起作用://这里是ajax调用

function AjaxCallAndShowMessage(btnClick) {

$('form').submit(function () {
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function (result) {
                ShowTimeChangeMessage(); // show an alert message
            }
        });

    return false;
});

}

//这是 View

 <div id="dialog" title="">
    @using (Html.BeginForm("Administration", "Home", FormMethod.Post, new { enctype = "multipart/form-data"}))
    {
        @Html.DropDownList("SeTime", new List<SelectListItem>
    {
        new SelectListItem{ Text="1 Min", Value = "60" },
        new SelectListItem{ Text="2 Min", Value = "120" },
        new SelectListItem{ Text="3 Min", Value = "180" },
    }, "Select Time")
        <input type="submit" value="Set Time "  
        onclick="AjaxCallAndShowMessage(this)" />
    }
</div>

我没有获取所选项目的数据，我喜欢从 dropDownkist“SetTime”获取 Controller 中的数据。我可以得到一些帮助来为该 View 进行适当的 ajax 调用吗？谢谢

Answer 1

您的代码将生成一个名为 SeTime 的 SELECT 元素。因此，当您提交表单(ajax或普通表单提交)时，浏览器将发送所选选项值作为带有SeTime键的表单项的值。假设您的 http post 操作方法中有一个同名的参数，它应该可以工作。

[HttpPost]
public ActionResult Administration(string SeTime)
{
 // to do : Do something with SeTime
 // to do : Return something
}

如果您使用 View 模型作为方法参数，请确保它是设置表，以便模型绑定(bind)器能够设置发布的表单请求中的值。

public class YourViewModel
{
  public string SeTime {set;get;}
  // other properties here
}

我还发现您的 UI 代码存在一个小问题。使用当前代码，当用户单击提交按钮时，它会调用 AjaxCallAndShowMessage js 函数，该函数将 submit 事件处理程序添加到表单。因此，当用户第二次单击时，它会再次将事件处理程序注册到同一表单。这意味着它现在将进行 2 个 ajax 调用。当用户第三次点击时，它将再次注册事件处理程序，并且现在将进行 3 次调用。这样继续下去!!!

您只需注册一次即可。如果您从 html 标记中删除 onclick 并采用 onobutrusive javascript 方式，

<input type="submit" value="Set Time "   />

并在文档就绪事件中注册提交事件处理程序，

$(function () {

    $('form').submit(function () {

        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function(result) {
               alert("Ajax call is done");
            }
        });

        return false;
    });
});