How to use multiple layouts in a single view

Question

I'm developing an asp.net mvc web application for the first time. When creating the project by default we get a proper template. In that template I want to add an image slider on top of it while default format also kept as it. Keeping everything as it is, I create another view called ImageSlider.cshtml and called it within Index.cshtml file. However image slider was working perfectly. But earlier default layout is missing now.

How it is now

How I wanted it to be. This format + image slider

Index.cshtml

@{
    ViewBag.Title = "Sri Lanka Railway Department - Home";
    Layout = "~/Views/Home/ImageSlider.cshtml";
}




    
        Transactions
        Click below link to view your Account Transaction History and Account Balance
        Learn more »
    
    
        Top Up
        Click below link to top up your account
        Learn more »
    
    
        Train Booking
        Click below link to book your train tickets and to view train schedule
        Learn more »

ImageSlider.cshtml




    
    
    @Styles.Render("~/Content/js-image-slider.css")
    @Scripts.Render("~/Scripts/js-image-slider.js")




    
        

            
            
            
            
            
            
        
        @RenderBody()

    

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)


`

ImageSlider.CSS

#sliderFrame, #sliderFrame div {
    box-sizing: content-box;
}
#sliderFrame 
{
    width:2000px;
    margin:0 auto; /*center-aligned*/
}

#slider, #slider .sliderInner {
    width:1500px;height:1000px;/* Must be the same size as the slider images */
    border-radius:3px;
}

#slider {
    background-color:white;
    position:relative;
    margin:0 auto; /*center-aligned*/
    transform: translate3d(0,0,0);
    box-shadow: 0px 1px 5px #999999;
}

/* Navigation Bullet Wrapper*/
#slider .navBulletsWrapper  {
    top:320px;
    text-align:center;
    background:none;
    position:relative;
    z-index:3;
}

/* each bullet */
#slider .navBulletsWrapper div 
{
    width:11px; height:11px;
    font-size:0;color:White;/*hide the index number in the bullet element*/
    background:transparent url(~/Images/bullet.png) no-repeat 0 0;
    display:inline-block; *display:inline; zoom:1;
    overflow:hidden;cursor:pointer;
    margin:0 6px;/* set distance between each bullet*/
}

#slider .navBulletsWrapper .active {background-position:0 -11px;}


/* --------- Others ------- */

#slider img, #slider>b, #slider a>b {
    position:absolute; border:none; display:none;
}

#slider .sliderInner {
    overflow:hidden;
    position:absolute; top:0; left:0;
}

#slider>a,{display:none;}
#slider div {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}

Image SLider.js

var sliderOptions=
{
    sliderId: "slider",
    startSlide: 0,
    effect: "series1",
    effectRandom: false,
    pauseTime: 2600,
    transitionTime: 500,
    slices: 12,
    boxes: 8,
    hoverPause: 1,
    autoAdvance: true,
    thumbnailsWrapperId: "thumbs",
    m: false,
    license: "mylicense"
};

var imageSlider=new mcImgSlider(sliderOptions);


function mcImgSlider(i){for(var I=function(a){return document.getElementById(a)},d="length",Q="getElementsByTagName",t=function(e){var a=e.childNodes,c=[];if(a)for(var b=0,f=a[d];bd?1:-1,f=Math.ceil(60*c.c/1e3),a,e=1;e<=f;e++){a=d+c.b(e/f,c.d)*i;if(h!=y)a=Math.round(a);b.push(a)}b.e=0;return b},n:function(){this.b==null&&this.p()},p:function(){this.q();var a=this;this.b=J?J(function(){a.p()}):window.setInterval(function(){a.q()},15)},q:function(){var a=this.d[d];if(a){for(var c=0;c=a.a[d])a.a.p=0}if(b<1||b>17)b=15;return b}},qb=["$1$2$3","$1$2$3","$1$24","$1$23","$1$22"],kb=function(){if(b.b!=2){b.b=1;z(m);m=null}},hb=function(){if(b.b!=2){b.b=0;if(m==null&&!b.c&&a.i)m=u(function(){j.y(j.n(b.a+1),0,1)},a.b/2)}},rb=function(){var a=0,b=0,c;while(a-1&&typeof McVideo!=p;if(c){b=1;break}++a}return b},n=[],jb=function(b){var a=n[d];if(a)while(a--)n[a][g]=a!=b&&n[a].on==0?"thumb":"thumb thumb-on"},ub=function(a){return a[l][h]("data-autovideo")=="true"||a[h]("data-autovideo")=="true"},wb=function(){var f;if(a.l)f=I(a.l);if(f)for(var h=U(f,"*"),e=0;e1){u(function(){v.e(1)},0);m=u(function(){v.y(v.n(1),0,1)},a.b+a.c)}if(a.h!=0&&!ab){f.onmouseover=kb;f.onmouseout=hb}},b:function(a){if(typeof McVideo!=p){a.onclick=function(){return this.aP?false:j.d(this)};McVideo.register(a,this)}},A:function(a){if(typeof a.aP===p){var b=a[h]("data-autovideo");if(b=="true")a.aP=true;else if(b=="1")a.aP=1;else a.aP=0}},d:function(c){z(m);m=null;var a=McVideo.play(c,o,s,this.Id);if(a||ab)b.b=2;return false},f:function(){x=C("navBulletsWrapper");for(var e=[],a=0;a"+(a+1)+"");x[S]=e.join("");for(var c=t(x),a=0;a10)d[c][b==11?"bottom":"top"]="0";if(b<11)var e=0,f=o;else{e=0;f=s}var g={b:L.a.j,c:a.c*1.6,a:function(){j.o()}};G.r(d,b<11?"width":"height",e,f,g)},s:function(b){b[c][O]="0";b[c][r]=o+"px";b[c][q]=s+"px";var d={c:a.c*1.6,a:function(){j.o()}};G.r(b,y,0,1,d)},t:function(b){var t=a.g*a.m,o=0,m=0,i=0,g=0,f=[];f[0]=[];for(var e=0,n=b[d];e=0&&h8?o:Math.round(o/a.f),l=g>8?1:a.f,f=0;fb.a?"10":"9";this.p(f)},n:function(a){if(a>=b.d)a=0;else if(a<0)a=b.d-1;return a},To:function(d,c){if(c&&!a.i)return;this.y(this.n(b.a+d))}};var Z=function(){var a=I(i.sliderId);if(a&&t(a)[d]&&a.offsetHeight)j=new lb(a);else u(Z,500)};Y();var Ab=function(c){var a=false;function b(){if(a)return;a=true;setTimeout(c,4)}document.addEventListener&&document.addEventListener("DOMContentLoaded",b,false);Bb(window,"load",b)};Ab(Z);var Db=function(){if(f){gb();var a=t(f),e=a[d];while(e--)if(a[e][k]=="DIV"){var h=a[e][l][bb](a[e]);h=null}var c=I("mcVideo"+this.Id);if(c){c.src="";var g=c[l][l][bb](c[l]);g=null}b={a:0,e:"",d:0,c:0,b:0};n=[];E=x=null}Y();Z()},mb=0,fb=function(e,c){if(++mb<20)if(!j||typeof tooltip==p)u(function(){fb(e,c)},300);else for(var b=t(x),a=0;a

Matthijs · Accepted Answer

Add a reference to the Bootstrap CSS files in the of ImageSlider.chtml:

@Styles.Render("~/Content/css")

Currently they are not loaded in the layout file (ImageSlider), which is the reason why the page looks messy.

The ~/Content/css is a style bundle for the Bootstrap.css and Site.css files.

You can find this peace of code in the App_Start/BundleConfig.cs:

bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/site.css"));

Another option is to make use of Partial Views, which simply injects the ImageSlider.cshtml into the default Layout.cshtml.

How to use multiple layouts in a single view

Answers (1)

Related Questions