ملئ Server Control بدون ال PostBack

ومالذي يمنع استخدام جافا سكربت هنا ايضا ؟

جزاك الله خيرا على مرورك الكريم

المانع هو انه لا استطيع التحكم من خلال جافاسكريبت بالمعلومات الواردة لانها المعلومات تأتي من قاعدة البيانات و تحفظ في (تملأ بها) الـ Server Controls

هل من اقتراح؟

و من قال أنك لا تتحكم بها ؟؟؟ كيف في ال ASP3.0 اذا؟

تستطيع أخي باستخدام ال HTMLControls و تستقبل القيمة عن طريق Request.Form و تسندها لمتغير و تستخدمها في الأحداث الأخرى إن كانت تعتمد عليها ..

مثلا كانت هناك قائمة منسدلة تعتمد على رقم الدولة لتظهر المدن .. تستطيع استقبال رقن الدولة في الحدث Page_load و تمريره لدالة تقوم بربط البيانات بالقائمة المنسدلة الأخرى.

من خلال تجربتي مع ملء القوائم من خلال الجافا سكريبت,اكتشفت انه ليس بالمستطاع استخراج محتويات القائمة عند ارسالها وذلك راجع لان كل شيء عن معظم خصائص القائمة مخزن في الViewState والذي يعتمد عليه السيرفر في تكوين محتويات الفورم عند ارسالها.

لذلك لن تستطيع مناداة الكود التالي على القائمة الفرعية (او اي قائمة يتم ملأها بالجافا سكريبت:

MySubList.SelectedIndex
MySubList.SelectedItem.Value

لانه ببساطة لايوجد شيء بداخل القائمة عند استعراض الصفحة وانما تم ملء القائمة على الكلاينت وهو ما يتم اهماله عند ارسال لفورم الى السيرفر.

ربما تحتاج الى معرفة ال SelectedValue باستخدام اسلوب الASP :

Request["MySubList"];

بالنسبة لكود الملء بالجافا سكريبت هذا مثال صممته من قبل ,قد يفيدك وهو يعتمد على ال Nested Repeater لكتابة الجافا سكريبت :

لنفترض ان لدينا قائمة الدول ونود ملء قاءمة المدن عند اختيار دولة معينة بدون الذهاب الى السيرفر:

اولا انشيء DataSet واملاها من الاستعلام التالي:

Select Id,Name From Countries
Select Id,Name,CountryId From Cities

الان نملا الداتاسيت و نكون علاقة بين الدول والمدن اعتمادا على الحقل ContryId .بعد ذلك نربط قائمة الدول والريبيتر الخاص بكتابة كود الجافا سكريبت ,كما ننشأ حدث onchange الذي تتم مناداته عند اختيار دولة معينة :

DataSet ds = new DataSet();
  	sqlDataAdapter1.Fill(ds);
  	ds.Relations.Add("myrelation",ds.Tables[0].Columns["Id"],ds.Tables[1].Columns["CountryId"],false);
  	CountriesJScriptReapter.DataSource = ds.Tables[0];
  	CountriesJScriptReapter.DataBind();
  	CountriesDDL.DataSource = ds.Tables[0];
  	CountriesDDL.DataBind();
  	CountriesDDL.Attributes["onchange"] = "FillCities(this);";
  	CountriesDDL.Items.Insert(0,"Select");

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

<asp:Repeater id="CountriesJScriptReapter" runat="server" Visible="True">
    	<HeaderTemplate>
    	<script language="javascript">
    	function init()
    	{
    	
    	</HeaderTemplate>
    	<ItemTemplate>
        
        cities['<%#DataBinder.Eval(Container.DataItem,"Id")%>'] = new Array(
        
        <asp:Repeater id="CitiesJScriptReapter" runat="server" datasource='<%# ((System.Data.DataRowView)Container.DataItem).Row.GetChildRows("myrelation") %>'>
        	<ItemTemplate>
          new Array(<%#DataBinder.Eval(Container.DataItem,"[Id]")%>,'<%#DataBinder.Eval(Container.DataItem,"[Name]")%>')
        	</ItemTemplate>
        	<SeparatorTemplate>,</SeparatorTemplate>
        </asp:Repeater>
        );
    	</ItemTemplate>
    	<FooterTemplate>
    	
    	
    	}
    	</script>
    </FooterTemplate>
  	</asp:Repeater>

الكود السابق ينشا مصفوفة متعددة الابعاد لحفظ المدن تحت كل دولة.

الان تضيف دالة لملء المصفوفات :

<script language="javascript">
  var cities = new Array();
  function FillCities(ddl)
  {
  	for(null;document.forms[0].CitiesDDL.options.length>0;null)
    document.forms[0].CitiesDDL.options.remove(0);
  	
  	var cur = cities[ddl.options[ddl.selectedIndex].value.toString()];
  	for(var i=0;i<cur.length;i++)
  	{
    
    var opt = new Option();
    opt.text = cur[1];
    opt.value = cur[0];
    document.forms[0].CitiesDDL.options.add(opt);
  	}
  	
  }
  
  </script>

و تضيف اسم الدالة الى ال body كي تتم مناداتها عند عرض الصفحة :

body MS_POSITIONING="GridLayout" onload="init();">

تحياتي

مدني

لمادا لا تريد عمل postback ما الفائدة من عدم الاستخدام اذا كنت تريد توفير الوقت بعدم الذهاب الى server فهذا لا يفيد لانك بكل الاحوال ستتطر الى تعبئة dataset

على الاقل

السلام عليكم ورحمة الله وبركاته..

إضافة الى الأخ مدني..فقد كتبت نفس العملية التي يقوم بها..ولكن في ال code behind.. :) ..اليك..الكود :

لنبدا برسم الكنترولس..ويمثلها صفحة ال aspx :

<body id="Body" runat="server">
  <form id="Form1" method="post" runat="server">
 	 <P>
    <asp:DropDownList id="DropDownList1" runat="server"></asp:DropDownList></P>
 	 <P><br>
    <SELECT style="WIDTH: 200px; HEIGHT: 38px" size="2" name="slave">
   	 <OPTION></OPTION>
    </SELECT></P>
  </form>
	</body>

لتكن الصفحة اسمها Webform1.aspx على سبيل المثال..فبذلك صفحة الكود codebehind .هي Webform1.aspx.cs..والكلاس الذي سنكتب عليه الكود..هو Webform1.cs ..أو بالضفط غلى F7..في داخل صفحة ال aspx ..للوصل الى الكلاس..والكود كالتالي نبدأ من بداية الكلاس بتعريف المتغيرات..

protected SqlConnection connection;
  protected DataSet dataSet;
  protected System.Web.UI.HtmlControls.HtmlGenericControl Body;

لاحظ ل Body variable عرفته لكي أضيف له حدث..OnLoad ..الذي يقوم بملىْ ال list box أثناء تحميل الصفحة..وهذا ال body يقوم مقام التاج body في صفحة ال aspx .. (h) ..لنقم بمواصلة المسير:

private void Page_Load(object sender, System.EventArgs e)
  {
 	 this.BuildDropDownList();
 	 this.Body.Attributes["OnLoad"]="changeList(Form1."+this.DropDownList1.ClientID+")";
  }

BuildDropDownList

void BuildDropDownList()
  {
 	 this.connection=new SqlConnection("server=Bassampc;database=citiesDB;uid=sa;password=bassam");
 	 string sqlString="SELECT CountryID,CountryName FROM Countries;SELECT CityID,CityName,CountryID FROM Cities";
 	 SqlDataAdapter sqlDataAdapter=new SqlDataAdapter(sqlString,this.connection);

 	 this.dataSet=new DataSet();
  
 	 this.connection.Open();
 	 sqlDataAdapter.Fill(this.dataSet);

 	 this.dataSet.Relations.Add("myrelation",this.dataSet.Tables[0].Columns["CountryID"],this.dataSet.Tables[1].Columns["CountryID"],false);

 	 this.connection.Close();
 	 //build values of drop down list..
 	 this.DropDownList1.Attributes["OnChange"]="changeList(this);";
 	 this.DropDownList1.DataSource=this.dataSet.Tables[0];
 	 this.DropDownList1.DataTextField="CountryName";
 	 this.DropDownList1.DataValueField="CountryID";
 	 this.DropDownList1.DataBind();
 	 
 	 this.BuildListScript();
  }

BuildListScript

void BuildListScript()
  {
 	 string theScript=@"<script language=""javascript"">
     	 var lists = new Array();";
 	 
 	 foreach (DataRow pRow in this.dataSet.Tables[0].Rows)
    {
   	 
   	 theScript+="lists['"+pRow["CountryID"].ToString()+"']";
   	 theScript+="=new Array();\n";
   	 theScript+="lists['"+pRow["CountryID"].ToString()+"'][0]";
   	 //now add the cities names..in the child..
   	 theScript+="=new Array('";
   	 int k=0;
      foreach (DataRow cRow in pRow.GetChildRows("myrelation"))
      {
     	 k+=1;
     	 int rows=pRow.GetChildRows("myrelation").GetLength(0);
     	 if(k!=rows)
     	 {
        theScript+=cRow["CityName"]+"','";
     	 }
     	 else
     	 {
        theScript+=cRow["CityName"]+"'";
     	 }
      }
   	 k=0;
   	 theScript+=");\n";
   	 
   	 theScript+="lists['"+pRow["CountryID"].ToString()+"'][1]";
   	 theScript+="=new Array('";
      foreach (DataRow cRow in pRow.GetChildRows("myrelation"))
      {
     	 k+=1;
     	 int rows=pRow.GetChildRows("myrelation").GetLength(0);
     	 if(k!=rows)
     	 {
        theScript+=cRow["CityID"]+"','";
     	 }
     	 else
     	 {
        theScript+=cRow["CityID"]+"'";
     	 }
      }
   	 
   	 theScript+=");\n";
    
    }	
 	 theScript+=@"function changeList( box ) {
 	 list = lists[box.options[box.selectedIndex].value];
 	 emptyList( box.form.slave );
 	 fillList( box.form.slave, list );
  }
  function emptyList( box ) {
 	 while ( box.options.length ) box.options[0] = null;
  }
  function fillList( box, arr ) {
 	 for ( i = 0; i < arr[0].length; i++ ) {
    option = new Option( arr[0], arr[1] );
    box.options[box.length] = option;
 	 }
 	 box.selectedIndex=0;
 	 }
</script>";
   	 

   	 Page.RegisterStartupScript("ListBoxScript", theScript);
  }

