Question

我正在尝试通过ASP.NET MVC 5网络模型登录，但是，我似乎无法使用serialize从表单中获取数据，没有错误，它只显示了内部数据

@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;
});

我在做什么错？我看了一些视频，做的完全一样...我可以到达控制器，但是没有数据

这是控制器

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);
    }
}

这是视图模型

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从表单获取数据，当我使用序列化时，它始终为空

编辑

我忘了说了，这种形式是在部分视图中的模态

 @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>

Answer 1

您发布的数据需要映射到一个对象{模型：{}，ReturnUrl：“”}，ReturnUrl可以来自查询字符串，但是操作和表单模型不同。

您的表单模型是{}，而您的操作模型是{model：{}，ReturnUrl：“”}

您在表单输入中的名称属性应该是model.Username，model.Password和Username，Password

Answer 2

将网址从url: '/Login/Account'更改为网址：'/Account/Login'，因为您的控制器是“帐户未登录”。我尝试在本地复制，并且有效

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

表格序列化在MVC 5 Ajax上为空

2 个答案: