How to add javascript from partial view to layout.cshtml page

Question

I am trying to add javascript from partial view to layout.cshtml head section by calling @RenderSection("scripts", required: false) but failing. Please view my partialview page code.

@{
    Layout = null;
}

<div id="modal-login" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-dialog-buttons ui-draggable ui-resizable" title="Insert Student">
    @using (Html.BeginForm("Login", "Home", FormMethod.Post, new { id = "form-login" }))
    {
        <div style="width:320px; height:320px; padding:0px 15px 15px 15px;  border:solid 1px silver">

            <div style="width:310px; height:30px; padding-bottom:0px; border:solid 0px red">
                <div style="width:320px; height:30px; float:left;">
                    <div id="loading" style="height:15px; width:120px">
                    </div>
                </div>
            </div>

            <div style="width:310px; height:30px; padding-bottom:35px; border:solid 0px red">
                <div style="width:320px; height:30px; float:left;">
                    <input type="text" class="textbox" id="tbEmailAddress" name="tbFirstName" size="50" placeholder="First Name" />
                </div>
            </div>

            <div style="width:310px; height:30px; padding-bottom:35px; border:solid 0px red">
                <div style="width:320px; height:30px; float:left;">
                    <input type="text" class="textbox" id="tbPassword" typeof="password" name="tbFirstName" size="50" placeholder="First Name" />
                </div>
            </div>

            <div style="width:320px; height:20px; padding-top:5px; padding-bottom:15px; border:solid 0px red; font-size:9px;">
                <div style="width:310px; height:30px; float:left;">
                    <input id="btnLogin" class="submit ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="submit" value="Submit" style="border:1px solid gray; width:80px; height:25px ">
                </div>
                <div style="width:140px; height:30px; float:left;">

                </div>

            </div>

        </div>
    }
</div>

@section scripts
{

<script type="text/javascript">



        $(document).ready(function () {

            $("#modal-login").dialog({
                show: "slide",
                modal: true,
                autoOpen: false,
              });


            $("#btnLogin").click(function () {
                $("#modal-login").dialog("open");
                return false;
            });
        });

    </script>

}

And below is layout.chtml head section where iam calling @RenderSection("scripts", required: false) in the second last line of code.

 <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>@ViewBag.Title - My ASP.NET Application</title>
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/jquery")
        @*@Scripts.Render("~/bundles/jqueryui")*@


        <link href="~/Content/themes/base/jquery-ui-1.10.4.custom.css" rel="stylesheet" />
        @*<script src="~/Scripts/jquery-1.10.2.js"></script>*@
        <script src="~/Scripts/jquery-ui-1.10.4.custom.js"></script>

        @RenderSection("scripts", required: false)
</head>

Please view my code and suggest if i missed anything? thanks.

Sections don't work in partial views by design. Duplicate of [Injecting content into specific sections from a partial view ASP.NET MVC 3 with Razor View Engine](http://stackoverflow.com/q/7556400/1199711) — Zabavsky, Nov 03 '14 at 13:55
`but failing` - describe what failing means in this context. Is the script not working, not being rendered, is there an exception? — Joel Etherton, Nov 03 '14 at 13:55
Failing mean! my attempt to add java script code into head section of layout.cshtml from partial view. — user3004110, Nov 03 '14 at 14:05
But i need a solution for this, because i don't want to write hundred of JavaScript lines in layout page. Reason of writing code in layout page is because this JavaScript code is only relevant to this partial page so i don't want to split my code in multiple places to confuse myself. Please suggest, thanks. — user3004110, Nov 03 '14 at 14:18

score 0 · Answer 1 · answered Nov 03 '14 at 14:19

the order @section scripts don't work in partialView, erase that and your script work.

but why you try to put the script in the head??

You call JQuery in the head the Script in the partial view works isn't necesary up in the head.

But if I understand your code you make a login form in a partial View for insert in the layout for use in entire web site?

well is more easy if you write the script directly in the head in layout, but better is create a script file with all custom script, mix this with the others scripts in one bundle and finally call this bundle in the head, with this way your site will more faster.

How to add javascript from partial view to layout.cshtml page

1 Answers1