Question

我需要什么

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

我还做了什么

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

错误：

提交页面回发的按钮

控制器：

[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开始，你应该使用done，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;
});

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

3 个答案:

更新