توضیحات و دانلود

جمع آوری DataList با اتصال DataSet Client Side با استفاده از jQuery AJAX در Asp.net
0 0
جمع آوری DataList با اتصال DataSet Client Side با استفاده از jQuery AJAX در Asp.net

با سلام در این مقاله توضیح خواهیم داد که چگونه کنترل DataList را با استفاده از اتصال مشتری DataSet با استفاده از jQuery AJAX بپردازیم.
 
 پایگاه داده و اتصال رشته
برای این کار باید پایگاه داده Northwind را با استفاده از لینک زیر دانلود کنید .
دانلود Northwind پایگاه داده
در زیر رشته اتصال از فایل Web.Config است

<connectionStrings>
<add name="conString" connectionString="Data Source=.\SQLExpress;
database=Northwind;Integrated Security=true"/>
</connectionStrings>

کد DataList
در زیر کد DataList که در آن ستون ها را از جدول مشتری محدود کرده ایم.

<asp:DataList ID="dlCustomers" runat="server" RepeatLayout="Table" RepeatColumns="3"
    CellPadding="2" CellSpacing="2">
    <ItemTemplate>
        <table cellpadding="2" cellspacing="0" border="1" style="width: 200px; height: 100px;
            border: dashed 2px #04AFEF; background-color: #B0E2F5">
            <tr>
                <td>
                    <b><u><span class="name">
                        <%# Eval("ContactName") %></span></u></b>
                </td>
            </tr>
            <tr>
                <td>
                    <b>City: </b><span class="city"><%# Eval("City") %></span><br />
                    <b>Postal Code: </b><span class="postal"><%# Eval("PostalCode") %></span><br />
                    <b>Country: </b><span class="country"><%# Eval("Country")%></span><br />
                    <b>Phone: </b><span class="phone"><%# Eval("Phone")%></span><br />
                    <b>Fax: </b><span class="fax"><%# Eval("Fax")%></span><br />
                </td>
            </tr>
        </table>
    </ItemTemplate>
</asp:DataList>

فضاهای نام
C #

using System.Data;
using System.Data.SqlClient;
using System.Web.Services;
using System.Configuration;

VB.Net

Imports System.Data
Imports System.Data.SqlClient
Imports System.Web.Services
Imports System.Collections.Generic

اتصال اطلاعات Dummy DataListItem
شما باید DataListItem ساختگی را به DataList مرتبط کنید تا ما بتوانیم آن را با استفاده از jQuery AJAX قرار دهیم. اتصال دائمی DataListItem، به ویژگی Property RepeatColumns حساب می کنیم، به طوری که در DataList ، client side ما همان تعداد آیتم های افقی را دارد.
C #

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        this.BindDummyItem();
    }
}
 
private void BindDummyItem()
{
    DataTable dummy = new DataTable();
    dummy.Columns.Add("CustomerID");
    dummy.Columns.Add("ContactName");
    dummy.Columns.Add("Country");
    dummy.Columns.Add("City");
    dummy.Columns.Add("PostalCode");
    dummy.Columns.Add("Phone");
    dummy.Columns.Add("Fax");
    int count = dlCustomers.RepeatColumns == 0 ? 1 : dlCustomers.RepeatColumns;
    for (int i = 0; i < count; i++)
    {
        dummy.Rows.Add();
    }
    dlCustomers.DataSource = dummy;
    dlCustomers.DataBind();
}

VB.Net

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not IsPostBack Then
        Me.BindDummyItem()
    End If
End Sub
 
Private Sub BindDummyItem()
    Dim dummy As New DataTable()
    dummy.Columns.Add("CustomerID")
    dummy.Columns.Add("ContactName")
    dummy.Columns.Add("Country")
    dummy.Columns.Add("City")
    dummy.Columns.Add("PostalCode")
    dummy.Columns.Add("Phone")
    dummy.Columns.Add("Fax")
    Dim count As Integer = If(dlCustomers.RepeatColumns = 0, 1, dlCustomers.RepeatColumns)
    For i As Integer = 0 To count - 1
        dummy.Rows.Add()
    Next
    dlCustomers.DataSource = dummy
    dlCustomers.DataBind()
End Sub

WebMethod برای مدیریت جی کوئری AJAX
در حال حاضر ما یک روش وب را ایجاد خواهیم کرد که درخواستهای jQuery AJAX handler را انجام می دهد و سوابق تولید شده از جدول مشتریان پایگاه Northwind را به عنوان یک رشته از XML باز می گرداند.
C #

[WebMethod]
public static string GetCustomers()
{
    string query = "SELECT top 10 * FROM Customers";
    SqlCommand cmd = new SqlCommand(query);
    return GetData(cmd).GetXml();
}
 
private static DataSet GetData(SqlCommand cmd)
{
    string strConnString = ConfigurationManager.ConnectionStrings["constr"].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);
                return ds;
 
            }
        }
    }
}

VB.Net

<WebMethod()> _
Public Shared Function GetCustomers() As String
    Dim query As String = "SELECT top 10 * FROM Customers"
    Dim cmd As New SqlCommand(query)
    Return GetData(cmd).GetXml()
End Function
 
Private Shared Function GetData(cmd As SqlCommand) As DataSet
    Dim strConnString As String = ConfigurationManager.ConnectionStrings("constr").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)
                Return ds
            End Using
        End Using
    End Using
End Function

در بالا، می توانید ببینید که یک درخواست انتخاب را در جدول مشتریان پایگاه Northwind با استفاده از شی DataSet تابع GetData اجرا می کنیم. این شیء داده ها بعدا با استفاده از روش GetXml در روش وب به XML تبدیل می شود.
قابلیت های Client side

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("[id*=dlCustomers]").hide();
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetCustomers",
            data: '{}',
            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("Table");
        var repeatColumns = parseInt("<%=dlCustomers.RepeatColumns == 0 ? 1 : dlCustomers.RepeatColumns %>");
        var rowCount = Math.ceil(customers.length / repeatColumns);
        var i = 0;
        while (i < repeatColumns * rowCount) {
            var row = $("[id*=dlCustomers] tr").eq(0).clone(true);
            for (var j = 0; j < repeatColumns; j++) {
                var customer = $(customers[i]);
                if (customer.length == 0) {
                    $("table:last", row).remove();
                } else {
                    $(".name", row).eq(j).html(customer.find("ContactName").text());
                    $(".city", row).eq(j).html(customer.find("City").text());
                    $(".postal", row).eq(j).html(customer.find("PostalCode").text());
                    $(".country", row).eq(j).html(customer.find("Country").text());
                    $(".phone", row).eq(j).html(customer.find("Phone").text());
                    $(".fax", row).eq(j).html(customer.find("Fax").text());
                }
                i++;
            }
            $("[id*=dlCustomers]").append(row);
        }
        $("[id*=dlCustomers] tr").eq(0).remove();
        $("[id*=dlCustomers]").show();
    }
</script>

در کد بالا، یک ارتباط جی کوئری AJAX به روش Web GetCustomers در مرحله آماده سازی سند صفحه ایجاد می شود. سپس متد web یک رشته XML را که با استفاده از روش parseXML جی کوئری تجزیه می شود را باز می گرداند .  سند XML ردیف ایجاد و به کنترل DataList ASP.Net اضافه می شود.


عکس روی صفحه

 


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :