这是我的控制器代码在objProduct中数据格式正确并在网格中显示数据,问题是当我尝试过滤我的数据时,结果的格式不正确。显示是这样的。
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;
}
}
}
这是视图
@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>
}