إستدعاء دالة من Javascript

يفضل استخدام AJAX للسهولة.

kathy كتب:

السلام عليكم,,,

كيف يمكن أن أستدعي دالة مكتوبة في ملف cs أن أستدعيها من خلال دالة javascript

شكراً

http://weblogs.asp.net/mschwarz/archive/20.../15/373072.aspx

لنفرض أنه لدينا button server control وإسمه button1

نقوم بكتابة دالة جافا سكربت

function OnClientClick( ServerControID){
		var objDemo = document.getElementById(ServerControID);
		if(objDemo){		   
			objDemo.click();						
		}		
	}

وأقوم بإستدعاء الدالة في أي دالة جافاسكربت كالتالي

 OnClientClick('button1');

مارأيكم في هذة الطريقة؟؟

هذا مثال

PageMethods.zip

kathy كتب:

لنفرض أنه لدينا button server control وإسمه button1

نقوم بكتابة دالة جافا سكربت

function OnClientClick( ServerControID){
		var objDemo = document.getElementById(ServerControID);
		if(objDemo){		   
			objDemo.click();						
		}		
	}

وأقوم بإستدعاء الدالة في أي دالة جافاسكربت كالتالي

 OnClientClick('button1');

مارأيكم في هذة الطريقة؟؟

:D مشكور 'kathy'

ولكن هذه ليست طريقة فعالة واعتمادية !!!

وهي مطروقة

ويوجد الكثير من الحلول

مثلا اضع صفحة او كلاس او ashx او اي شي يقوم باستقبال طلب من client وانا ضمن الطلب امرر بارمترارات وهي عبارة عن اسم الوسيط والبرامترات الخاصة بالوسيط ومن ثم اقوم بتنفيذ الطريقة هذه الطريقة احسن واكثر دينامكية ولكن انا كنت ابحث عن طريقة اسهل من اجل مشكلتك ............

انت هنا ربطت مابين الكونترول والـmethod ولكن هنا هو حدث !!!!!

اذا احتجت لتنفيذ اي طريقة بدون ان تكون حدث او لها علاقة بالزر؟؟؟

اخي اولا انا لا اجد اي فائدة من استدعاء طريقة من السيرفر بواسطة javascript ماهي الفائدة او ماهي الحالة التي سوف احتاج من اجلها استدعاء طريقة من السيرفر !!!!

إلا اذا احتجت لأستخدام ajax standard فهنا اختلف الامر

محمد سماقية كتب:

:D مشكور 'kathy'

ولكن هذه ليست طريقة فعالة واعتمادية !!!

وهي مطروقة

ويوجد الكثير من الحلول

مثلا اضع صفحة او كلاس او ashx او اي شي يقوم باستقبال طلب من client وانا ضمن الطلب امرر بارمترارات وهي عبارة عن اسم الوسيط والبرامترات الخاصة بالوسيط ومن ثم اقوم بتنفيذ الطريقة هذه الطريقة احسن واكثر دينامكية ولكن انا كنت ابحث عن طريقة اسهل من اجل مشكلتك ............

انت هنا ربطت مابين الكونترول والـmethod ولكن هنا هو حدث !!!!!

اذا احتجت لتنفيذ اي طريقة بدون ان تكون حدث او لها علاقة بالزر؟؟؟

ممكن اخي اذا في مجال انه تضع مثال على هذه النقطه

محمد سماقية كتب:

اخي اولا انا لا اجد اي فائدة من استدعاء طريقة من السيرفر بواسطة javascript ماهي الفائدة او ماهي الحالة التي سوف احتاج من اجلها استدعاء طريقة من السيرفر !!!!

إلا اذا احتجت لأستخدام ajax standard فهنا اختلف الامر

هي الي طلبت استدعاء طريقه باستخدام javascript

انا وجدت هذا المثال ووضعته مش فاهم ملاحظتك اذا ممكن توضح

انا عم بدرس حاليا ajax وما عندي معلومات فيها

شكرا

مرحبا اخ محمد

شوف المثال ممكن هذا الي تقصده

MyOwnAjax.zip

:rolleyes:

مشكور اخ C++2003

نعم بالضبط

مارأيك ان نتساعد على وضع شرح له هنا , مثال جداً رائع وخصوصاً لتعلم استخدام الـajax بدون مكتبة الـajax !!!!

