Skip to main content
 首页 » 编程设计

c#之MVC 5 ajax 上的表单序列化为空

2024年01月29日32jyk

我正在尝试通过 model inc asp net MVC 5 登录,但是,我似乎无法使用序列化从表单中获取数据,没有错误,它只是没有显示任何内部数据

@using (Html.BeginForm("Login", "Account", new { returnUrl = Request.QueryString["ReturnUrl"] }, FormMethod.Post, new { id = "formModal" })) 
            { 
                @Html.AntiForgeryToken();  
 
                @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 
 
                <div class="container"> 
                    <div class="form-login"> 
                        <div class="panel panel-default"> 
                            <div class="panel-heading"> 
                                <div class="panel-title">Login</div> 
                            </div> 
 
                            <div class="panel-body"> 
 
                                <div class="form-group"> 
                                    <div class="input-group mb-3"> 
                                        <div class="input-group-prepend"> 
                                            <div class="input-group-text"> 
                                                <i class="fas fa-user"></i> 
                                            </div> 
                                        </div> 
                                        @Html.EditorFor(model => model.Username, new { htmlAttributes = new { @class = "form-control", placeholder = "Username", autofocus = true } }) 
                                        @Html.ValidationMessageFor(model => model.Username, "", new { @class = "text-danger" }) 
                                    </div> 
                                </div> 
 
                                <div class="input-group mb-3"> 
                                    <div class="input-group-prepend"> 
                                        <div class="input-group-text"> 
                                            <i class="fas fa-lock"></i> 
                                        </div> 
                                    </div> 
                                    @Html.EditorFor(model => model.Password, new { htmlAttributes = new { @class = "form-control", placeholder = "Password" } }) 
                                    @Html.ValidationMessageFor(model => model.Password, "", new { @class = "text-danger" }) 
                                </div> 
 
                                <div class="form-group"> 
 
                                    <button id="btnSubmit" type="submit" class="btn primary btn-lg"> 
                                        Entrar 
                                    </button> 
                                </div> 
                            </div> 
                        </div> 
                    </div> 
                </div> 
            } 
 
 
<script type="text/javascript"> 
 
$("#btnSubmit").click(function () { 
    debugger 
    var formData = $('#formModal').serialize(); 
    $.ajax({ 
        type: 'POST', 
        url: '/Account/Login', 
        data: formData, 
        async: true, 
        success: function (data) { 
        } 
    }); 
    return false; 
}); 

我做错了什么?我看了一些视频,我做的完全一样......我可以连接到 Controller ,但没有数据

这是 Controller

public class AccountController : Controller 
{ 
    public ActionResult Index() 
    { 
        return PartialView("_PartialLogin"); 
    } 
 
    [HttpPost] 
    public ActionResult Login(LoginViewModel model, string ReturnUrl) 
    { 
        var user = Authenticate(model); 
 
        var ticket = new FormsAuthenticationTicket( 
            1, 
            user.Id.ToString(), 
            DateTime.Now, 
            DateTime.Now.AddHours(5), 
            model.RememberMe, 
            user.Roles.Select(c => c.Nome).FirstOrDefault() 
            ); 
 
        return Redirect(ReturnUrl); 
    } 
} 

这是 View 模型

public class LoginViewModel 
{ 
    [Required] 
    [StringLength(8)] 
    public string Username { get; set; } 
    [Required] 
    [DataType(DataType.Password)] 
    public string Password { get; set; } 
    public bool RememberMe { get; set; } 
} 

无论如何,我似乎无法使用 jquery 从表单中获取数据,当我使用序列化时它始终为 null

编辑

我忘了说,这个表单在一个部分 View 中,在一个模态中

 @model Logistica.ViewModels.LoginViewModel 
 
@{ 
    Layout = null; 
} 
 
<link href="~/Content/bootstrap.css" rel="stylesheet" /> 
<link href="~/Content/login.css" rel="stylesheet" /> 
<link href="~/Content/fontawesome-all.css" /> 
 
<script src="~/scripts/jquery-3.3.1.js"></script> 
<script src="~/Scripts/jquery.validate.js"></script> 
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script> 
<script src="~/Scripts/bootstrap.js"></script> 
<script src="~/Scripts/fontawesome/all.js"></script> 
 
<!-- Modal --> 
<div class="modal fade" id="modalLogin" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
        <div class="modal-content"> 
            <div class="modal-body"> 
 
 
 
            </div> 
 
        </div> 
    </div> 
</div> 

我不敢相信我会这么愚蠢,我认为这将是我的问题的可能选择之一,表单中的表单......

我正在从 _Layout 调用登录模式,它在一个表单中......我不敢相信我为此浪费了一天的时间。这是我第一次倒退制作 mvc 5 项目,因为我们的 IIS 服务器还不允许托管 Asp .NET Core 2.2,并且完全忘记了布局上的表单。

          <form class="form-inline my-2 my-lg-0"> 
                @if (User.Identity.IsAuthenticated) 
                { 
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
                        Dropdown 
                    </a> 
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown"> 
                        <a class="dropdown-item" href="#">Action</a> 
                        <a class="dropdown-item" href="#">Another action</a> 
                        <div class="dropdown-divider"></div> 
                        <a class="dropdown-item" href="#">Something else here</a> 
                    </div> 
                } 
                else 
                { 
                    <ul class="navbar-nav mr-auto"> 
                        <li class="nav-item"> 
                            @Html.Action("Index", "Account") 
                            <a class="nav-link" href="#" data-toggle="modal" data-target="#modalLogin">Log In</a> 
                        </li> 
                    </ul> 
                } 
            </form> 

请您参考如下方法:

将 url 从 url: '/Login/Account' 更改为 url: '/Account/Login' 因为您的 Controller 是帐户而不是登录。我尝试在本地重现并且成功了

$("#btnSubmit").click(function () { 
    debugger 
    var formData = $('#formModal').serialize(); 
    $.ajax({ 
        type: 'POST', 
        url: '/Account/Login', 
        data: formData, 
        async: true, 
        success: function (data) { 
        } 
    }); 
    return false; 
});