قرار دادن GridView با اتصال DataSet Client Side با استفاده از jQuery AJAX در Asp.net
با سلام در این مقاله توضیح خواهیم داد که چگونه با استفاده از جی کوئری AJAX و روشهای وب، کنترل DataGrid را به کنترل GridView متصل کنیم.
پایگاه داده و رشته اتصال
برای این کار باید پایگاه داده Northwind را با استفاده از لینک زیر دانلود کنید .
دانلود Northwind پایگاه داده
در زیر رشته اتصال از فایل Web.Config است
<connectionStrings>
<add name="conString" connectionString="Data Source=.\SQLExpress;
database=Northwind;Integrated Security=true"/>
connectionStrings>
کد GridView
کد GridView با سه زمینه محدود بسیار ساده است.
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" Font-Names="Arial"
Font-Size="10pt" RowStyle-BackColor="#A1DCF2" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor = "White">
<Columns>
<asp:BoundField ItemStyle-Width="150px" DataField="CustomerID" HeaderText="CustomerID" />
<asp:BoundField ItemStyle-Width="150px" DataField="ContactName" HeaderText="ContactName" />
<asp:BoundField ItemStyle-Width="150px" DataField="City" HeaderText="City" />
Columns>
asp:GridView>
فضاهای نام
برای استفاده از این نمونه، باید فضاهای نامی زیر را وارد کنید .
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Web.Services;
پیوستن ردیف ساختگی
شما باید یک رشته ساختگی را به GridView متصل کنید تا GridView رندر شود. همچنین ردیف ساختگی برای حفظ سبک CSS و قالب بندی ردیف مورد نیاز است.
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
this.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();
}
در بالا، خواهید دید که یک DataTable ساختگی با سه ستون ایجاد کرده ایم که نیاز اتصال به GridView دارد.
WebMethod برای مدیریت jQuery AJAX
ما یک روش وب را ایجاد خواهیم کرد که درخواستهای jQuery AJAX handler را انجام می دهد و سوابق تولید شده از جدول مشتریان پایگاه Northwind را به عنوان یک رشته از XML باز می گرداند.
[WebMethod]
public static string GetCustomers()
{
string query = "SELECT top 10 CustomerID, ContactName, City FROM Customers";
SqlCommand cmd = new SqlCommand(query);
return GetData(cmd).GetXml();
}
private static DataSet GetData(SqlCommand cmd)
{
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);
return ds;
}
}
}
}
در بالا، می توانید ببینید که یک درخواست انتخاب را در جدول مشتریان پایگاه 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 () {
$.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 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);
});
}
script>
در کد بالا، یک ارتباط jQuery AJAX به روش Web GetCustomers در مرحله آماده سازی سند صفحه ایجاد می شود. سپس روش web یک رشته XML را که با استفاده از روش parseXML جی کوئری تجزیه می شود، باز می گرداند . سند XML و ردیف ایجاد و به کنترل GridView اضافه می شوند.
عکسها
در زیر تصویری از کنترل GridView را نشان می دهد که با استفاده از روش های jQuery AJAX و ASP.Net استفاده شده است.
