This article will show you how you can perform ajax searc
and display the search detail in webgrid in asp.net mvc using c#. In this
search will take place without any refresh of page. This article you can use in
MVC2,MVC3,MVC4,MVC5.
Some of my previous articles are as follows: Search
and Display Data In MVC WebGrid in Asp.Net MVC Using C#.Net, Comment
System OR Form and Display In GridView Using C# In Asp.Net, Hyperlink
Adding In MVC WebGrid in Asp.Net MVC Using C#.Net.
So for this article first I have created an asp.mvc application and add a model class. Now add the below code in it.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace MvcApplication1.Models
{
public class ProductDetailModel
{
public
List<Product>
ProductList { get; set;
}
}
public class Product
{
public
int ID { get;
set; }
public
string ProductName { get;
set; }
public
string ProductDetail { get; set; }
public
int CurrentStock { get;
set; }
}
}
|
After creating model we will create an entity file.
After this add a controller class file and add the below
code.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcApplication1.Models;
using System.Web.UI.WebControls;
using System.IO;
using System.Web.UI;
namespace MvcApplication1.Controllers
{
public class HomeController
: Controller
{
//
// GET:
/Home/
[HttpGet]
public
ActionResult Index()
{
ProductDetailModel
objproductdetailmodel = new ProductDetailModel();
objproductdetailmodel.ProductList
= ProductData("");
return
View(objproductdetailmodel);
}
[HttpPost]
public
string SearchResult(string
SearchKey)
{
ProductDetailModel
objproductdetailmodel = new ProductDetailModel();
objproductdetailmodel.ProductList
= ProductData(SearchKey);
string
strTable = "";
strTable = strTable + "< table>< thead>< tr>< th>ID</
th >< th >Product Name</ th >";
strTable = strTable + "< th >Product
Detail</ th >< th >Current Stock< / th></ tr></ thead><
tbody>";
foreach
(var item in
objproductdetailmodel.ProductList)
{
strTable = strTable + "< tr >";
strTable = strTable + "< td >" + item.ID + "</ td >";
strTable = strTable + "< td >" + item.ProductName + "</ td >";
strTable = strTable + "< td >" + item.ProductDetail + "</ td >";
strTable = strTable + "< td>" + item.CurrentStock + "</ td >";
strTable = strTable + "</ tr >";
}
strTable = strTable + "</ tbody ></ table >";
return
strTable;
}
///
/// This finction is used for providing the data.
/// we will bind this data
/// to diaply in grid format.
/// You can get data from data base and
/// thee put into collection
/// ///
public List<Product> ProductData(string SearchKey)
{
List<Product> objProduct = new List<Product>();
DemoEntities objDemoEntities = new DemoEntities();
var productItem = from data in objDemoEntities.ProductMasters
where SearchKey == "" ? true : data.ProductDetail.Contains(SearchKey)
select data;
foreach (var item in productItem)
{
objProduct.Add(new Product
{
ID = item.Id,
ProductName = item.ProductName,
ProductDetail = item.ProductDetail,
CurrentStock = (int)item.CurrentStock
});
}
return objProduct;
}
}
}
|
In above code I have created a function with return type
string and added httppost attribute. This function will get called by jquery
ajax function.
Now create the view and add the below code.
@model MvcApplication1.Models.ProductDetailModel
@{
ViewBag.Title = "jQuery
Ajax Search and Display In MVC WebGrid in Asp.Net MVC Using C#.Net";
}
<script src="../../js/jquery-1.4.1.min.js" type="text/javascript"></script>
<style>
table, td, th
{
border:
1px solid green;
border-collapse:
collapse;
}
th
{
border:
1px solid black;
background-color:
green;
color:
white;
}
</style>
<script language="javascript">
function
AjaxSearch() {
var
searchUrl = "Home/SearchResult/?SearchKey="
+ $("#SearchKey").attr('value');
$("#btnSearch").attr({
'value': 'Please
wait..' });
$.ajax({
url: searchUrl,
type: "POST",
success: function
(data) {
$("#divData").html(data);
$("#btnSearch").attr({
'value': 'Search'
});
}
});
}
</script>
@using (@Html.BeginForm("Index", "Home"))
{
<table width="97%" border="0">
<tr>
<td align="right">
Search: @Html.TextBox("SearchKey", "",
new { })
</td>
<td align="left">
<input type="button" value="Search" onclick="javascript:AjaxSearch();" id="btnSearch"/>
</td>
</tr>
</table>
<div id="msgwait"></div>
<div id="divData">
@{
var grid = new WebGrid(Model.ProductList, canSort: false);
@grid.GetHtml(columns:
grid.Columns
(
grid.Column("ID", "ID"),
grid.Column("ProductName", "Product Name"),
grid.Column("ProductDetail", "Product Detail"),
grid.Column("CurrentStock", "Current Stock")
), mode: WebGridPagerModes.Numeric)
}
</div>
}
|
Now we have done run the application to check the output.
DOWNLOAD
About the Author
Hi How Are you? I have a problem with .html (data) I get the following error: Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
ReplyDeletecontroler on my return a JSON return Json (vl_menues, JsonRequestBehavior.AllowGet);
anyone can help me with this? Thank you
Hello! Thanks for the useful tutorial. I've edited the Ajax section a little. I think, it was not included in the above tutorial. So here it is:
ReplyDeletefunction AjaxSearch() {
var searchUrl = "Home/SearchResult/?SearchKey=" + $("#SearchKey").attr('value');
$("#btnSearch").attr({ 'value': 'Please wait..' });
$.ajax({
url: searchUrl,
type: "POST",
data: { SearchKey: $('#SearchKey').val() }, //It was missing and the TextBox value got empty
success: function (data) {
$("#divData").html(data);
$("#btnSearch").attr({ 'value': 'Search' });
}
});
}
Hi Thanks for you valuable feedback. But one thing i want to highlight.
Deletevar searchUrl = "Home/SearchResult/?SearchKey=" + $("#SearchKey").attr('value');
in above line we are passing the parameter value in url.
Now check the below line which you have mentioned.
data: { SearchKey: $('#SearchKey').val() },
In above line and the line mention by you are same because in below line we are passing the parameter value and in able line also ewe are passing the search the parameter value.
So if we are passing value as url parameter we dont need to pass in as data parameter.
Both way we can pass.