html layout issue in mvc razor code

Question

First of all i would like to know whether i can use asp.net masterpagefile in MVC razor site, since everything already developed in asp.net and now migrating in to MVC razor?

Do we have mechanism to see design at design time in MVC?

Next is i created a _layout.cshtml master page in mvc and i am using everywhere .This contains two images including gif file and a section to render body @RenderBody(),but unfortunately render body contents and two images are coming in same line.I really don't know what causes issue? Following is the code

.header {
    font-size: 8pt;
    color: #333333;
    font-weight: bold;
}

.footer {
    font-size: 8pt;
    color: #666666;
    font-family: Verdana, helvetica, tahoma;
}



<body>
 <div class="header">
        <div style="float:right"><img src="~/Images/imagesnew/Images/master/IWHeader-v2-Right.bmp" /></div>
        <div style="float:right"> <img src="~/Images/imagesnew/Images/master/sampleLogo.gif" /></div>
        </div>
        <div style="margin-top:100px">
            @RenderSection("featured", required: false)
            <section class="content-wrapper main-content clear-fix">
                @RenderBody()
            </section>
        </div>
        <div class="footer">
            <div class="content-wrapper">
                <div class="float-left">
                    <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>
                </div>
            </div>
        </div>
        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)
</body>

You have to port the HTML code in the ASP.NET master file to the MVC layout file so the Razor view engine can interpret the code. You may use the razor syntax or the ASP.NET ASPX syntax. — wonderful world
– wonderful world, Commented May 11, 2015 at 13:59

fdomn-m · Accepted Answer · 2015-05-11 13:53:37Z

can I use asp.net masterpagefile in MVC razor site

It's not recommended, but I recall that you can mix+match aspx+mvc in the same project, but not in the same page/view. Razor view needs _layout. Migrate the masterpage to _layout and use @RenderSection as you already are.

see razor view at design time

Not in the way you're expecting. You can get addins/browser extensions to auto-reload a page on save (the one I use is no longer provided, so no links, sorry).

render body contents and two images are coming in same line

After a float: you need a clear:. Easiest is to simply do both (then you can change right/left as needed)

<div style="margin-top:100px;clear:both">
    @RenderSection("featured", required: false)

Alternatively, you can force the <header> tag to do this rather than rely on the next element. In this case, add an :after to the header, eg in .css:

div.header:after {
    content:"";
    display:table;
    clear:both;
}

it looks like your main-content section already has this with class clear-fix, so you could just add that:

<div style='margin-top:100px' class='clear-fix'>

similarly for the footer, make sure there's a clear:both:

div.footer {
    clear:both;
}

For best-practice, put these in a .css

Collectives™ on Stack Overflow

html layout issue in mvc razor code

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related