CODEWITHSUNDEEP
c#asp.net-mvc
Aniket Prashar
Aniket Prashar

Reputation: 53

mvc Layout page is distorting home page

I want a fixed navigation bar in every page but this layout is changing the contents of other pages that are using this layout. Is it because of the scripts? Please try to explain from the basics. I have included the screenshot of the home page. The registration form is getting shrinked.

<!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 = "[email protected]"
                                  }
                              })
                                @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")
}

Upvotes: 0

Views: 111

Answers (1)

jegtugado
jegtugado

Reputation: 5141

I urge you to read an MVC tutorial or something similar as you do not yet understand the basic layout in ASP.NET MVC.

Assuming this is your layout, every page indicated to use this will have this layout and display the page content on the @RenderBody() meaning you should not reload scripts in your page view.

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

Controller:

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

Homepage View:

@{
    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 = "[email protected]"
                          }
                      })
                        @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 will appear in the position of @RenderSection("scripts", required: false) inside your layout view meaning it will not be rendered after the </div> tag.

Upvotes: 1

Related Questions