mvc布局页面使主页变形

时间：2018-08-24 03:34:27

标签： c# asp.net-mvc

我希望在每个页面中都有一个固定的导航栏，但是此布局正在更改使用此布局的其他页面的内容。是因为脚本吗？请尝试从基础进行解释。我已经包含了主页的屏幕截图。注册表缩小了。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - MY BOOKS</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        @*<footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>*@
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts",false)
</body>
</html>

Homepage 

@model LogReg.Models.Login

<!DOCTYPE html>
<html>
<head>
    <title>MyBooks Login Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <link href="/RegisterTemplate/css/font-awesome.min.css" rel="stylesheet" type="text/css" media="all">
    <link href="/RegisterTemplate/css/style.css" rel="stylesheet" type="text/css" media="all" />
    <link href="//fonts.googleapis.com/css?family=Raleway:400,500,600,700,800,900" rel="stylesheet">
</head>
<body>
    <div class="signupform">
        <h1>MyBooks Login Form</h1>
        <div class="container">

            <div class="agile_info">
                <div class="w3l_form">
                    <div class="left_grid_info">
                        <h3>Welcome to MyBooks!</h3>
                        <h4>A place of Story makers, Dragon-tamers, Dream Catchers, Fact Finders and definitely a safer place.</h4>
                        <p>Books are the quietest and most constant of friends; they are the most accessible and wisest of counselors, and the most patient of teachers. </p>

                    </div>
                </div>
                <div class="w3_info">
                    <h2>Login to an Existing Account</h2>
                       @using (Html.BeginForm())
                       {
                        @Html.AntiForgeryToken()
                        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                            <form action="#" method="post">
                                <div class="input-group">
                                    <span><i class="fa fa-user" aria-hidden="true"></i></span>
                                   @Html.EditorFor(model => model.Email_ID, new
                              {
                                  htmlAttributes = new
                                  {
                                      @class = "form-control",
                                      @placeholder = "Enter Email Address",
                                      required = "Required",
                                      pattern = "[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,3}$",
                                      title = "example@email.com"
                                  }
                              })
                                @Html.ValidationMessageFor(model => model.Email_ID, "", new { @class = "text-danger" })

                                </div>
                                <div class="input-group">
                                    <span><i class="fa fa-user" aria-hidden="true" ></i></span>
                                    @Html.EditorFor(model => model.Password, new
                               {
                                   htmlAttributes = new
                                   {
                                       @class = "form-control",
                                       @placeholder = "Enter Password",
                                       required = "Required",
                                       oninvalid = "this.setCustomValidity('Password cannot be empty')",
                                       oninput = "setCustomValidity('')"
                                   }
                               })
                                    @Html.ValidationMessageFor(model => model.Password, "", new { @class = "text-danger" })
                                </div>
                                <div class="form-group">
                                    <div class="col-md-10">
                                        <div class="checkbox">
                                            @Html.EditorFor(model => model.Remember_Me)
                                            @Html.ValidationMessageFor(model => model.Remember_Me, "Remember Me", new { @class = "text-danger" })
                                        </div>
                                    </div>
                                </div>
                                <button class="btn btn-danger btn-block" type="submit">Login</button>         
                            </form> 
                        }
                </div>
                <div class="clear"></div>
            </div>

        </div>
        <div class="footer">

            <p>&copy; MyBooks Login form 2018. All Rights Reserved | Design by Aniket Prashar</p>
        </div>
    </div>
</body>
</html>
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

1 个答案:

答案 0 :(得分：1)

我强烈建议您阅读MVC tutorial或类似的内容，因为您尚不了解ASP.NET MVC的基本布局。

假设这是您的布局，则指示要使用此布局的每个页面都将具有此布局，并在@RenderBody()上显示页面内容，这意味着您不应该在页面视图中重新加载脚本。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - MY BOOKS</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        @*<footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>*@
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts",false)
</body>
</html>

控制器：

[HttpGet]
public ActionResult Homepage()
{
    return View(new LogReg.Models.Login());
}

主页视图：

@{
    ViewBag.Title= "MyBooks Login Page";
}
<link href="/RegisterTemplate/css/font-awesome.min.css" rel="stylesheet" type="text/css" media="all">
<link href="/RegisterTemplate/css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="//fonts.googleapis.com/css?family=Raleway:400,500,600,700,800,900" rel="stylesheet">
<div class="signupform">
<h1>MyBooks Login Form</h1>
<div class="container">
    <div class="agile_info">
        <div class="w3l_form">
            <div class="left_grid_info">
                <h3>Welcome to MyBooks!</h3>
                <h4>A place of Story makers, Dragon-tamers, Dream Catchers, Fact Finders and definitely a safer place.</h4>
                <p>Books are the quietest and most constant of friends; they are the most accessible and wisest of counselors, and the most patient of teachers. </p>    
            </div>
        </div>
        <div class="w3_info">
            <h2>Login to an Existing Account</h2>
               @using (Html.BeginForm())
               {
                @Html.AntiForgeryToken()
                @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                    <form action="#" method="post">
                        <div class="input-group">
                            <span><i class="fa fa-user" aria-hidden="true"></i></span>
                           @Html.EditorFor(model => model.Email_ID, new
                      {
                          htmlAttributes = new
                          {
                              @class = "form-control",
                              @placeholder = "Enter Email Address",
                              required = "Required",
                              pattern = "[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,3}$",
                              title = "example@email.com"
                          }
                      })
                        @Html.ValidationMessageFor(model => model.Email_ID, "", new { @class = "text-danger" })

                        </div>
                        <div class="input-group">
                            <span><i class="fa fa-user" aria-hidden="true" ></i></span>
                            @Html.EditorFor(model => model.Password, new
                       {
                           htmlAttributes = new
                           {
                               @class = "form-control",
                               @placeholder = "Enter Password",
                               required = "Required",
                               oninvalid = "this.setCustomValidity('Password cannot be empty')",
                               oninput = "setCustomValidity('')"
                           }
                       })
                            @Html.ValidationMessageFor(model => model.Password, "", new { @class = "text-danger" })
                        </div>
                        <div class="form-group">
                            <div class="col-md-10">
                                <div class="checkbox">
                                    @Html.EditorFor(model => model.Remember_Me)
                                    @Html.ValidationMessageFor(model => model.Remember_Me, "Remember Me", new { @class = "text-danger" })
                                </div>
                            </div>
                        </div>
                        <button class="btn btn-danger btn-block" type="submit">Login</button>         
                    </form> 
                }
        </div>
        <div class="clear"></div>
    </div>
</div>
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

@section Scripts将出现在布局视图内@RenderSection("scripts", required: false)的位置，这意味着它不会在</div>标签之后呈现。

相关问题
最新问题