Today, I will tell you about how to search records in MVC with Ajax and jQuery. This code will filter out all matching records group by table column name.
First thing that you should do is create an empty ASP.NET MVC project. Now, add two class to your model. Employee and DemoContext and write the following code:
namespace SearchingDemo.Models
{
public class Employee
{
[Key]
public int Id { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string Position { get; set; }
}
}
namespace SearchingDemo.Models
{
public class DemoContext : DbContext
{
public DbSet<Employee> Employees { get; set; }
}
}
Add a Home Controller. Now, Add index Action to controller. and create corresponding view.
public ActionResult Index()
{
return View();
}
Now, write the following code to Index View.
<link href="~/Content/Style.css" rel="stylesheet" />
<script src="~/Content/jquery-2.1.1.min.js"></script>
<script src="~/Content/CustomJs.js"></script>
<h2>Seaching Demo</h2>
<div class="divFind">
<table>
<tr>
<td>
<input type="text" id="txtSearch" />
</td>
<td>
<input type="button" id="btnSearch" value="Seach" />
</td>
</tr>
</table>
</div>
<div id="divList">
</div>
Write the .JS code for click event on seach button to get filtered result. add following .JS code.
$(document).ready(function () {
$('#btnSearch').on('click', function () {
var getkey = $('#txtSearch').val();
$.ajax({
type: 'POST',
contentType: 'application/json; charset=utf-8',
url: 'Home/Search',
data: "{ 'searchKey':' " + getkey + "' }",
success: function (data) {
BindData(data);
},
error: function (data) {
alert('Error in getting result');
}
});
});
});
function BindData(data) {
var ulList = '<ul>';
var resultType = ["FirstName", "LastName", "Position"];
$.each(data, function (i, d) {
ulList += '<li class="SeachType">' + resultType[i] + '</li>';
if (d.length > 0) {
$.each(d, function (key, value) {
ulList += '<li>' + value.FirstName + ' - ' + value.LastName + ' - ' + value.Position + '</li>'
});
} else {
ulList += '<li><span class="red">No Results</span></li>';
}
});
ulList += '</ul>'
$('#divList').html(ulList);
}
Javascript code calling search function, which is written in controller. Add search function to your controller.
public JsonResult Search(string searchKey)
{
DemoContext dbObj = new DemoContext();
var getKey = searchKey.Trim();
var getFirstName = dbObj.Employees.Where(n => n.FirstName.Contains(getKey)).ToList();
var getLastName = dbObj.Employees.Where(n => n.LastName.Contains(getKey)).ToList();
var getPostion = dbObj.Employees.Where(n => n.Position.Contains(getKey)).ToList();
IList<IList<Employee>> getTotal = new List<IList<Employee>>();
getTotal.Add(getFirstName);
getTotal.Add(getLastName);
getTotal.Add(getPostion);
int count = getTotal.Count();
return Json(getTotal);
}
HostForLIFE.eu ASP.NET MVC 6 Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.
