TutorialMeta
Ad

JavaScript In MVC 5 Not Being Read?

- 1 answer

I'm still learning MVC and I wanted to find a way to set focus on a textbox when a view loads. I found a suggestion to add the following to the _Layout.cshtml page so it would set focus to the first textbox on each page. However, it doesn't seem to be working.

I'm thinking it has to do with the fact that I have the default @Scripts.Render("~/bundles/modernizr") set and so it ignores any JS code set directly in the page.

This is the first thing I tried in the _Layout page:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

    <script type="text/javascript">
    $(function () {       
        // Set the focus to the first textbox on every form in the app
        $("input[type=text]").first().focus();
    });
    </script>

</head>

Then I tried creating a file called Scripts/app.js and added that to the bottom of the Bundle.Congif.cs file. That didn't work either.

public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js"));

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

            bundles.Add(new ScriptBundle("~/bundles/appScript").Include(
                        "~/Scripts/app.js*"));
        }

app.js (no <script> at the top of the file)

$(function () {
    // Set the focus to the first textbox on every form in the app
    $("input[type=text]").first().focus();
});

Any suggestions?

UPDATE with fix

Just for clarity this is how I got it to work from @Shyju suggestions. I left the addition of my Scripts/app.js in the BundleConfig.cs like I have above. Then in the Layout.cshtml page where I already had bundle references I just add the render to my added bundle which I called appScipt.

This is in my Layout.cshtml file:

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

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

Answer

You need to include this new bundle in the specific page/view where you want to have the focus on the textbox.

@section Scripts
{
    @Scripts.Render("~/bundles/appScript")
}

Or you can directly refer the file instead of using the bundle (if you do not wish to take the advantages of bundling).

@section Scripts
{
   <script src="~/Scripts/app.js"></script>
}

And make sure you have RenderSection in your Layout so that it will include the page specific script when razor render the page ( with layout)

<head>
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr") 
</head>
<body>
     <div id="pageContent">
        @RenderBody()
     </div>
     @Scripts.Render("~/bundles/jquery")
     @RenderSection("scripts", required: false)
</body>
Ad
source: stackoverflow.com
← Previous Post
Next Post →

Related Questions

Ad