@Html.RenderPartial没有从主布局应用css

我有一个Master.cshtml布局，看起来如下：

@{
    Layout = null;
}
<!doctype html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8" />
    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../css/compiled-styles.css">
    <script src="../scripts/modernizr.custom.67294.js"></script>
</head>
<body>
   @{Html.RenderPartial("MainNavigation");}
    @RenderBody()
    @{Html.RenderPartial("BottomNavigation");}
    <!-- Included JS Files (Compressed) -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="../scripts/scripts.js" type="text/javascript"></script>
</body>
</html>

compiled-styles.css中的css被应用到Master，它也被应用到MainNavigation和BottomNavigation部分，但在另一个页面(Products.cs.html(中，我有另一个Partial，它没有在那里应用。以下是其来源：

@{
    Layout = "Master.cshtml";
}

<div id="products">
    <section id="products-filter-overlay">
        <button class="back-button">
            <svg width="76px" height="48px" viewBox="0 0 76 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
                <!-- Generator: Sketch 3.3.2 (12043) - http://www.bohemiancoding.com/sketch -->
                <title>Shape</title>
                <desc>Created with Sketch.</desc>
                <defs></defs>
                <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
                    <g id="Products-Filter-Overlay@2x" sketch:type="MSArtboardGroup" transform="translate(-100.000000, -100.000000)" fill="#FFFFFF" opacity="0.8">
                        <path d="M172.709993,120.286477 L111.231928,120.286477 L125.901491,105.615964 C127.186638,104.331577 127.186638,102.248058 125.901491,100.96386 C124.616344,99.6787132 122.532825,99.6787132 121.249578,100.96386 L100.96386,121.249958 C99.6787132,122.534345 99.6787132,124.618054 100.96386,125.902061 L121.249578,146.189108 C121.891961,146.831872 122.733843,147.152778 123.575534,147.152778 C124.417226,147.152778 125.259107,146.831872 125.901491,146.189108 C127.186638,144.904721 127.186638,142.821202 125.901491,141.537195 L111.231928,126.865921 L172.709993,126.865921 C174.526755,126.865921 176,125.392866 176,123.576104 C176,121.759342 174.526945,120.286477 172.709993,120.286477 L172.709993,120.286477 Z" id="Shape" sketch:type="MSShapeGroup"></path>
                    </g>
                </g>
            </svg>
        </button>

        <div class="module group">
            <h2>TELL US ABOUT YOUR VEHICLE</h2>
            <h3>So we can show you the products that can take it to the next level</h3>
            @{
                Html.RenderPartial("ProductFilter",new ProductFilterModel());
            }

            <a href="#" id="noVehicle" class="vehicle-not-found">I didn't find my vehicle</a>
            <a href="#" class="view-all-products">Skip this step and see all products</a>
        </div><!--module-->
    </section>
</div>

css应用于Products.cshtml中的所有内容，但ProductFilter视图没有应用任何css。当我查看html时，我可以看到顶部呈现的css链接。以下是我的部分观点：

@model ProductFilterModel
@using (@Html.BeginUmbracoForm("GetProducts", "ProductFilter", null, new { @class = "vehicle-filter-group" }))
{
    <div class="select">
        @Html.DropDownListFor(x => x.Year, new List<SelectListItem>
    {
        new SelectListItem{Text = "YEAR", Value = ""},
        new SelectListItem{ Text = "1990", Value = "1990"},
        new SelectListItem{ Text = "1991", Value = "1991"},
        new SelectListItem{ Text = "1992", Value = "1992"},
        new SelectListItem{ Text = "1993", Value = "1993"},
    }, new { @class = "year" })
    </div>
    <div class="select">
        @Html.DropDownListFor(x => x.Year, new List<SelectListItem>
        {
            new SelectListItem{Text = "MAKE", Value = ""},
            new SelectListItem{ Text = "Volvo", Value = "Volvo"},
            new SelectListItem{ Text = "Saab", Value = "Saab"},
            new SelectListItem{ Text = "Opel", Value = "Opel"},
            new SelectListItem{ Text = "Audi", Value = "Audi"},
        }, new { @class = "make" })
    </div>
    <div class="select">
        @Html.DropDownListFor(x => x.Model, new List<SelectListItem>
        {
            new SelectListItem{Text = "MODEL", Value = ""},
            new SelectListItem{ Text = "Volvo", Value = "Volvo"},
            new SelectListItem{ Text = "Saab", Value = "Saab"},
            new SelectListItem{ Text = "Opel", Value = "Opel"},
            new SelectListItem{ Text = "Audi", Value = "Audi"},
        }, new { @class = "model" })
    </div>

    <div class="select">
        @Html.DropDownListFor(x => x.Engine, new List<SelectListItem>
        {
            new SelectListItem{Text = "ENGINE", Value = ""},
            new SelectListItem{ Text = "Volvo", Value = "Volvo"},
            new SelectListItem{ Text = "Saab", Value = "Saab"},
            new SelectListItem{ Text = "Opel", Value = "Opel"},
            new SelectListItem{ Text = "Audi", Value = "Audi"},
        }, new { @class = "model" })
    </div>
    <button type="submit" class="search-button">SEARCH</button>
}

使用Html.RenderPartial()，还需要传递要渲染的模型。前{Html.RenderPartial("Foo", Bar);}

相关内容

最新更新

热门标签：