CODEWITHSUNDEEP
asp.net-mvcrazorasp.net-mvc-partialview
Mikahel
Mikahel

Reputation: 73

ASP.NET MVC - How to render a @section in a partal view with parameters?

I use partial views to render the content of the pages. Normally, I use sections to render specific Scripts and CSS for the content by using @section

My basic url is {Controller}/{Action}/{Id}

For urls like {Controller}/{Action} ie. Product/Create, the sections and the pages render ok.

But when my url is {Controller}/{Action}/{Id} ie. Product/Edit/2, the CSS and Scripts are absent and I only get a plain HTML page.

My Layout:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>

<!-- CSS FILES -->
    <link href="../assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />
<!-- BEGIN RENDER CSS SECTION EXISTING IN PARTIAL -->
    @RenderSection("Style", required: false)
<!-- END RENDER CSS SECTION EXISTING IN PARTIAL -->
    <link href="../assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
   <link rel="shortcut icon" href="favicon.ico" />
</head>

<body>
    <div class="header">
        @Html.Partial("_Header")
    </div>

    <div class="container">
        <div class="sidebar">
            @Html.Partial("_Sidebar")
        </div>

        <div class="content">
                @RenderBody()
        </div>
    </div>

<!-- JAVASCRIPT FILES -->
     <script src="../assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>

<!-- RENDER JAVASCRIPT SECTION EXISTING IN PARTIAL -->
    @RenderSection("Scripts", required: false)
<!-- RENDER JAVASCRIPT SECTION EXISTING IN PARTIAL -->

    <script src="../assets/layouts/layout/scripts/layout.min.js" type="text/javascript"></script>

</body>

</html>

My Partial Views Structure:

@model IEnumerable<Backend.Models.Product>

@{
    ViewBag.Title = "Product";
}
@section Style {
SPECIFIC CSS URLS TO THE VIEW
}

HTML CODE

@section Scripts{
SPECIFIC JAVASCRIPT URLS TO THE VIEW
}

I'm doubting the additional {Id} in the URL is what messes the code because the following: with {Id} with {Id}

When Id is passed as querystring When Id is passed as querystring

How can I get around this issue?

Upvotes: 0

Views: 2200

Answers (2)

Shyju
Shyju

Reputation: 218892

The way you included the css files is not correct!

You should Use ~/ instead of ../. Razor will convert ~ to the root path of your app.

This should work.

<link href="~/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />

Assuming assets folder is in your app root.

With this your link's won't be broken irrespective of what page/url you are on.

You should do the same for including js files also.

Upvotes: 1

Joe
Joe

Reputation: 3761

Sounds like you are missing your shared layout. If you have something like this toward the top of the edit cshtml try taking it out.

@{
    Layout = null;
}

If that's not there, maybe you need to specify the layout, you can just replicate whatever is in your create cshtml, for example:

@{
    Layout = "~/Views/Shared/MyLayoutPage.cshtml";
}

Upvotes: 0

Related Questions