ASP.NET MVC Поиск с выпадающим списком в макете страницы

Question

Я застрял в очень распространенной проблеме, в моем приложении я хочу поместить поиск-navbar, который будет доступен на каждой странице. Я имею в виду поиск с запросом для записи и выпадающего списка с категорией элемента для поиска.

Потому что я хочу, чтобы иметь-доступ на каждой странице, я реализовал его в макет страницы, как показано ниже:

 <div class="col-xs-10 search-field"> 
        @Html.Editor(" ", new {htmlAttributes = new {@class = "search-input", @id = "searchQuery", @placeholder = ResourcesPolish.Search_WhatAreYouLookingFor}}) 
       </div> 
       <div class="col-xs-4 category-field"> 
        @Html.DropDownList(" ", 
        new SelectList(new[] 
         { 
          new SelectListItem {Value = "1", Text = "Elektronika"}, 
          new SelectListItem {Value = "2", Text = "Moda i uroda"}, 
          new SelectListItem {Value = "3", Text = "Dom i zdrowie"}, 
          new SelectListItem {Value = "4", Text = "Dziecko"}, 
          new SelectListItem {Value = "5", Text = "Kultura i rozrywka"}, 
          new SelectListItem {Value = "6", Text = "Elektronika"}, 
          new SelectListItem {Value = "7", Text = "Sport i wypoczynek"}, 
          new SelectListItem {Value = "8", Text = "Motoryzacja"}, 
          new SelectListItem { Value = "9", Text = "Kolekcje i sztuka"}, 
          new SelectListItem {Value = "10", Text = "Firma"}, 
          new SelectListItem {Value = "11", Text = "Inne"}, 
         }, "Value", "Text"), "wszystkie działy", new { @class = "category-input", @id = "category" }) 
       </div> 
<div class="col-xs-1 search-button" onclick="search()">         
       </div> 

Тогда у меня есть JavaScript, который принимает значение, что выбрано:

function search() { 

    var categoryId = $('#category').val(); 
    var query = $('#searchQuery').val(); 
    if (query) { 
     window.location.href = '@Url.Action("SearchItem","Item")?query=' + query + '&categoryId=' + categoryId; 
    } 
} 

Работа прекрасна, но все категории hardcode'd и, возможно, лучшее решение - читать их с Db, потому что администратор может изменить часть из них? Но у меня нет никакого способа сделать это через страницу макета (я имею в виду передать их через модель), поэтому я не знаю, есть ли лучшее решение для таких вещей? Это та же ситуация, что и на ebay.com, всегда в верхней части страницы должна быть область поиска с раскрывающимся списком категорий. Любые идеи?

Answer 1

Одним из решений является создание контроллера для NavBars, как это:

public class NavbarController : Controller 
{ 

    public ActionResult Categories() 
    { 
     // you might want to return this from database, of course 
     var model = new SelectList(new[] 
        { 
         new SelectListItem {Value = "1", Text = "Elektronika"}, 
         new SelectListItem {Value = "2", Text = "Moda i uroda"}, 
         new SelectListItem {Value = "3", Text = "Dom i zdrowie"}, 
         new SelectListItem {Value = "4", Text = "Dziecko"}, 
         new SelectListItem {Value = "5", Text = "Kultura i rozrywka"}, 
         new SelectListItem {Value = "6", Text = "Elektronika"}, 
         new SelectListItem {Value = "7", Text = "Sport i wypoczynek"}, 
         new SelectListItem {Value = "8", Text = "Motoryzacja"}, 
         new SelectListItem { Value = "9", Text = "Kolekcje i sztuka"}, 
         new SelectListItem {Value = "10", Text = "Firma"}, 
         new SelectListItem {Value = "11", Text = "Inne"}, 
        }, "Value", "Text"); 
     return View(model); 
    } 
} 

Тогда отдельный вид называется Categories.cshtml внутри папки Navbar, которая будет выглядеть следующим образом:

@model SelectList 

@{ 
    Layout = null; 
} 

<div class="col-xs-10 search-field"> 
    @Html.Editor(" ", new {htmlAttributes = new {@class = "search-input", @id = "searchQuery", @placeholder = ResourcesPolish.Search_WhatAreYouLookingFor}}) 
</div> 
<div class="col-xs-4 category-field"> 
    @Html.DropDownList(" ", Model, "wszystkie działy", new { @class = "category-input", @id = "category" }) 
</div> 
<div class="col-xs-1 search-button" onclick="search()">         
</div> 

В ваш макет, вы заменяете все это html на это:

@Html.Action("Categories", "Navbar"); 

На самом деле, я бы не использовал модель SelectList в качестве модели, это просто показать, как она может работать. Возможно, вы захотите создать CategoriesViewModel с SelectList или IEnumerable<CategoryViewModel> и создать SelectList с вашего сайта, используя вашу модель.

Answer 2

Я не уверен, что это правильный путь, но вы можете изменить _Layout.cshtml так:

@using D.Models//namespace where your database described 

    @{ db a = new db(); 
     SelectList list = new SelectList(a.Table/*table what you need*/, "value", "name"); 
    } 

, а затем:

<div class="col-xs-4 category-field"> 
        @Html.DropDownList(" ",list, "wszystkie działy", new { @class = "category-input", @id = "category" }) 
       </div>