Question

我需要一些帮助才能从MVC视图提交表单而不用刷新页面，但是我的下面的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;
});

}

//这是视图

 <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＆＃34; SetTime＆＃34;中获取控制器。我可以帮助为这个视图适当地调用ajax。感谢

Answer 1

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

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

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

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;
    });
});

Answer 2

而不是使用jquery，ajax来提交表单，使用@ Ajax.BeginForm 它与jquery ajax调用相同，它在不刷新页面的情况下发布表单

<div id="dialog" title="">
@using (Ajax.BeginForm("Administration", "Home", new AjaxOptions
                {
                    OnSuccess = "OnSuccess",
                    OnFailure = "OnFailure",
                    LoadingElementId = "progress"
                }))
     {

      @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" />
      }
     }

 </div>

了解更多信息，请点击this link

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

2 个答案: