ASP.NET MVC 5 + Web API + jQuery BlockUI – TextBox + Popup Search Form with Web API Restful Search

ASP.NET MVC 5 + Web API + jQuery BlockUI – TextBox + Popup Search Form with Web API Restful Search
 
Embedded jQuery BlockUI JavaScript Library on the Page First.

   Web API Restful Controller
 
   using System;
   using System.Linq;
   using System.Net;
   using System.Net.Http;
   using System.Web.Http;
   using Newtonsoft.Json.Linq;
 
   public JArray Post(JObject para)
   {
      JArray ary = new JArray();
      JObject obj = null;
 
      foreach( … … )
      {
         obj = new JObject();
         obj.Add( "Item", … … );
 
         ary.Add( obj );
      }
 
      return ary;
   }
 
   HTML Page & BlockUI Layout
 
   … …
 
   < input id="selectedvalue" type="text" value="" readonly style="height:25px; border:1px solid #AAAAAA; padding:0px 10px 0px 10px;" />
   < input id="selectpopupboxbtn" type="button" value="Select" style="height:25px; margin-left:5px; border:1px solid #AAAAAA;" />
 
   … …
 
   < div id="selectpopupboxform" style="display:none;" >
 
      < div id="selectitemlist" style="margin:0px 0px 0px 0px;" >
      </ div>
 
      < div style="margin-top:5px; margin-bottom:5px;" >
         <input id="selectitemsearchtxtbox" type="text" value="" />
         <input id="selectitemsearchbtn" type="button" value="Search" />
      </ div >
 
   </ div >
 
   JavaScript
 
   $(document).ready(function () {
 
      $(document).on("click", ".selectitem", function (e) {
 
         $("#selectedvalue").val($(this).html());
         $.unblockUI();
 
         $("#selectitemsearchtxtbox").val("");
         $("#selectitemlist").html("");
 
      });
 
      $("#selectpopupboxbtn").click(function () {
 
         $.blockUI({ message: $('#selectpopupboxform') });
 
      });
 
      $("#selectitemsearchbtn").click(function () {
 
         para = new Object();
         para.SearchPara = $("#selectitemsearchtxtbox").val();
 
         $.ajax({
            url: "/api/Values",
            type: "POST",
            data: para,
            success: function (data) {
               $("#selectitemlist").html("");
 
               for (var i = 0; i < data.length; i++) {
                  $("#selectitemlist").append(SearchItemDiv(data[i].Item));
               }
            }
         });
 
      });
 
   });
 
   function SearchItemDiv(item)
   {
      return "< div class='selectitem' style='text-align:left; margin:6px 10px 3px 10px;'>" + item + "</div>";
   }