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>
}