jquery - mvc4中如何让按钮点击后停止页面刷新？

Question

我需要什么

当用户单击 MVC 中的提交按钮时，我需要停止页面刷新。

仍然是我所做的

使用 jquery 刷新登录页面。如果单击页面上的提交按钮，则会刷新并显示带有用户名的欢迎消息。但我想要相同的功能而不刷新页面

错误:

提交按钮页面回发

Controller :

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Index(LoginMVC u) {

  if (ModelState.IsValid) // this is check validity
  {
    using(LoginAndSignUpEntities dc = new LoginAndSignUpEntities()) {
      var v = dc.tbl_Detailstbl.Where(a => a.Email_Id.Equals(u.EmailId) && a.Password.Equals(u.Password)).FirstOrDefault();
      if (v != null) {
        Session["LogedUserID"] = v.Email_Id.ToString();
        Session["LogedUserFullname"] = v.Name.ToString();        
      }
    }
  }
  return Json(u, JsonRequestBehavior.AllowGet);
}

查看:

<button id="model" style="border:none;">login</button>

<div id="my-dialog">
  @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @id = "ID" })) { @Html.AntiForgeryToken() // this is for prevent CSRF attack @Html.ValidationSummary(true)
  <div>
    <legend>Login</legend>
    <div class="editor-label">
      @Html.LabelFor(m => m.EmailId)
    </div>
    <div class="editor-label">

      @Html.TextBoxFor(m => m.EmailId, new { @id = "txtuserid" }) @Html.ValidationMessageFor(m => m.EmailId)     
    </div>
    <div class="editor-label">
      @Html.LabelFor(m => m.Password)
    </div>
    <div class="editor-label">
     @Html.PasswordFor(m => m.Password, new { @id = "txtpassword" }) @Html.ValidationMessageFor(m => m.Password)
    </div>
    <p>
      <input type="submit" value="Submit" id="btnlogin" />
    </p>
  </div>
  }
</div>

脚本:

@section scripts{
<script type="text/javascript">
$(document).ready(function() {
  debugger;
  $("#btnlogin").submit(function(e) {
    e.preventDefault();
    var email = $('#txtuserid').val();
    var password = $('#txtpassword').val();
    $.ajax({
      url: '@Url.Action("Index", "Home")', 
      type: 'POST',
      data:  $(this).serialize(),
      datatype: "json",
      success: function() {
        alert("success");
      },
      error: function() {
        alert("error123");
      }
    });

  });
});           
</script>

弹出脚本:

$(function() {
  $("#login_page").dialog({
    autoOpen: false,
    width: 300,
    height: 100,
    show: {
      effect: "blind",
      duration: 1000
    },
    hide: {
      effect: "explode",
      duration: 1000
    },
  });
  $("#model").click(function() {
    $("#login_page").dialog("open");
  });
});

请给我一个解决这个问题的方法......

Answer 1

更新:

刚刚注意到您已经在提交按钮上绑定(bind)了 submit 事件。这是不正确的。

submit 事件应绑定(bind)在 form 上:

$("#my-dialog form").submit(function (e){

        e.preventDefault();
         // put all other code here

 });

<小时/>

.preventDefault() 是实际的方法，我可以看到 e.preventdefault() 中有一个拼写错误，应该更正为:

e.preventDefault(); // look for upperCase D not d

因此，当您单击按钮时，它会停止在 e.preventdefault() 处，因为在事件对象中找不到此按钮，并且脚本执行停止，从而导致回发。