如何在mvc4中单击按钮后停止刷新页面？

Question

我需要的

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

还是我做了什么

使用jquery.if点击页面上的提交按钮登录页面，刷新并显示带有用户名的欢迎消息。 但我希望在不刷新页面的情况下使用相同的功能

错误：

提交一个按钮页面是回发

控制器：

[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

更新：

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

submit事件应该绑定在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()因为在事件对象中找不到这一点，并且脚本执行会停止在回发中导致。

Answer 2

@Jai为您的问题提供了正确的答案（+1）。

但我还建议将处理程序更改为

$("#ID").submit(function(e) {
    e.preventDefault();

好像用户按下了其中一个字段，那将提交表单，绕过您的事件处理程序。

Answer 3

您是否在代码中返回false以停止默认提交行为？

从jQuery 1.5开始，你应该使用promise，fail和always的promise接口方法。

http://api.jquery.com/jquery.ajax/

$("#btnlogin").submit(function(e) {
  e.preventDefault();

// Get the form
var $this = $(this);

  $.ajax({
    url: this.action,
    type: this.method,
    data: $(this).serialize(),
    datatype: "json"
  })
  .done(function( data ) {
    alert("success");
  })
  .fail(function() {
    alert("fail");
  });

  return false;
});