@model albaraka.Models.SearchVM
ViewBag.Title = "Product_Search2";
Layout = "~/Views/Shared/_Layout.cshtml";
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="col-md-6 col-md-offset-3">
@using (Html.BeginForm())
@Html.LabelFor(m => m.Type)
@Html.DropDownListFor(m => m.Type, Model.TypeList, "", new { @class = "form-control" })
@Html.LabelFor(m => m.Category)
@Html.DropDownListFor(m => m.Category, Model.CategoryList, "", new { @class = "form-control" })
@Html.LabelFor(m => m.Country)
@Html.DropDownListFor(m => m.Country, Model.CountryList, "", new { @class = "form-control" })
@Html.LabelFor(m => m.Subsidary)
@Html.DropDownListFor(m => m.Subsidary, Model.SubsidaryList, "", new { @class = "form-control" })
<button id="search" type="button" class="btn btn-success submit">Search</button>
<tr><th>ID</th><th>Product name</th><th>Category</th><th>Action</th></tr>
<tbody id="table"></tbody>
<table id="template" style="display: none;">
<tr><td></td><td></td><td></td><td><a>Edit</a></td></tr>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script>
<script type="text/javascript">
var url = '@Url.Action("FetchProducts")';
var editUrl = '@Url.Action("Edit")';
var template = $('#template');
$('#search').click(function() {
$.getJSON(url, { type: type.val(), category: category.val(), country: country.val(), subsidary: subsidary.val() }, function (data) {
$.each(data, function(index, item) {
var clone = template.clone();
var cells = clone.find('td');
cells.eq(0).text(item.ID);
cells.eq(1).text(item.Name);
cells.eq(2).text(item.Category);
var href = '@Url.Action("Edit")' + '/' + item.ID;
cells.eq(3).children('a').attr('href', href);
table.append(clone.find('tr'));