无法以适当的格式显示过滤的数据

时间:2016-03-14 12:12:53

标签: c# jquery angularjs model-view-controller

这是我的控制器代码在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>
}

这是我得到的结果 enter image description here

0 个答案:

没有答案