Asp.net MVC cshtml Divs layout alignment?

Question

Asp.net MVC cshtml Divs layout alignment?

Asked 8 years ago

Viewed 854 times

0

Good afternoon! Dear friends, I am a beginner in the area of development and I have a small doubt. I have an ASP.Net MVC 5 project, where I have a layout inserted in my master page in _Layout.cshtml, follows the code below.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/NewTheme/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/Content/NewTheme/js")
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
    @RenderBody()

    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
    <div id="wrapper">
        <nav class="navbar navbar-default navbar-cls-top " role="navigation" style="margin-bottom: 0">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

            </div>
            <div class="header-right">

                <a href="message-task.html" class="btn btn-info" title="New Message"><b>30 </b><i class="fa fa-envelope-o fa-2x"></i></a>
                <a href="message-task.html" class="btn btn-primary" title="New Task"><b>40 </b><i class="fa fa-bars fa-2x"></i></a>
                <a href="login.html" class="btn btn-danger" title="Logout"><i class="fa fa-exclamation-circle fa-2x"></i></a>

            </div>


            <div class="navbar-brand basic-logo-borda">
                @*<img src="/Content/NewTheme/img/logoCBL.jpg" class="basic-img-logo" />*@
            </div>

        </nav>
        <!-- /. NAV TOP  -->
        <nav class="navbar-default navbar-side" role="navigation">
            <div class="sidebar-collapse">
                <ul class="nav" id="main-menu">
                    <li class="basic-perfil-borda">
                        <div class="user-img-div user-basic basic-perfil-borda">
                            <img src="/Content/NewTheme/img/user.png" class="img-thumbnail" />

                            <div class="inner-text">
                                Jhon Deo Alex
                                <br />
                                <small>Last Login : 2 Weeks Ago </small>
                            </div>
                        </div>

                    </li>


                    <li>
                        <a class="active-menu" href="index.html"><i class="fa fa-dashboard "></i>Home</a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-desktop "></i>Avisos</a>

                    </li>
                    <li>
                        <a href="#"><i class="fa fa-yelp "></i>Publicidade</a>
                    </li>
                    <li>
                        <a href="table.html"><i class="fa fa-flash "></i>Filiais</a>

                    </li>
                    <li>
                        <a href="#"><i class="fa fa-bicycle "></i>Sessoes</a>

                    </li>
                    <li>
                        <a href="gallery.html"><i class="fa fa-anchor "></i>Usuários</a>
                    </li>
                    <li>
                        <a href="error.html"><i class="fa fa-bug "></i>Links</a>
                    </li>
                    <li class="basic-menu-rodape">

                    </li>
                </ul>

            </div>

        </nav>
        <!-- /. NAV SIDE  -->
        <div id="page-wrapper">
            <div id="page-inner">

            </div>
            <!-- /. PAGE INNER  -->
        </div>
        <!-- /. PAGE WRAPPER  -->
    </div>
    <!-- /. WRAPPER  -->

    <div id="footer-sec">
        &copy; 2014 YourCompany | Design By : <a href="http://www.binarytheme.com/" target="_blank">BinaryTheme.com</a>
    </div>
</body>
</html>

That after being initialized my application, that call my controller "User" and action "Index", where in my index there are already generated codes, Index.cshtml code below:

@model IEnumerable<IntranetCBL.Usuarios>

    @{
        ViewBag.Title = "Index";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create") </p> <table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.filial.Descricao)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.sessoes.Descricao)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Senha)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.UrlImg)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Nome)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Login)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.filial.Descricao)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.sessoes.Descricao)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Senha)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.UrlImg)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Nome)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Login)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
            @Html.ActionLink("Details", "Details", new { id=item.Id }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.Id })
        </td>
    </tr> }

</table>

Running application:

I would like to know how to align the layout of my master _Layout.cshtml with my Index.cshtml, I wanted to place the information of Index.cshtml on the side of my menu in the gray area. Please help me out!!!

1 answer

Browser other questions tagged asp.net-mvc-5 razor

You are not signed in. Login or sign up in order to post.

by Almeida • **498** points · Answer 1 · 2016-11-03T17:21:48+00:00

If I understand well what you want you should partition your body-content. You must place @Renderbody(), where your Index will be rendered, in a class block on the right, within a line (Row), following the code I made below. In this situation you will have a space on the right that you can adjust as you wish to house your menu.

     <div class="row">
        <div class="col-sm-4">
            <p>Menu</p>
        </div>
        <div class="col-sm-8">
            @RenderBody()
        </div>
     </div>