ASP.NET Web API + JavaScript HttpRequest + JSON.NET + DashBoard ( Table Field Filtering & Sorting )

ASP.NET Web API + JavaScript HttpRequest + JSON.NET + DashBoard ( Table Field Filtering & Sorting )

   Enable Entity Framework.
   Enable JSON.NET.
   Enable System.Linq.Dynamic from NuGet.

   The Result is as similar as jQuery DataTables with Better Performance.
   Reason : The Sorting Process & Filtering Process is from Restful & Database
   instead of JavaScript Iteration on JavaScript Array.
   The Web Response Performance on Filtering or on Sorting is unacceptable when there is
   more 1000 Rows or Records on the HTML Table.

   The Sample is not a Best Practice for the coding on Entity Framework LINQ.
   It is recommend to use Single LINQ to filter or to sort Data Collection with Better Performance.

Web API

   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Net;
   using System.Net.Http;
   using System.Web.Http;
   using Newtonsoft.Json.Linq;
   using System.Linq.Dynamic;
   using InventoryDAO;

   namespace InventoryDashBoard.Controllers
   {
      public class InventoryController : ApiController
      {
         private InventoryEntities entities;

         public InventoryController()
         {
            this.entities = new InventoryEntities();
         }

         public JArray Post(JObject para)
         {
            var list = (from item in this.entities.Inventories select new {
               Model = item.Model, Equipment = item.Equipment, System = item.System, Status = item.Status
            }).ToList();

            JToken Filter = (para != null && para["Filter"] != null) ? para["Filter"] : null;
            JToken Sort = (para != null && para["Sort"] != null) ? para["Sort"] : null;

            string Order = "";

            if(Filter != null)
            {
               if (Filter["System"] != null)
               {
                  list = (from item in list where item.System == Filter["System"].ToString() select new {
                     Model = item.Model, Equipment = item.Equipment, System = item.System, Status = item.Status
                  }).ToList();
               }

               if (Filter["Equipment"] != null)
               {
                  list = (from item in list where item.Equipment == Filter["Equipment"].ToString() select new {
                     Model = item.Model, Equipment = item.Equipment, System = item.System, Status = item.Status
                  }).ToList();
               }

               if (Filter["Status"] != null)
               {
                  list = (from item in list where item.Status == Filter["Status"].ToString() select new {
                     Model = item.Model, Equipment = item.Equipment, System = item.System, Status = item.Status
                  }).ToList();
               }
            }

            if (Sort != null && Sort.Count() > 0)
            {
               foreach (var item in Sort)
               {
                  if (item["Item"].ToString().Equals("Status"))
                  {
                     if (item["ASC"].ToString().Equals("ASC")) Order += "Status ASC, ";
                     else Order += "Status DESC, ";
                  }
                  else if (item["Item"].ToString().Equals("Model"))
                  {
                     if (item["ASC"].ToString().Equals("ASC")) Order += "Model ASC, ";
                     else Order += "Model DESC, ";
                  }
               }

               list = list.OrderBy(Order.Substring(0, (Order.Length – 2))).ToList();
            }

            return JArray.FromObject(list);
         }
      }
   }

Java Script

   < script type="text/javascript" >

      var Sort = [];
      //SortObject("Model", "ASC");
      //SortObject("Status", "ASC");

      $(document).ready(function () {

         $("#InventoryTbl").html(TblHeader());

         /* Sample */
         SearchResultAJAX(FilterObject("Others", null, "In Service"), Sort);

         $("#DivBtn").click(function () {

            $("#InventoryTbl").html(TblHeader());

            /* Sample */
            SearchResultAJAX(FilterObject("Server", null, "In Service"), Sort);

         });

      });

      function FilterObject(System, Equipment, Status) {

         var Filter = new Object;

         if (System != null) Filter.System = System;
         if (Equipment != null) Filter.Equipment = Equipment;
         if (Status != null) Filter.Status = Status;

         return Filter;

      }

      function SortObject(SortItem, SortASC) {

         var SortObj = new Object;

         SortObj.Item = SortItem;
         SortObj.ASC = SortASC;

         Sort.push(SortObj);

      }

      function SearchResultAJAX(Filter, Sort) {

         var searchresult = "";

         $.ajax({

            url: "/rest/Inventory",
            data: {
               "Filter" : Filter,
               "Sort" : Sort
            },
            type: "POST",
            success: function (data)
            {
               for (var key in data)
               {
                  searchresult += SearchResult(data[key]["System"], data[key]["Equipment"], data[key]["Model"], data[key]["Status"]);
               }

               $("#InventoryTbl").append(searchresult);
            }

         });

      }

      function TblHeader() {

         var TblHederContent = "";

         TblHederContent += "<tr>";
         TblHederContent += "<th align='center'>System</th>";
         TblHederContent += "<th align='center'>Equipment</th>";
         TblHederContent += "<th align='center'>Model</th>";
         TblHederContent += "<th align='center'>Status</th>";
         TblHederContent += "</tr>";

         return TblHederContent;

      }

      function SearchResult(System, Equipment, Model, Status) {

         var TblHederContent = "";

         TblHederContent += "<tr>";
         TblHederContent += "<td align='left'>" + System + "</td>";
         TblHederContent += "<td align='left'>" + Equipment + "</td>";
         TblHederContent += "<td align='left'>" + Model + "</td>";
         TblHederContent += "<td align='left'>" + Status + "</td>";
         TblHederContent += "</tr>";

         return TblHederContent;

      }

   < /script >

View ( Draft )

馬仔驚自己唔記得要留既notes

一個 Programmer / System Engineer 既資訊網站。

ASP.NET Web API + JavaScript HttpRequest + JSON.NET + DashBoard ( Table Field Filtering & Sorting )

分享此文：

相關