布局中的模型打破了其他页面答案

【问题标题】：Model in Layout breaks other pages布局中的模型打破了其他页面
【发布时间】：2013-12-28 05:53:41
【问题描述】：

由于缺乏 MVC4 经验，我有一个设计缺陷。

问题是我的布局中有一个模型...

@model BasicFinanceUI.Models.LoginModel
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet"/>

    <title>@ViewBag.Title</title>
</head>

它在我的布局上的原因是登录按钮在布局屏幕上，它会启动一个模式弹出窗口，其中有使用该模型的恶魔。

所以，在布局的底部，我有：

<div class="modal fade" id="login" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Login</h3>
                <div class="modal-body">
                    @using (Html.BeginForm("LoginUser", "User"))
                    {
                        <p>
                            @Html.LabelFor(x => x.Username)
                            @Html.TextBoxFor(x => x.Username)
                        </p>
                        <p>
                            @Html.LabelFor(x => x.Password)
                            @Html.PasswordFor(x => x.Password)
                        </p>
                        <p>
                            @Html.LabelFor(x => x.RememberMe)
                            @Html.CheckBoxFor(x => x.RememberMe)
                        </p>
                        <div class="modal-footer">
                            <input type="submit" value="Login" name="btn_login" class="btn btn-default" />
                            <a class="btn btn-primary" data-dismiss="modal">Cancel</a>
                        </div>
                    }
                </div>
            </div>
        </div>
    </div>

我的 /Home/Index 上还有一个登录和注销按钮，因此用户在默认页面上会看到两个登录按钮。一个在主页上，一个在标题/菜单中，这是共享的。

我认为在布局页面上有模型，可能还有所有登录屏幕代码，可能是这里的问题。我应该如何实施？

我需要 Index.cshtml 页面上的登录按钮（默认），以及顶部布局菜单中的按钮。并且两者都使用上面显示的模型弹出代码。

【问题讨论】：

我们将登录屏幕单独放置。一旦他们通过登录，他们就会被重定向到带有布局页面的主程序。如果您确实想将登录放在布局页面上，请务必将代码放入部分视图中
谢谢...然后局部视图中的模型引用，不会干扰其他视图？
布局页面上的模型仍会与使用该布局页面的所有内容发生冲突。使用部分，但您需要稍微不同地处理模型。通常一个登录页面只有几个字段。如果您的情况是这样，您可以通过 ajax 调用将这些单独的字段发送回控制器，这样您就不需要使用模型
谢谢马特...它确实只有三个字段...用户名、密码和记住我。目前，我正在使用 LoginModel 进行操作。我对此很绿色。是否仍然可以使用模型，而不是 Ajax 调用？（我还没有进行 Ajax 调用...... :)）虽然失败了，因为我正在尝试使用“@Html.RenderPartial("~/Views/User/_LoginUser.cshtml")”，但它是红色的。
它来自但不是来自布局页面。如果你想走那条路，我可以帮助 ajax 调用。否则，我建议将登录页面从您的布局移动到您可以通过视图模型传递模型的索引页面。只需检查登录视图是否显示其余内容

标签： asp.net-mvc-4 twitter-bootstrap

【解决方案1】：

首先像您拥有的那样构建视图，但不要使用帮助程序，只需构建 html 字段。确保在我们可以用作选择器的字段上放置一个 id 或一个类

<input type="text" class="txtUserName" /> etc

然后确保您在页面上引用了 jquery 并将其放在屏幕底部

<script type="text/javascript">
    $(document).ready(function(){
        $('.btnSubmit').on('click', function(){
            $.ajax({
                url: "@(Url.Action("Action", "Controller")",
                type: "POST",
                contentType: "application/json",
                data: { UserName: $('.txtUserName').val(), Password: $('.txtPassword').val() }
                cache: false,
                async: true,
                success: function (result) {
                    alert('Login Successful!');
                    window.location = "@Url.Action("Index", "Controller")";
                }
            });
        });
    });
</script>

然后在您的控制器上，您需要设置一个方法来接收 ajax 调用

[HttpPost]
public ActionResult Login(string UserName, string Password){
    //Check the user name and password against the database
    //from here http://stackoverflow.com/questions/10608198/asp-net-mvc3-returning-success-jsonresult
    var result=new { Success="True", Message="Success"};
    return Json(result, JsonRequestBehavior.AllowGet);
}

【讨论】：