19:05
Unknown
Bạn muốn thực thi một hàm C# với javascript, giờ bạn có thể thực hiện điều đó một cách đơn giản thông qua jquery. Bài viết này tôi sẽ hướng dẫn bạn cách sử dụng jquery để gọi hoặc thực thi một hàm trong C#.
Để thực hiện được bạn cần viết hàm trong code behind hàm là một WebMethod. Để làm ví dụ minh họa cho dễ hiều tôi sẽ lấy ví dụ về một hàm có kết nối và truy vấn dữ liệu trong SQL. VàStore procedure mà tôi lấy làm ví dụ là spPhanTrangSQL trong bài viết “Kỹ thuật phân trang bằng Store Procedure“
Giả sử tôi viết một trang Default2.aspx để thực hiện. Trong code behind tôi viết một WebMethod để kết nối và truy vấn dữ liệu như sau:
using System.Data; using System.Data.SqlClient; ... //Create by hungbv@hmweb.com.vn [System.Web.Services.WebMethod] public static string PhanTrangSQL( int Total, int currPage, int PageSize, int rowperpage) { string OutPut = ""; string ConnectionString = @"Server =.SQL2005;Initial Catalog=Northwind;User ID=sa;Password=sa"; SqlConnection Conn = new SqlConnection(ConnectionString); Conn.Open(); DataSet ds = new DataSet(); SqlCommand cmdUpd = new SqlCommand("spPhanTrangSQL", Conn); cmdUpd.CommandType = CommandType.StoredProcedure; cmdUpd.Parameters.Add(new SqlParameter("@Total", SqlDbType.Int)); cmdUpd.Parameters.Add(new SqlParameter("@currPage", SqlDbType.Int)); cmdUpd.Parameters.Add(new SqlParameter("@PageSize", SqlDbType.Int)); cmdUpd.Parameters.Add(new SqlParameter("@rowperpage", SqlDbType.Int)); cmdUpd.Parameters[0].Value = Total; cmdUpd.Parameters[1].Value = currPage; cmdUpd.Parameters[2].Value = PageSize; cmdUpd.Parameters[3].Value = rowperpage; SqlDataAdapter da = new SqlDataAdapter(cmdUpd); // Đổ dữ liệu vào DataSet da.Fill(ds); if (ds.Tables[0].Rows.Count > 0) { // Lấy giá trị thông báo của Store OutPut = ds.Tables[0].Rows[0]["PhanTrang"].ToString(); } return OutPut; }
Bạn thấy trong hàm trên tôi có 4 tham số truyền vào tương ứng với các tham số của Store spPhanTrangSQL. Kết quả trả về của hàm này chính là dữ liệu hiển thị phân trang. Giờ tôi sẽ thực thi nó trong code aspx. Trước tiên bạn cần download thư viện của jquery tại đây hoặc ở liên kết cuối bài này sẽ đủ cả code và thư viện cần thiết. Sau đó bạn viết như sau:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var msgbox = $("#status"); $("#Button1").click(function() { $.ajax({ type: "POST", //Gọi trang và truyền hàm của server url: "Default2.aspx/PhanTrangSQL", // truyền các tham số của hàm trong C#. //Bạn có thể dung data{DanhSachCacBien} data: "{Total:54, currPage:1, PageSize:5, rowperpage:10}", //Nếu không có tham số truyền vào trong hàm bạn có thể dung data: "{}", contentType: "application/json; charset=utf-8", dataType: "json", success: function(msg) { //Lấy phản hồi từ Webserver cho Client msgbox.html(msg.d); } }); }); }); </script> </head> <body> <form id="form1" runat="server" method="post" > <div> <input id="Button1" type="button" value="View" /> <span id="status"></span> </div> </form> </body> </html>
Trong trang asp.net bạn thấy tôi chỉ có một Button và một thẻ span để hiển thị dữ liệu. Khi nhấn vào Button kết quả sẽ là: Trang [1] 2 3 4 5 Trang sau Trang cuối. Là kết quả khi tôi truyền các giá trị @Total=54, @currPage=1, @PageSize=5 và @rowperpage=10 bằng lệnh trong hàm click của button ( data: “{Total:54, currPage:1, PageSize:5, rowperpage:10}”,) Qua đây bạn cũng biết cách truyền các tham số của hàm C# qua jquery. Bạn cũng cần chú ý tham số url: “Default2.aspx/PhanTrangSQL”,
Bạn có thể download mã nguồn và thư viện jaquery của bài viết này tại đây
Bạn có thể download mã nguồn và thư viện jaquery của bài viết này tại đây
Trên đây là ví dụ đơn giản mà tôi minh họa. Bạn có thể ứng dụng nó tùy theo mục đích của bạn. Hy vọng nó sẽ có ích đối với bạn
Posted in: ASP.NET
0 nhận xét:
Đăng nhận xét