ASP.NET MVC Search with dropdownlist in layout page - asp.net-mvc

Question

I am stuck with very common problem, in my application I want to put search-navbar which will be available in every page.
I mean search with query to write and dropdownlist with category of item to search.
Because I want to have acces in every page, I implemented it in Layout page like below:
<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>
Then, I have javascript which take value, that is selected:
function search() {
var categoryId = $('#category').val();
var query = $('#searchQuery').val();
if (query) {
window.location.href = '#Url.Action("SearchItem","Item")?query=' + query + '&categoryId=' + categoryId;
}
}
It work's fine, but all categories are hardcode'd, and maybe better solution is to read them from Db, because admin may change part of them? But I haven't got any way to do this via Layout page (I mean to pass them via model), so I don't know, is there any better solution for stuffs like that?
This is the same situation like at ebay.com, always at the top of the page there should be search-area with dropdown for categories.
Any ideas?

Answer 1

One solution is to create a controller for your navbars, like this:
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);
}
}
Then a separate view called Categories.cshtml inside a Navbar folder, which would look like this:
#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>
In your layout, you replace all that html with this:
#Html.Action("Categories", "Navbar");
Actually, I wouldn't use a SelectList as a model, it's just to show how it could work. You might want to create a CategoriesViewModel holding the SelectList, or an IEnumerable<CategoryViewModel> and create the SelectList inside your view, by using your model.

Answer 2

I'm not sure that it's right way, but also you can change your _Layout.cshtml like that:
#using D.Models//namespace where your database described
#{ db a = new db();
SelectList list = new SelectList(a.Table/*table what you need*/, "value", "name");
}
and then:
<div class="col-xs-4 category-field">
#Html.DropDownList(" ",list, "wszystkie działy", new { #class = "category-input", #id = "category" })
</div>