Hướng dẫn sử dụng jquery để gọi và thực thi một hàm trong C#

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

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:

$(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);
}
});
});
});

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

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

Theo hmweb.com.vn

Về tieuyeuit
Lập trình viên Asp.net Tôi chia sẻ một,bạn chia sẻ một và chúng ta có rất nhiều!

9 Responses to Hướng dẫn sử dụng jquery để gọi và thực thi một hàm trong C#

  1. hoangnm89 nói:

    bạn đã thử ví dụ của ngta chưa vậy

  2. Admin nói:

    chào bạn.mình đã làm và rất tốt
    nếu có vấn đề gì bạn cứ post lên đây
    kiến thực là vô tận nếu biết mình sẽ trả lời bạn

  3. hoangnm89 nói:

    mình down demo của link bên trên về
    tạo 1 proc vào csld: Northwind với tên proc và nội dung y trang
    chỉnh lại connection string
    khi chạy page: Default2.aspx -> click button “View” thì nó trả về lại đúng trang Default2.aspx và chẳng chạy cái hàm:
    public static string PhanTrangSQL()

    ko biết kq bạn chạy đc là gì?

  4. Admin nói:

    cái hàm PhanTrangSQL nó trả về Bool đúng không?
    vậy thì bạn muốn test cái jquery thì cần gì CSDL?
    bạn cho nó là
    public static string PhanTrangSQL()
    {return false;} // hoặc true

    Song ra Jquery bạn check true hay false bạn hiện thông báo lên
    ajax
    {
    …..
    msg.d==false
    //thông báo
    }
    Như vậy là được
    Còn cái Phân trang đó,tác giả chỉ demo

    có vấn đề gì bạn post lên nhé

  5. hoangnm89 nói:

    mình biết tại sao nó hok gọi hàm Phantrang rùi
    Ban đầu mình để project với .net 2.0(not work). Sau đó mình để .net 3.5(work fine)
    có phải 2.0 nó ko support json ko nhj?

  6. Admin nói:

    2.0 vẫn dùng được bạn à,chúc bạn tìm hiểu tốt.

  7. hoangnm89 nói:

    sao minh` cứ để 2.0 là no’ ko gọi đc hàm phía trang aspx nhỉ
    bạn gửi cho mình cái ví dụ của bạn đc hok?
    cảm ơn bạn

  8. Admin nói:

    Comment thứ 2 của mình chính là demo mà bạn
    bạn có thể lên http://jquery.com để tìm hiểu thêm
    Thân

  9. kalida nói:

    Ở đây mình sẽ hướng dẫn các bạn dùng javascript để gọi hàm dưới code behide

    Using Page Methods in ASP.NET AJAX

    Link : http://minhhien.info/lap-trinh/ajax-jquery/Using-Page-Methods-in-ASP-NET-AJAX.aspx

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: