首页 > 解决方案 > 使用 jQuery、Ajax ASP.NET 的 MVC 模态登录

问题描述

帮助我的代码,我做错了什么。在我的布局中,当我单击登录按钮时,会出现一个模式表单,插入数据,在调试模式下显示数据已读取,但下一个操作未运行。请任何建议。我的控制器:

[HttpGet]
        public ActionResult Logins()
        {
            return PartialView();
        }

        [HttpPost]
        public ActionResult Logins(User user)
        {
            var obj = db.User.Where(x => x.User_login.Equals(user.User_login)
              && x.User_password.Equals(user.User_password)).FirstOrDefault();
            if (obj != null)
            {
                return RedirectToRoute(new { controller="User",action="ProductList"});
            }
            else
            {
                return RedirectToRoute(new { controller = "User", action = "ProductList" }); 
            }
        }

我的部分观点:

    @model WebEcom.Models.User
@{
    Layout = null;
}
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap.min.js"></script>
<div>
    <form id="myForm">
        @Html.LabelFor(m => m.User_login)
        @Html.TextBoxFor(m => m.User_login, new { @class = "form-control", @placeholder = "Nume" })

        @Html.LabelFor(m => m.User_password)
        @Html.TextBoxFor(m => m.User_password, new { @class = "form-control", @placeholder = "Password" })
        <input type="submit" id="btnSubmit" class="btn btn-success" value="Logins"/>
    </form>
</div>


<script>
    $(document).ready(function () {
        $("#btnSubmit").click(function () {
            var myformdata = $("#myForm").serialize();
            $.ajax({
                type: "POST",
                url: "/User/Logins",
                data: myformdata,
                success: function ()
                {
                    alert("Hello");
                    $("#myModal").modal("hide");
                    window.location.href = "/User/ProductList";
                    
                }
            })
        })
    })
</script>

我在回答中展示了我的布局页面(对此感到抱歉)

标签: jqueryajaxmodel-view-controller

解决方案


它只是我的 html 页面的一部分。

<body>        
           <ul class="nav navbar-nav navbar-right">
             <li><a href="#" onclick="login()"><span class="glyphicon glyphicon-user"></span> SignUp</a>/li>
           </ul>
                                    <div class="modal fade" id="myModal1">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                   <a href="#" class="close" data-dismiss="modal">&times;</a>
                                                    <h3 class="modal-title">Login</h3>
                                                </div>
                                                <div class="modal-body" id="myModalBodyDiv1"></div>
                                            </div>
                                        </div>
                                    </div>
                            @RenderBody()
                <script>
                    var login = function ()
                    {
                        var url = "/User/Logins";
                        $("#myModalBodyDiv1").load(url, function () {
                            $("#myModal1").modal("show");
                        })
                    }
                </script>
            </body>

推荐阅读