Asp.net mvc 4 布局中的模型会打断其他页面_Asp.net Mvc 4_Twitter Bootstrap

Asp.net mvc 4 布局中的模型会打断其他页面

asp.net-mvc-4 twitter-bootstrap

Asp.net mvc 4 布局中的模型会打断其他页面,asp.net-mvc-4,twitter-bootstrap,Asp.net Mvc 4,Twitter Bootstrap,由于缺乏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/S

由于缺乏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>

@model BasicFinanceUI.Models.LoginModel
@视图包。标题

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

因此，在布局的底部，我有：

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


登录
@使用（Html.BeginForm（“登录用户”、“用户”））
{

@LabelFor（x=>x.Username）
@Html.TextBoxFor（x=>x.Username）


@LabelFor（x=>x.Password）
@Html.PasswordFor（x=>x.Password）


@LabelFor（x=>x.RememberMe）
@CheckBoxFor（x=>x.RememberMe）

取消
}

我的/Home/Index上还有一个Login和Logout按钮，因此当用户在默认页面上时，可以看到用户的两个Login按钮。一个在主页上，一个在标题/菜单中，这是共享的

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

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

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

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

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

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

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