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

as what I know, partial view need to have the reference of all scripts even though you already reference it in master/layout page. What i always did is create a partial view (_Scripts.cshtml) and put all scripts + stylesheet reference in it. I will then call this partial view at every view:

 @Html.Partial("_Scripts")

Hope this is what you want, thanks :)