Điều này giải thích làm thế nào để thực hiện một chức năng phía máy chủ bằng cách sử dụng AJAX và jQuery khi nút liên kết được nhấp. Dưới đây là được gọi đến mã phía server xử lý từ phía client.
Lưu ý: Tôi cung cấp các ví dụ bằng cách sử dụng một nút Link để gọi và thực hiện một phương thức thông qua HTTP mà không cần quay trở lại. Trong thực tế, bạn có thể mở rộng ví dụ này cho bất kỳ điều khiển ASP.NET khác theo yêu cầu.
Mục đích
Để gọi chức năng phía server từ phía client bằng cách sử dụng AJAX và jQuery.
Đây là mã giao diện của tôi
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="ShowProducts" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField HeaderText="Product Name Using Load">
<ItemTemplate>
<asp:LinkButton ID="LinkProducts" runat="server" myCustomID='<%# Eval("ID")%>' Text='<%# Eval("Name")%>'></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Product Name Using Get">
<ItemTemplate>
<asp:LinkButton ID="GetProducts" runat="server" myCustomID='<%# Eval("ID")%>' Text='<%# Eval("Name")%>'></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Description" HeaderText="Description" />
</Columns>
</asp:GridView>
</div>
<div id="DisplayDetails">
</div>
</form>
</body>
Lưu ý rằng chúng ta bổ sung thêm hai nút liên kết hiển thị Tên sản phẩm. Một trong những yêu cầu nhấn nút, một phản ứng từ các tập tin từ xa bằng cách sử dụng jQuery chức năng load() và sử dụng phương thức $.get() . Chúng ta sẽ thấy làm thế nào để viết các chức năng cho các nút này.
Chúng ta sẽ sử dụng mã phía server tương tự cho Populating GridView, đó là:
/// <summary>
/// Page Load Event
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void Page_Load(object sender, EventArgs e)
{
List<Product> ProductList = new List<Product>
{
new Product(){Name="Product1", ID="1",Description = "Description1"},
new Product(){Name="Product2", ID="2",Description = "Description2"},
new Product(){Name="Product3", ID="3",Description = "Description3"}
};
ShowProducts.DataSource = ProductList;
ShowProducts.DataBind();
}
Nếu bạn chạy mã, bạn sẽ thấy màn hình như sau:
Trong ví dụ này, chúng ta sẽ đi qua làm thế nào để gọi mã phía server từ phía client bằng cách sử dụng AJAX và jQuery. jQuery có một phương thức gọi là "load ()" mà tải HTML từ một tập tin từ xa và cho biết thêm nội dung phản ứng để kiểm soát.
Để giữ cho nó đơn giản, chúng ta sẽ để thêm một file cho dự án với phần mở rộng ". Aspx" không có mã phía sau. Mục đích của tập tin này là cung cấp một phản ứng với các call AJAX, do đó, không cần phải giao diện người dùng. Vì vậy, toàn bộ phần HTML của tập tin và thêm đoạn code sau:
<%@ Page Language="C#" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
string productID = Request.QueryString["productID"];
Response.Write("<table width='95%' border='0' cellpadding='0' cellspacing='0' align='center'>");
Response.Write("<tr class='tdcolbg'>");
Response.Write("<td>");
Response.Write("You have clicked :" + productID);
Response.Write("</td>");
Response.Write("</tr>");
Response.Write("</table>");
Response.End();
}
</script>
Tập tin này sử dụng <script runat="server">. Nó mất giá trị của productId từ chuỗi truy vấn và builds để đáp ứng được hiển thị.
Bây giờ chúng ta hãy xem làm thế nào để tải các nội dung HTML của các tập tin aspx trong thẻ div của giao diện người dùng bằng cách sử dụng AJAX và jQuery.
Thêm một tham chiếu đến các tập tin trong thư mục JS của ứng dụng jQuery và tham khảo nó trong trang ASPX chính của bạn, nơi chúng ta sẽ gọi tập tin từ xa (aspx) và hiển thị nội dung. Bạn có thể kiểm tra các dự án đính kèm bài viết để hiểu mã nguồn được tốt hơn.
Thêm chức năng sau trong <head> </ head>:
<script type="text/javascript" src="JS/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
jQuery('[id$="LinkProducts"]').click(function() {
var customID = $(this).attr('myCustomID');
$('#DisplayDetails').load("ShowProductDetails.aspx?productId="+customID);
return false;
});
});
</script>
Giải thích về các phương thức trên: Khi trang web được tải, "$(document).ready()" được áp dụng cho các sự kiện liên kết nhấp chuột. Tiếp theo, nếu chúng ta thấy rằng kịch bản có:
jQuery('[id$="LinkProducts"]')
được sử dụng để có được ID của nút liên kết được nhấp. Điều này là do khi trang được hiển thị, id của các điều khiển server-side được thay đổi, vì vậy chúng ta không thể đoán được form của id. Ngoài ra, các nút Liên kết được render là thẻ neo:
<a id="ShowProducts_ctl02_LinkProducts" myCustomID="1"href="javascript:__doPostBack('ShowProducts$ctl02$LinkProducts','')">Product1</a>
Kể từ khi thẻ DIV không runat tại server, chúng ta có thể trực tiếp tham khảo các thẻ DIV #DIV tag ID. Bạn có thể truy cập các thuộc tính của điều khiển bằng cách sử dụng "control.attr(attribute)".
Khi người dùng nhấp chuột vào liên kết, các chức năng trên được gọi và nó đọc giá trị thuộc tính myCustomID và sau đó gọi AJAX đến trang aspx và nhận được phản ứng và liên kết để đáp ứng với các thẻ DIV. Để kiểm tra này đặt một điểm break trong file aspx được gửi để gửi các phản ứng và xem cách nó được gọi bởi jQuery trong:
Click vào tên sản phẩm và kiểm tra nếu yêu cầu được gửi đến các tập tin asp.
Sau khi thực hiện, bạn sẽ thấy các đầu ra như sau:
Bạn cũng có thể nhận được các phản ứng bằng cách sử dụng phương thức get thay vì phương thức load và ràng buộc dữ liệu vào thẻ DIV. Các chức năng bây giờ sẽ được như sau:
jQuery('[id$="GetProducts"]').click(function() {
var customID = $(this).attr('myCustomID');
$.get("ShowProductDetails.aspx",{ productId: "" + customID + ""},
function(data)
{
$('#DisplayDetails').html(data);
});
return false;
});
});
Phương thức $.get() là phương thức tương tự như phương thức load với ngoại lệ duy nhất mà các đối số gọi lại xác định những gì sẽ được thực hiện với những phản ứng từ các yêu cầu AJAX.
<script type="text/javascript">
$(document).ready(function() {
jQuery('[id$="LinkProducts"]').click(function() {
var customID = $(this).attr('myCustomID');
$('#DisplayDetails').load("ShowProductDetails.aspx?productId="+customID);
return false;
});
jQuery('[id$="GetProducts"]').click(function() {
var customID = $(this).attr('myCustomID');
$.get("ShowProductDetails.aspx",{ productId: "" + customID + ""},
function(data)
{
$('#DisplayDetails').html(data);
});
return false;
});
});
</script>
Kết luận
Để làm ví dụ đơn giản, tôi đã sử dụng một file aspx để đối phó với các cuộc gọi AJAX. Trong tình huống thực, chúng ta sẽ gọi một dịch vụ web cung cấp phản hồi.
Một lần nữa, tôi muốn nhắc lại rằng bạn có thể mở rộng ví dụ này cho các điều khiển ASP.NET cho các con chuột trên, nhấp chuột và bất kỳ sự kiện nào khác. Điều này về cơ bản tránh được trang trở lại và giúp gọi mã phía server.