ASP .NET MVC wyszukiwarka

0

Tworze aplikacje webowa w ASP .NET MVC chce stworzyć wyszukiwarkę w górnym menu. Na początek w Shared tworzę Layout:

 
@Html.Partial("_TopMenu")
@RenderBody()
@Html.Partial("_BotomMenu")
@RenderSection("ScriptsBottom", required: false) 

a następnie w _TopMenu formularz:

 
<form id="search-form" method="get" data-ajax="true" data-ajax-target="#container">
                <input id="search-filter" type="search" name="searchQuery" data-autocomplete-source="@Url.Action("RecipesSuggestions", "Recipes")" placeholder="Wprowadź tekst, aby wyfiltrować..." />
                <input type="submit" value="" />
            </form>

i problem pojawia się z kodem jquery gdy wkleję go na końcu pliku jakiegoś dowolnego widoku tworzonego za pomocą RenderBody to wszystko działa ok ale nie chce tego kodu wklejać w każdym widoku jeśli natomiast wkleję go do PartialView TopMenu to wyszukiwarka nie działa wgl nie przesyła nic do kontrolera oto kod jquery:

@section ScriptsBottom {

    <script src="~/Scripts/jquery-2.1.4.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <link href="../../Content/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
    <script>
        $(function () {

            var ajaxSubmit = function () {

                var $form = $(this);

                var settings = {
                    data: $(this).serialize(),
                    url: $(this).attr("action"),
                    type: $(this).attr("method")
                };

                $.ajax(settings).done(function (result) {
                    var $targetElement = $($form.data("ajax-target"));
                    var $newContent = $(result);
                    $($targetElement).replaceWith($newContent);
                });

                return false;
            };


            var setupAutoComplete = function () {
                var $input = $(this);

                var options = {
                    source: $input.attr("data-autocomplete-source"),
                    select: function (event, ui) {
                        $input = $(this);
                        $input.val(ui.item.label);
                        var $form = $input.parents("form:first");
                        $form.submit();
                    }
                };

                $input.autocomplete(options);
            };

            $("#search-form").submit(ajaxSubmit);
            $("#search-filter").each(setupAutoComplete);

        });

    </script>
}
 
0

A te funkcje JS się wywołują?
Ścieżki do skryptów prawidłowe?
Jakieś błędy w konsoli przeglądarki masz?

0

Jak umieszczam @section ScriptsBottom w widoku ładowanym przez renderbody w Layoucie to wszystko jest w porządku a jak umieszczam ten kod jquery w PartialView to wtedy nie działa.
Jak umieszczam skrypty jquery w widoku to działa więc ścieżki powinny być prawidłowe.
Błędów żadnych nie ma w przeglądarce.

0

No, a po umieszczeniu w partial view ten kod się renderuje w źródle strony? Debugowałeś go?
"nie działa" to dość mało precyzyjne stwierdzenie...

1 użytkowników online, w tym zalogowanych: 0, gości: 1