محمد سماقية كتب:

مارأيك ان نتساعد على وضع شرح له هنا , مثال جداً رائع وخصوصاً لتعلم استخدام الـajax بدون مكتبة الـajax !!!!

ممكن اخ محمد شوف كيف ممكن نبداء وانا معك ان شاء الله

انا بعتبرها بدايه جيده لليحب يتعلم ajax

الآن سوف اشرح المثال سابق بشكل مبسط ومفصل

لنتكلم حالياً بجانب Client الآن ضمن صفحة الـXmlHttp.aspx يوجد كود للـjavascript كتالي

function executeServerCode()
{
	var methodName = "GetNextEmployeeID";
	var pageURL = "XmlHttp.aspx";

	// Making assumptions on method signature and return type

	// Add some parameters to the query string
	var url = pageURL + "?callback=true&mn=" + methodName;

	// Initialize the XmlHttp object
	var xmlhttp, e;
	try {
	  xmlhttp = new XMLHttpRequest();
	}
	catch(e) {
		try {
		  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch(e) {
		}
	}

	// Prepare for a POST statement and synchronous. (All this is 
	// arbitrary and can be changed in your own implementation.)
	xmlhttp.open("POST", url, false);
	xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xmlhttp.send(null);
	var results = xmlhttp.responseText;

	var label = document.getElementById("Results"); 
	label.innerHTML = results;
}
</script>

بشكل عام الموقع السابق يستخدم تقنية الـAjax من اجل الاتصال بالـserver وجلب النتيجة وبدون اعادة تحميل انا فقط احتاج فقط نتيجة محددة وايضاً باستخدام الـjavascript اقوم تحديث محتوى الصفحة اي سوف اضع نتيجة التي تم استقبالها من الـserver ووضعها ضمن div او h مثلا ً

ملاحظة هنا نستخدم الـjaxa بشكل standard بدون استخدام مكتبة الـajax ولا اي كونترول من toolkit

حالياً بشكل عام الـclient يجب ان يتصل بالـserver صحيح ويجب ان نضع له عنوان الصفحة التي سوف تستجيب لنا ويجب ان نحدد البرامترات اللازمة وايضاً يجب ان نحدد نوع الطلب .... كل هذا موجود ضمن الـfunction السابق وهو executeServerCode

 

	var methodName = "GetNextEmployeeID";
	var pageURL = "XmlHttp.aspx";

هنا صرحنا عن متحولين الاول methodName والثاني pageURL ووضعنا لهم قيم ابتدائية

methodName من اجل اسم الطريقة اي procedure او function التي سوف نطلبها ونحن هنا نستدعي الطريقة GetNextEmployeeID التي هي موجودة ضمن السيرفر

pageURL وهي اسم الصفحة التي سوف تلبي الطلب وترجع لنا النتيجة وهي تحوي الطريقة المطلوبة وهنا اسم الصفحة هو XmlHttp.aspx وهنا ملاحظة مهمة جداً الـajax هي تقنية وهي عامة وهي عند الـClinet ولست فقط من اجل asp.net اي نستطيع ان نستدعي صفحة php مثلاً XmlHttp.php وتلبي نفس الاحتياجات

var url = pageURL + "?callback=true&mn=" + methodName;

هذا متحول url"" من اجل وضع العنوان الكامل من اجل استدعاء الصفحة مع البرامترات التي نحتاجها وهنا نلا حظ اننا مررنا برامترين الاول هو callback وقيمته true والثاني هو mn وقيمته هي قيمة المتحول methodName

	var xmlhttp, e;
	try {
	  xmlhttp = new XMLHttpRequest();
	}
	catch(e) {
		try {
		  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch(e) {
		}
	}

هذا الكود من اجل تهيئة عملية الاتصال من اجل Ajax اي تم انشاء متحول xmlhttp لكلاس XMLHttpRequest

xmlhttp.open("POST", url, false);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlhttp.send(null);
var results = xmlhttp.responseText;

هنا يتم فتح اتصال مع السيرفر وهنا تم استدعاء وسيط من كلاس XMLHttpRequest ومررنا url و حددنا نمط الطلب هل هو POST او GET وبعد التابع send ووضعنا ناتج الاستجابة من السيرفر ضمن المتحول result عبر الواصفة responseText من كلاس XMLHttpRequest اذا حالياً تم الطلب من السيرفر وتم الرد من السيرفر والناتج تم وضعه ضمن الـresults وبعد ذلك يجب ان نضع الناتج ضمن الصفحة ولذلك ضمن صفحة الـhtml لدينا العنصر التالي

<h2 id="Results">[Results here]</h2>

سوف نضع النتيجة ضمن الـh2 ووضعنا id لها من اجل امكانية الوصول لها بشكل مباشر عن طريق التابع getElementById من كلاس document بواسطة الـjavascript كالتالي

var label = document.getElementById("Results");

هنا سوف يكون ارجاع التابع getElementById هو عبارة object وهو h2 ومن ثم نضع النتيجة ضمنه كتالي

label.innerHTML = results;

وبعد شرح الـتابع executeServerCode سوف نشرح الآن كيفية استدعاء هذا التابع

<asp:Button ID="Button1" runat="server" Text="Execute code on the server"
			OnClientClick="executeServerCode();return false;" />

هنا نلاحظ ان عملية الاستدعاء سوف تكون عن طريق زر الـasp.net وهو button ولكن مع الملاحظة ان هذا عبارة عن عنصر server اي التنفيذ سوف يكون عند السيرفر اي استدعينا حدث الـclick وهو حدث يستدعي الطريقة الموجودة على سيرفر لذلك microsoft وضعت لنا الحدث OnClientClick وهذا الحدث ينفذ عند الـclient اي سوف نضع ضمنه كود javascipt وهنا ايضاً ملاحظة هامة جداً بماان هذا العنصر button هو من نوع submitt اي انه على جميع الاحالات عند النقر عليه سوف يرسل طلب سيرفر ولكن نحن هنا لا نحتاج لطلب اصلاً نحن الطلب يتم عن طريق الـajax لذلك نحن وضعنا كالتالي

OnClientClick="executeServerCode();return false;"

يعني نحن استدعينا التابع executeServerCode(); وبعد ذلك ارجعنا قيمة false حتى لا ندع عملية الطلب من السيرفر او لا يرسل اي شيء للسيرفر

ماهي المشكلة !!!!

لو فرضنا اننا لم نضع return false او وضعنا return true و لو نقرنا على زر سوف يتم استدعاء التابع executeServerCode وبدوره التابع سوف يقوم بعملية الاتصال عن طريق ajax ومن سوف يتم عرض النتيجة على الصفحة ضمن h2 ومن ثم سوف تتم عملية submit اي سوف يتم الاتصال مرة ثانية وسوف يتم تحديث محتوى الصفحة مرة ثانية والنتيجة التي حصلنا عليها عن طريق الـajax سوف لاتظهر لان العملية سوف تكون متتالية

الآن سوف نشرح الكود من طرف الـserver

الآن ضمن ملف الـXMLHttp.aspx.cs يوجد كلاس اسمه Samples_Ajax_XmlHttp وضمن هذا الكلاس يوجد طرق "Methods" ولنشرح واحد تلو الاخر

	protected void Page_Load(object sender, EventArgs e)
	{
		if (IsCustomCallback())
			HandleCustomCallback();
	}

حدث تحميل الصفحة ضمن هذا الحدث نقوم بفحص ارجاع التابع IsCustomCallback وسوف نقوم بشرح هذا التابع حيث اذا كان ارجاع التابع true يقوم بتنفيذ التابع HandleCustomCallback وإلا سوف لن يفعل اي شي ...

	string ExecuteInvokedMethod()
	{
		// Use a bit of reflection

		Type t = this.GetType();
		MethodInfo method = t.GetMethod(methodName);
		if (method == null)
			return "No method found.";


			object o = method.Invoke(this, null);
			return o.ToString();


	}

التابع IsCustomCallback الآن سابقاً نحن نتذكر اننا مرننا بارامتر callback بالـjavascript بجانب الـclient ووضعنا قيمته true من اجل تنبيه السيرفر انه callback وايضاً مررنا اسم الطريقة او التابع ضمن البرامتر mn

هنا ضمن تابع IsCustomCallback يتم جلب قيمته كلاً من القيمتين الاولى سوف يتم ارجاعها كقيمة boolean منطقية والثانية سوف تسند لمتحول خاص وعام بالنسبةللكلاس Samples_Ajax_XmlHttp

وعلى مااعتقد انها مفهومة ....

الآن ضمن هذا التابع HandleCustomCallback

 

   void HandleCustomCallback()
	{
		// Execute method
		string results = ExecuteInvokedMethod();

		// Prepare the response
		Response.ContentType = "text/xml";
		Response.Write(String.Format("The method [{0}] has been executed. The result is {1}", 
						methodName, results));
		Response.End();
	}

ايضاً بسيط يجلب قيمة تنفيذ تابع ExecuteInvokedMethod ويرجعها للـClient وعلى مااعتقد ايضاً بسيط .... اذا كان هناك اي غموض ممكن ان نناقشه هنا !!

والآن اهم تابع هو ExecuteInvokedMethod

 

	string ExecuteInvokedMethod()
	{
		// Use a bit of reflection

		Type t = this.GetType();
		MethodInfo method = t.GetMethod(methodName);
		if (method == null)
			return "No method found.";

		// (Optionally) check the WebMethod attribute
		object[] rgAttribs = method.GetCustomAttributes(typeof(WebMethodAttribute), false); 
		if (rgAttribs.Length > 0) 
		{
			object o = method.Invoke(this, null);
			return o.ToString();
		}

		return "No executable attribute found on the method."; 
	}

وظيفة هذا التابع هو تنفيذ التابع الذي وضع اسمه ضمن المتحول methodName وارجاع ايضاً قيمة هذا التابع اما بالنسبة للكود الذي بداخله

 

	 // Use a bit of reflection

		Type t = this.GetType();
		MethodInfo method = t.GetMethod(methodName);
		if (method == null)
			return "No method found.";

هنا استخدمنا مكتبة الـ reflection من اجل التأكد من ان التابع الذي اسمه ضمن methodName هو موجود حقاً ضمن الكلاس Samples_Ajax_XmlHttp علماً هنا ان this هو الـobject من Samples_Ajax_XmlHttp والكلاس MethodInfo هو موجود ضمن الـ reflection والفائدة من الكلاس هو استكشاف الواصفات الخاصة بتابع معين والوصول للـMetaData وايضاً نستطيع استداع التابع بشكل ديناميكي

object o = method.Invoke(this, null);
	  return o.ToString();

هنا تم استدعاء التابع المراد مع تمرير البرامترات المناسبة ومن ثم ارجاع النتيجة بواسطة التابع Invoke

واخيراً التابع الذي طلب من الـclient وهو

	public int GetNextEmployeeID()
	{
		Random rnd = new Random();
		return rnd.Next(1, 100);
	}

انا كتبت الشرح بشكل سريع لضيق الوقت عندي وانا اعتذر عن اي تقصير اذا كان لديكم اي استفسار ممكن ان نناقشه هنا بالتوفيق

MyOwnAjax.rar

شكرا اخ محمد

فعلا شرح رائع الله يعطيك العافيه

افضل طريقة وجدتها والتي ذكرها قبل الاخ محمد بخصوص ajax, لكن يوجد طريقة سهلة وبسيطة بإستخدام الواجهة ICallbackEventHandler

وهي كالأتي :

في البداية نعمل implements للواجهة ICallbackEventHandler والتي تحتوي على الــ methods الاتية :

1. الاولى GetCallbackResult ومهمتها ان تعيد response للطرف العميل client side

2. والثانية RaiseCallbackEvent وتحتوي على بارمتر واحد يمرر لها من طرف العميل client side

ثم نستخدم الــ Page.ClientScript.GetCallbackEventReference وهذه الميثود تقوم بعملية توليد دالة javascript والتي تقوم بإستدعاء السيرفر سيد server side

فيكون الكود هو :

public partial class Default2 : System.Web.UI.Page,ICallbackEventHandler
{
	public string sCallBackFunctionInvocation;
	public string Argument;
	protected void Page_Load(object sender, EventArgs e)
	{
		// message : is paramert in ClientSide   
		// ShowServerTime: function name that handle response 
		// context : paramert in ClientSide 
		// OnError : Function name that handle exceptions in server side
		// true :mean asynchronous callback
		sCallBackFunctionInvocation =   
		Page.ClientScript.GetCallbackEventReference(this, "message", "ShowServerTime", "context", "OnError", true);
	}

	 string ICallbackEventHandler.GetCallbackResult()
	{
		return " Server time " + DateTime.Now.ToString() + " client Message :" + Argument;
	}

	void ICallbackEventHandler.RaiseCallbackEvent(string eventArgument)
	{
		Argument = eventArgument;
	}
}

وفي الطرف العميل نكتب Client side :

  <script language="javascript">

		 function GetServerTime()
		 {
			var message = 'hellto from client';
			var context = '';

			<%=sCallBackFunctionInvocation%> 
			// After rendering will be : WebForm_DoCallback('__Page',message,ShowServerTime,context,OnError,true)
		 }

		 function ShowServerTime(timeMessage, context) {
		   alert( timeMessage);
		 }

		 function OnError(message, context) {
			alert('An unhandled exception has occurred:\n' + message);
		 }

	  </script>

والان يمكن استدعاء دالة من اي مكان مثل النثر على button :

 <input type="button" value="Get Server Time" onclick="GetServerTime();" />

مشكور اخ عبد المعز ولكن تحتاج إلى بعض التعديل من اجل جعلها دينامكية لتنفيذ اي طريقة او method من server side

وايضاً هذه طريقة التي توفرها asp.net من اجل تحقيق تقنية Ajax وهي استخدام الـواجهة الـ ICallbackEventHandler

سوف اضع التعديل ان شاء الله في اقرب وقت :rolleyes:

 

using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Reflection;

public partial class _Default : System.Web.UI.Page, ICallbackEventHandler
{

	public string sCallBackFunctionInvocation;
	public string Argument;
	protected void Page_Load(object sender, EventArgs e)
	{
		// message : is paramert in ClientSide   
		// ShowServerTime: function name that handle response 
		// context : paramert in ClientSide 
		// OnError : Function name that handle exceptions in server side
		// true :mean asynchronous callback
		sCallBackFunctionInvocation =
		Page.ClientScript.GetCallbackEventReference(this, "message", "ShowResult", "context", "OnError", true);
	}

	string ICallbackEventHandler.GetCallbackResult()
	{
		// Use a bit of reflection

		Type t = this.GetType();
		MethodInfo method = t.GetMethod(Argument);
		if (method == null)
			return "No method found.";

		object o = method.Invoke(this, null);
		return o.ToString();

	}

	void ICallbackEventHandler.RaiseCallbackEvent(string eventArgument)
	{
		Argument = eventArgument;
	}


	public int GetNextEmployeeID()
	{
		Random rnd = new Random();
		return rnd.Next(1, 100);
	}
}

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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>Untitled Page</title>

	<script language="javascript">

		 function GetMethodResult()
		 {
			var message = 'GetNextEmployeeID';
			var context = '';

			<%=sCallBackFunctionInvocation%> 

		 }

		 function ShowResult(Results, context) {

			   var label = document.getElementById("Results"); 
			   label.innerHTML = Results;
		 }

		 function OnError(message, context) {
			alert('An unhandled exception has occurred:\n' + message);
		 }

	</script>

</head>
<body>
	<form id="form1" runat="server">
	<div>
		<asp:Button ID="Button1" runat="server" Text="Execute code on the server"
			OnClientClick="GetMethodResult(); return false;" />
		<h2 id="Results">[Results here]</h2>
	</div>
	</form>
</body>
</html>

CallBack.zip

اقتباس

ولكن هذه ليست طريقة فعالة واعتمادية !!!

وهي مطروقة

مش فاهمة قصدك ممكن توضح المشاكل والعيوب لهذة الطريقة أنا وجدتها طريقة سهلة وسليمة

kathy كتب:

مش فاهمة قصدك ممكن توضح المشاكل والعيوب لهذة الطريقة أنا وجدتها طريقة سهلة وسليمة

اذا كان لدي عشر طرق او توابع مثلاً فكيف سوف تتم عملية تنفيذ التابع المراد وبأي وقت كان هل سوف نضع لكل تابع ضمن زر معقول !!!!!

واصلا الكود يلي ضمن الزر هو حدث وليش تابع !!!!!

يوجد طريقة بأن نضع شروط متتالية حتى ننفذ التابع المطلوب ولكن ليست طريقة محبذة <_<

طيب اذا نريد ارجاع قيمة من التابع فكيف ؟؟؟ !!!

يوجد طريقة ولكن الطريقة التي سوف تستخدمها سوف تكون صعبة قليلاً

...............