CODEWITHSUNDEEP
asp.nethtmlasp.net-mvc-4razor
peter
peter

Reputation: 8682

html layout issue in mvc razor code

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>

Upvotes: 0

Views: 958

Answers (1)

fdomn-m
fdomn-m

Reputation: 28621

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

Upvotes: 3

Related Questions