在Asp.net中通过WebService显示，排序和分页JSON数据 [英] Display, Sorting and Pagination for JSON Data via WebService in Asp.net
问题描述
专家和每一个我邀请你来讨论这个问题，并展示一些你的经验和技术..我几天来一直在互联网上搜索
1. 如何创建从服务器检索JSON数据的Web服务（因为我不希望在搜索任何网站中的内容时特别回复任何帖子）
2。然后检索JSON数据之后如何在没有任何服务器端控件的情况下显示/显示数据到页面（如Listview / Gridview或没有任何服务器端控件）
3。然后在页面上显示JSON数据后，页面上应该有分页限制，没有任何插件..（每页10条记录）
4。 sorthing也是好的在任何应用程序或网站中的要求......（所以它也必须是可用的）
以上是我们应该专门为摆脱负载而实现的以下4点时间并减少任何应用程序或网站的延迟，但pe我试图在asp.net中这样做..
到目前为止我已经取得了前两点如何通过Webservice检索JSON数据并在页面上显示。但是还没有达到第3和第4分。为了获得代码和技术，并实现最后2分我分享我做的事情
1.创建一个asp.net中的Web服务，通过Stroed Procedure从SQL Server中检索数据，然后在创建Web服务之前将此数据转换为JSON
创建将保存stroed程序的参数值
Hi expert and every one i invite you to plz discuss this question and shows some your experience and technic.. i have been searching over internet from couple of days that
1. How to Create a Webservice that retrieve the JSON Data from Server (because i dont want any post back specially while searching the content in any website)
2. then after retrieving JSON Data how to display/show that Data into a Page without any server-side control (like Listview/ Gridview or wihtout any server side control)
3. then after showing JSON Data on page there should be pagination limite on the page without any plugin.. (for exmaple 10 records in per page)
4. sorthing is also the good requirement in any appliaction or website... (so it must be available also)
above are the following 4 Points which we should achieve specially to get rid of the load time and reduce the delay in any application or website but personaly i am trying to do this in asp.net..
till now i have achieved first two points that how to retreive JSON Data via Webservice and Display it on page. but dont acheive the 3rd and 4th points yet. for the purpose of imporiving a code and techinc and for achieving the last 2 points i am sharing what i did
1. Create a Webservice in asp.net which retrive the data from SQL Server by Stroed Procedure and then convert this Data into JSON
before creating a webservice first create the class which will hold the parameters values of stroed procedure
Public Class SearchParameters
Public Property CHASSIS_NO() As String
Get
Return m_CHASSIS_NO
End Get
Set(ByVal value As String)
m_CHASSIS_NO = value
End Set
End Property
Private m_CHASSIS_NO As String
Public Property MODEL() As String
Get
Return m_MODEL
End Get
Set(ByVal value As String)
m_MODEL = value
End Set
End Property
Private m_MODEL As String
Public Property color() As String
Get
Return m_color
End Get
Set(ByVal value As String)
m_color = value
End Set
End Property
Private m_color As String
i刚刚在SearchParameters类中创建了Chassis_no，Model和color属性，如果您愿意，您将完成测试。它将在JSON数据中提供键值对。
然后创建Web服务
i just created Chassis_no, Model and color property in SearchParameters Class here, you will complete it for testing if you wish. it will Provide the key value pair in JSON Data.
Then Create the Webservice
<WebMethod()> _
'Tell to your Class that it`s type is an Array by using SearchParameters
'Class because SeachParameters Class Basically is an array
Public Shared Function Select_Search() As SearchParameters()
'Convert your Array (SeachParameters) in List
Dim JSON As New List(Of SearchParameters)()
'Create a Datable Instance
Dim dtst As New DataTable()
'Create a Inastance of your TableAdapter
Dim List As New dsStockTableAdapters.newSTOCK_LISTTableAdapter()
'Assign Your Stroed Procedure to DataTable
dtst = List.GetData("0", "0", "0", "0", "0", "0", "", "", "", "Any", "", "", "", "", "", 0, "", "", 0, "")
Try
'Loop thorugh in each row in your DataTable and assign the column values to the properties of SearchParameters Class
For Each rdr As DataRow In dtst.Rows
Dim SRCH As New SearchParameters()
SRCH.CHASSIS_NO = rdr("CHASSIS_NO").ToString()
SRCH.MODEL = rdr("MODEL").ToString()
SRCH.color = rdr("color").ToString()
SRCH.TRANSMISSION = rdr("TRANSMISSION").ToString()
SRCH.DOOR = rdr("DOOR").ToString()
SRCH.MAKE = rdr("MAKE").ToString()
SRCH.Image1 = rdr("Image1").ToString()
SRCH.MODEL_DESCRIPTION = rdr("MODEL_DESCRIPTION").ToString()
JSON.Add(SRCH)
Next
Catch
Finally
End Try
Return JSON.ToArray() ' Return JSON Data Back
End Function
你已经注意到我在stroed程序中传递了静态参数值，但现在还可以。
实际上我将在以后的存储过程参数中传递下拉选择值...
要看到您的JSON数据在浏览器中正在为此而退回，您需要创建一个脚本
按钮点击创建一个功能
you have noticed i have passing static parameters values in stroed procedure but it`s ok for now
actually i will pass the dropdown selected value in stored procedure parameters later...
TO SEE THAT YOUR JSON DATA IS RETREVING ACURATLY IN BROWER FOR THIS YOU HAVE TO CREATE A SCRIPT
Create a function on button click
<script<pre lang="xml">type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
function HandleIT() {
$.ajax({
type: "POST",
url: "Default.aspx/Select_Search",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
console.log(data);
}
});
}
</script>
<asp:Button ID="Button2" runat="server" Text="Button" OnClientClick="HandleIT(); return false;"/>
在Chrome上打开您的页面当您右键单击页面并单击Inspect Element>然后转到Console选项卡时，您必须在控制台窗口中看到JSON数据，这意味着您有成功地重复JSON数据
如何在没有任何服务器端面板的情况下显示JSON数据
Open your page on Chrome Now when you right click on page and click on Inspect Element > then go to Console Tab you must see the JSON Data in Console Window that`s means you have succussfully Retrived JSON Data
HOW TO DISPLAY JSON DATA WITHOUT ANY SERVER SIDE CONTORL
<script type="text/javascript">
function HandleIT() {
$.ajax({
type: "POST",
url: "stocklist.aspx/Select_Search",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
console.log(data);
for (var i = 0; i < data.d.length; i++) {
var output = '<ul class="searchresult">';
output += '<li>';
output += '<table><tr>';
output += '<td><img src="http://localhost:37245/NewPeaceAuto - Steer_Well/WebStock_Images/' + data.d[i].Image1 + '" alt=""/></td>';
output += '<td>CHASSIS NO:</td><td>'+ data.d[i].CHASSIS_NO +'</td>';
output += '<td>MODEL:</td><td>'+ data.d[i].MODEL +'</td>';
output += '<td>COLOR:</td><td>'+ data.d[i].color +'</td>';
output += '<td>TRANS:</td><td>'+ data.d[i].TRANSMISSION +'</td>';
output += '<td>DOOR:</td><td>'+ data.d[i].DOOR +'</td>';
output += '<td>MAKE:</td><td>'+ data.d[i].MAKE +'</td>';
output += '</tr></table></li></ul>';
$("#update").append(output);
}
}
});
}
</script>
您还可以根据您的要求更改表的结构
将数据显示到DIV
you can also change the structure of table as per your requirement
DISPLAY DATA INTO DIV
<div id="update"></div>
<script src="js/jquery.js"></script>
样式表CSS
你可以为#update创建样式，＃update ul，＃update dli，更新li：hover等...
有没有人能说出最后两点？
Style Sheet CSS
You Can Create Style for #update, #update ul, #update ul li, Update li:hover etc...
Is there any one who can tell last two points?
推荐答案
.ajax（{
类型： POST，
url： Default.aspx / Select_Search，
data： {}，
contentType： application / json; charset = utf-8，
dataType： json，
成功： function （数据）{
console .log（data）;
}
}）;
}
< / script >
< asp：按钮 ID = Button2 runat = server 文本 = 按钮 OnClientClick = HandleIT（）;返回false; / >
.ajax({ type: "POST", url: "Default.aspx/Select_Search", data: "{}", contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { console.log(data); } }); } </script> <asp:Button ID="Button2" runat="server" Text="Button" OnClientClick="HandleIT(); return false;"/>
在Chrome上打开您的页面当您右键单击页面并单击Inspect Element>然后转到Console选项卡时，您必须在控制台窗口中看到JSON数据，这意味着您有成功地重复JSON数据
如何在没有任何服务器端面板的情况下显示JSON数据
Open your page on Chrome Now when you right click on page and click on Inspect Element > then go to Console Tab you must see the JSON Data in Console Window that`s means you have succussfully Retrived JSON Data
HOW TO DISPLAY JSON DATA WITHOUT ANY SERVER SIDE CONTORL
<script type="text/javascript">
function HandleIT() {
.ajax（{
type： POST，
url： stocklist.aspx / Select_Search，
data： {}，
contentType： 应用/ JSON; charset = utf-8，
dataType： json，
成功： function （数据）{
console .log（data）;
for （ var i = 0 ; i< data.d.length; i ++）{
var output = ' < ul class =searchresult>';
输出+ = ' < li>';
输出+ = ' < table>< tr>';
输出+ = ' < td>< img src =http：// localhost：37245 / NewPeaceAuto - Steer_Well / WebStock_Images /' + data.d [i] .Image1 + ' alt =/>< / td>';
输出+ = ' < td> CHASSIS NO：< / td>< td>' + data.d [i] .CHASSIS_NO + ' < / td>';
输出+ = ' < td> MODEL：< / td>< td>' + data.d [i] .MODEL + ' < / td>';
输出+ = ' < td> COLOR：< / td>< td>' + data.d [i] .color + ' < / td>';
输出+ = ' < td> TRANS：< / td>< td>' + data.d [i] .TRANSMISSION + ' < / td>';
输出+ = ' < td> DOOR：< / td>< td>' + data.d [i] .DOOR + ' < / td>';
输出+ = ' < td> MAKE：< / td>< td>' + data.d [i] .MAKE + ' < / td>';
输出+ = ' < / tr>< / table>< / li>< / ul>';
.ajax({ type: "POST", url: "stocklist.aspx/Select_Search", data: "{}", contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { console.log(data); for (var i = 0; i < data.d.length; i++) { var output = '<ul class="searchresult">'; output += '<li>'; output += '<table><tr>'; output += '<td><img src="http://localhost:37245/NewPeaceAuto - Steer_Well/WebStock_Images/' + data.d[i].Image1 + '" alt=""/></td>'; output += '<td>CHASSIS NO:</td><td>'+ data.d[i].CHASSIS_NO +'</td>'; output += '<td>MODEL:</td><td>'+ data.d[i].MODEL +'</td>'; output += '<td>COLOR:</td><td>'+ data.d[i].color +'</td>'; output += '<td>TRANS:</td><td>'+ data.d[i].TRANSMISSION +'</td>'; output += '<td>DOOR:</td><td>'+ data.d[i].DOOR +'</td>'; output += '<td>MAKE:</td><td>'+ data.d[i].MAKE +'</td>'; output += '</tr></table></li></ul>';
（ #upcate）追加（输出）。
}
}
}）;
}
< / 脚本 >
("#update").append(output); } } }); } </script>
您还可以根据您的要求更改表的结构
将数据显示到DIV
you can also change the structure of table as per your requirement
DISPLAY DATA INTO DIV
<div id="update"></div>
<script src="js/jquery.js"></script>
样式表CSS
你可以为#update创建样式，＃update ul，＃update dli，更新li：hover等...
有没有人能说出最后两点？
Style Sheet CSS
You Can Create Style for #update, #update ul, #update ul li, Update li:hover etc...
Is there any one who can tell last two points?
这篇关于在Asp.net中通过WebService显示，排序和分页JSON数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
