Javascript not working in Partial View

Question

This problem is similar to what is described in Execute Javascript inside a partial view in ASP.NET MVC

The below piece of code in index.cshtml is working fine...

---

<label for="locationOfSearch"> in :</label> @Html.TextBox("locationOfSearch")

<input type="submit" value="Search"  style="background-color:Green"/>

@section JavaScript {
    <script type="text/javascript">
        $(document).ready(function () {


            $("#locationOfSearch").autocomplete({
                source: '@Url.Action("AutocompleteAsyncLocations")'
            })



        });
    </script>
}

---

But when I copy and paste the above code and the respective script files to a another view and then in index.cshtml if I call Html.Partial(new view name), Autocomplete is not working...

Kindly let me know how I solve it without much modification...

Answer 1

You cannot use sections in partial views. They simply don't work. So you will have to keep the @section JavaScript in the view in order to register scripts and then render the partial which will contain only the markup. You could also write custom helper methods to achieve this as shown in this answer.

Answer 2

Partial views need to have a reference to all scripts, even though you've already referenced it in the master/layout page. Create a partial view (ex: _Scripts.cshtml) and put all of your scripts and stylesheet references in it. Then call this partial view in every view:

 @Html.Partial("_Scripts")