بالتوفيق..

بسام باصمد

الاخوة جميعا ... ما شاء الله عليكم ... ما قصرتم بارك الله فيكم

كأني بحثت عن طريقة للحل و وجدت انه يمكن عمل مثل هذا الشيء في ASP.NET 2.0 بواسطة استخدام ما يسمى بـ Script CallBack. هذه الخاصية موجودة في النسخة الجديدة من ASP.NET 2.0 و لكنها تحتاج الى بعض الاحتراف لكي يتم عملها في ASP.NET 1.x

في حالة استخدام ASP.NET 1.x ... فإنه يمكن استخدام تقنية الـ XML - HTTP كما هو موضح في المقالات التالية

على كل حال يمكنكم قراءة هذه المقالات التي قد جمعتها و بحثت عنها...

Client Callbacks in ASP.NET Whidbey

Client Callbacks in ASP.NET 2.0

ASP.NET 2.0's Client Callback Feature

أو يمكنكم البحث في جوجل عن: ASP.NET SCRIPT CALLBACK

و جزاكم الله خيرا و بارك الله فيكم

و السلام عليكم ورحمة الله

أبو شيماء

سؤال..

ما الفائده من ملئ الـ ListBox مباشرة بدون الـ PostBack عند اختيار عنصر من قائمة الـ DropDown ؟؟

الاخ صلاح

الفائدة هو أنه قضية الـ PostBack تعني الرجوع الى الـ Server و أخذ كل شيء منه ثم العودة و ملئ ما ينبغي. هذا يأخذ عليك الكثير من الذاكرة و سرعة الخادم لانه لو فرضنا مثلا انك تشتغل على كثير من عناصر الادخال و كثير من الـ Server Controls or HTML Controls ...او مثلا عندك TreeView ... عند التحديث لابد لك من حفظ القيم في كل حقل من الحقول حتى تعود القيم من الخادم و ملئ مثلا الـ ListBox

على كل حال .. خاصية التحديث ايضا هي مملة عند البعض و بالتالي يمكنك ان تتجاوز ذلك و تقوم بإملائها بين غمضة عين و انتباهتها و من دون تحديث الصفحة بالكامل

على كل حال ... انا الحمد لله خلصت من هذه المشكلة و عندي الكود بالكامل لمن يريد ... او لعلي اضيفه إلى هنا مرة اخرى ان شاء الله تعالى

و السلام عليكم و رحمة الله و بركاته