films-araigun Rotating Header Image

Invoke Server-Side method from Client-Side using jQuery

มิ.ย. 19th, 2010
by katicks.

บางครั้งที่เราต้องการให้ Html Control เรียก method ที่ฝั่ง server เราอาจจะเลือกที่จะใช้ json เข้ามาช่วย(จริง ๆ มันเป็นแค่รูปแบบของข้อมูลที่ประกอบด้วย [, }, : เพื่อเปลี่ยนให้เป็นข้อมูลที่ computer สามารถอ่านได้) โดยพระเอกของเราก็คือ jQuery นั้นเอง ตัวผมเองก็พึ่งที่จะหัดที่จะใช้มัน (ไม่รู้ว่าช้าไปไหม) พนวกกับมี project ที่ต้องทำงานในลักษณะนี้พอดีเลยได้ลองเขียนออกมาได้อย่างที่เห็น

หลัก ๆ ที่จะมีคือ

Server-Side method จะต้องเป็น static และ มี attribute ของ method เป็น WebMethod

data ของ $.ajax คือชื่อของ parameter ของ method ฝั่ง Server-Side (ในที่นี้ผมตั้งว่า e)

test-ajax.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test-ajax.aspx.cs" Inherits="backend_test_ajax" %><!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>Ajax Method Invoker Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" language="javascript">

function doSomethingFromJavaScript(param)
{

$.ajax(
{

type: "POST",
dataType: "json",
url: "test-ajax.aspx/AjaxMethod",
data: '{e: "' + param + '"}',
contentType: "application/json; charset=utf-8",
success: function (messageFromServer)
{

alert(messageFromServer.toString());

}

});

}

</script>

</head>
<body>

<a href="#" onclick="doSomethingFromJavaScript('kob')">Test Ajax Method</a>

</body>
</html>

test-ajax.aspx.cs

using System;
using System.Web.Services;

public partial class backend_test_ajax : System.Web.UI.Page
{

[WebMethod]
public static string AjaxMethod(string e)
{

return “Client parameter is : ” + e;

}

}

via p’ kob thanks p’ball

Posted in: knowledge.

← ASP.NET UploadPanel กับ FileUpload
filter เอาแต่ตัวเลขเท่านั้น →

2 Comments

  1. KENT พูดว่า:
    21/07/2010 ที่ 9:09 pm


    MedicamentSpot.com. Canadian Health&Care.Best quality drugs.Special Internet Prices.No prescription online pharmacy. Low price pills. Buy pills online…

    Buy:Zovirax.Valtrex.Retin-A.100% Pure Okinawan Coral Calcium.Prednisolone.Lumigan.Arimidex.Zyban.Accutane.Petcam (Metacam) Oral Suspension.Synthroid.Nexium.Prevacid.Actos.Human Growth Hormone.Mega Hoodia….

  2. katicks พูดว่า:
    11/08/2010 ที่ 11:49 am

    อีกซักตัวอย่าง

    ฝั่ง server

    [WebMethod]
    public static void UpdateStat(int itemId,string url)
    {
    DataServiceTableAdapters.HomeFinderTableAdapter da = new HomeFinderTableAdapter();
    da.StatPlus(itemId);
    //Response.Redirect(url);

    }

    จำเป็นต้องเป็น public static เพื่อให้ทางวาจาสคริปเรียกใช้ได้

    ฝั่ง client

    <!– update stat –>

    <script type=”text/javascript” src=”../js/jquery-1.4.2.min.js” ></script>
    <script type=”text/javascript”>
    function UpdateStat(itemId, url)
    {
    $.ajax({
    type: “POST”,
    dataType: “json”,
    url: “Home_Finder.aspx/UpdateStat”,
    data:’{itemId: “‘+itemId+’”,url:”‘+ url +’”}’,
    contentType: “application/json; charset=utf-8″
    });
    //alert(url);
    window.open(url);
    }
    </script>

    วิธีเรียกใช้

    <a href=”#” onclick=”UpdateStat(<%=s.homeFinderID % rel=”nofollow”>,’<%=”file/”+s.fileName %>’);” >Click Here ! !</a>

Leave a Reply