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>"; } |