در این مقاله نشان می دهیم که چگونه داده های یک فایل XML را در ASP.Net با استفاده از جی کوئری و JSON متصل کنیم. روش انجام این عملیات به صورت گام به گام به همراه کد های مربوطه برایتان قرار داده شده است. همچنین میتوانید در ادامه ی مطلب فایل دموی آن را نیز دانلود کنید و از آن استفاده کنید …
اتصال داده های XML
دیتابیس:
برای این آموزش از دیتابیس Northwind مایکروسافت استفاده کردیم، که می توانید آن را از این لینک دانلود نمایید.
کد HTML:
همانطور که مشاهده می کنید، این کد شامل یک GridView با نام gvCustomers و یک کنترل DIV است که pager برای صفحه بندی در آن پر می شود.
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" RowStyle-BackColor="#A1DCF2" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"> <Columns> <asp:BoundField ItemStyle-Width="150px" DataField="CustomerID" HeaderText="کد مشتری" /> <asp:BoundField ItemStyle-Width="150px" DataField="ContactName" HeaderText="نام مخاطب" /> <asp:BoundField ItemStyle-Width="150px" DataField="City" HeaderText="شهر" /> </Columns> </asp:GridView> <br /> <div class="Pager"></div>
فضاهای نام:
فضای نام های زیر باید به برنامه اضافه شوند:
سی شارپ
using System.Data; using System.Web.Services; using System.Configuration; using System.Data.SqlClient;
VB.Net
Imports System.Data Imports System.Web.Services Imports System.Configuration Imports System.Data.SqlClient
پر کردن GridView با داده های نمونه ساختگی
در رویداد Page Load، GridView را با داده های نمونه پر می کنیم که می توانیم از ساختار HTML Table برای پر کردن داده ها با استفاده از جی کوئری استفاده کنیم.
[divider style=”normal” top=”20″ bottom=”20″]پیشنهاد میکنم : اتصال داده ها به GridView با استفاده از jQuery یا JSON در ASP.Net
[divider style=”normal” top=”20″ bottom=”20″]
متغیری با نام PageSize ایجاد کردیم که تعداد رکوردهایی را که در هر صفحه از GridView نمایش داده می شوند، مشخص می کند.
نکته: DataTable ساختگی که پر می کنیم باید همان ستون هایی را داشته باشد که از کوئری SQL برگردانده می شود.
سی شارپ
private static int PageSize = 10; protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { BindDummyRow(); } } private void BindDummyRow() { DataTable dummy = new DataTable(); dummy.Columns.Add("CustomerID"); dummy.Columns.Add("ContactName"); dummy.Columns.Add("City"); dummy.Rows.Add(); gvCustomers.DataSource = dummy; gvCustomers.DataBind(); }
VB.Net:
Private Shared PageSize As Integer = 10 Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load If Not IsPostBack Then BindDummyRow() End If End Sub Private Sub BindDummyRow() Dim dummy As New DataTable() dummy.Columns.Add("CustomerID") dummy.Columns.Add("ContactName") dummy.Columns.Add("City") dummy.Rows.Add() gvCustomers.DataSource = dummy gvCustomers.DataBind() End Sub
مربوط به صفحه بندی در SQL Server:
در ادامه Stored Procedureای داریم که صفحه بندی را در SQL Server انجام داده و هر صفحه از داده ها را برمی گرداند.
CREATE PROCEDURE [dbo].[GetCustomers_Pager] @PageIndex INT = 1 ,@PageSize INT = 10 ,@RecordCount INT OUTPUT AS BEGIN SET NOCOUNT ON; SELECT ROW_NUMBER() OVER ( ORDER BY [CustomerID] ASC )AS RowNumber ,[CustomerID] ,[CompanyName] ,[ContactName] ,[City] INTO #Results FROM [Customers] SELECT @RecordCount = COUNT(*) FROM #Results SELECT * FROM #Results WHERE RowNumber BETWEEN(@PageIndex -1) * @PageSize + 1 AND(((@PageIndex -1) * @PageSize + 1) + @PageSize) - 1 DROP TABLE #Results END
WebMethod برای مدیریت فراخوانی های jQuery Ajax:
در زیر یک WebMethod داریم که توسط تابع jQuery Ajax فراخوانی می شود که GridView را با داده ها پر کرده و همچنین صفحه بندی را نیز انجام می دهد.
PageIndex به عنوان پارامتر برحسب اینکه کدام صفحه توسط کاربر کلیک شده است، از سمت کلاینت ارسال می شود، در حالی که PageSizeرا از متغیر محلی که تعریف کرده ایم، دریافت می کنیم. براساس این پارامترها رکوردهای صفحه را واکشی می نماییم.
رکوردها به همراه تعداد کل رکوردها به عنوان رشته XML به سمت کلاینت ارسال می شوند.
نکته: تعداد کل رکوردها برای پر کردن pager ضروری است.
سی شارپ
[WebMethod] public static string GetCustomers(int pageIndex) { string query = "[GetCustomers_Pager]"; SqlCommand cmd = new SqlCommand(query); cmd.CommandType = CommandType.StoredProcedure; cmd.Parameters.AddWithValue("@PageIndex", pageIndex); cmd.Parameters.AddWithValue("@PageSize", PageSize); cmd.Parameters.Add("@RecordCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output; return GetData(cmd, pageIndex).GetXml(); } private static DataSet GetData(SqlCommand cmd, int pageIndex) { string strConnString = ConfigurationManager.ConnectionStrings["conString"].ConnectionString; using (SqlConnection con = new SqlConnection(strConnString)) { using (SqlDataAdapter sda = new SqlDataAdapter()) { cmd.Connection = con; sda.SelectCommand = cmd; using (DataSet ds = new DataSet()) { sda.Fill(ds, "Customers"); DataTable dt = new DataTable("Pager"); dt.Columns.Add("PageIndex"); dt.Columns.Add("PageSize"); dt.Columns.Add("RecordCount"); dt.Rows.Add(); dt.Rows[0]["PageIndex"] = pageIndex; dt.Rows[0]["PageSize"] = PageSize; dt.Rows[0]["RecordCount"] = cmd.Parameters["@RecordCount"].Value; ds.Tables.Add(dt); return ds; } } } }
VB.Net:
< WebMethod()> _ Public Shared Function GetCustomers(pageIndex As Integer) As String Dim query As String = "[GetCustomers_Pager]" Dim cmd As New SqlCommand(query) cmd.CommandType = CommandType.StoredProcedure cmd.Parameters.AddWithValue("@PageIndex", pageIndex) cmd.Parameters.AddWithValue("@PageSize", PageSize) cmd.Parameters.Add("@RecordCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output Return GetData(cmd, pageIndex).GetXml() End Function Private Shared Function GetData(cmd As SqlCommand, pageIndex As Integer) As DataSet Dim strConnString As String = ConfigurationManager.ConnectionStrings("conString").ConnectionString Using con As New SqlConnection(strConnString) Using sda As New SqlDataAdapter() cmd.Connection = con sda.SelectCommand = cmd Using ds As New DataSet() sda.Fill(ds, "Customers") Dim dt As New DataTable("Pager") dt.Columns.Add("PageIndex") dt.Columns.Add("PageSize") dt.Columns.Add("RecordCount") dt.Rows.Add() dt.Rows(0)("PageIndex") = pageIndex dt.Rows(0)("PageSize") = PageSize dt.Rows(0)("RecordCount") = cmd.Parameters("@RecordCount").Value ds.Tables.Add(dt) Return ds End Using End Using End Using End Function
در ادامه پیاده سازی سمت کلاینت را به طور کامل مشاهده می کنیم، در اینجا در رویداد load جی کوئری، GridView با استفاده از متد GetCustomers با PageIndex معادل ۱ پر می شود که GridView را با داده های ساختگی پر می کند.
با استفاده از تعداد رکوردها (Record Count)، pager با استفاده از افزونه جی کوئری ASPSnippets_pager درون کنترل DIV پر می شود.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="ASPSnippets_Pager.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { GetCustomers(1); }); $(".Pager .page").live("click", function () { GetCustomers(parseInt($(this).attr('page'))); }); function GetCustomers(pageIndex) { $.ajax({ type: "POST", url: "Default.aspx/GetCustomers", data: '{pageIndex: ' + pageIndex + '}', contentType: "application/json; charset=utf-8", dataType: "json", success: OnSuccess, failure: function (response) { alert(response.d); }, error: function (response) { alert(response.d); } }); } function OnSuccess(response) { var xmlDoc = $.parseXML(response.d); var xml = $(xmlDoc); var customers = xml.find("Customers"); var row = $("[id*=gvCustomers] tr:last-child").clone(true); $("[id*=gvCustomers] tr").not($("[id*=gvCustomers] tr:first-child")).remove(); $.each(customers, function () { var customer = $(this); $("td", row).eq(0).html($(this).find("CustomerID").text()); $("td", row).eq(1).html($(this).find("ContactName").text()); $("td", row).eq(2).html($(this).find("City").text()); $("[id*=gvCustomers]").append(row); row = $("[id*=gvCustomers] tr:last-child").clone(true); }); var pager = xml.find("Pager"); $(".Pager").ASPSnippets_Pager({ ActiveCssClass: "current", PagerCssClass: "pager", PageIndex: parseInt(pager.find("PageIndex").text()), PageSize: parseInt(pager.find("PageSize").text()), RecordCount: parseInt(pager.find("RecordCount").text()) }); }; </script>
CSS:
کد زیر، کد CSS موردنیازی است که حتما باید در صفحه خود قرار دهیم:
<style type="text/css"> body { font-family: Arial; font-size: 10pt; } .Pager span { text-align: center; color: #999; display: inline-block; width: 20px; background-color: #A1DCF2; margin-right: 3px; line-height: 150%; border: 1px solid #3AC0F2; } .Pager a { text-align: center; display: inline-block; width: 20px; background-color: #3AC0F2; color: #fff; border: 1px solid #3AC0F2; margin-right: 3px; line-height: 150%; text-decoration: none; } </style>
تصویر زیر، GridView با صفحه بندی سمت کلاینت توسط jQuery AJAX را نشان می دهد.
موفق باشید !
هیچ دیدگاهی نوشته نشده است.