asp.net - csharp - jquery - looking for a better and usage solution

Question

hi my dear friends

i have a little problem about using jquery...(i reeally do not know jquery but i forced to use it)

i am using vs 2008 - asp.net web app with c#

also i am using telerik controls in my pages

also i am using sqldatasources (Connecting to storedprocedures) in my pages

my pages base on master and content pages and in content pages i have mutiviews

=================================================================================

in one of the views(inside one of those multiviews)i had made two radcombo boxes for country and city requirement like cascading dropdowns as parent and child combo boxes. i used old way for doing that , i mean i used update panel and in the SelectedIndexChange Event of Parent RadComboBox(Country) i Wrote this code :

protected void RadcomboboxCountry_SelectedIndexChanged(object o, RadComboBoxSelectedIndexChangedEventArgs e)

{

hfSelectedCo_ID.Value = RadcomboboxCountry.SelectedValue;

RadcomboboxCity.Items.Clear();

RadcomboboxCity.Items.Add(new RadComboBoxItem(" ...", "5"));

RadcomboboxCity.DataBind();

RadcomboboxCity.SelectedIndex = 0;

}

my child radcombo box can fill by upper code , let me tell you how : the child sqldatasource have a sp that has a parameter and i fill that parameter by this line -> hfSelectedCo_ID.Value = RadcbCoNameInInsert.SelectedValue; RadcbCoNameInInsert.SelectedValue means country ID.

after doing that SelectedIndexChange Event of Parent RadComboBox(Country) could not be fire therefore i forced to set the autopostback property to true.

afetr doing that every thing was ok until some one told me can u control focus and keydown of your radcombo boxes

(when u press enter key on the parent combobox[country] , so child combobox gets focus -- and when u press upperkey on child radcombobox [city], so parent combobox[country] gets focus)

(For Users That Do Not Want To Use Mouse for Input Info And Choose items)

i told him this is web app , not win form and we can not do that. i googled it and i found jquery the only way for doing that ... so i started using jquery . i wrote this code with jquery for both of them :

<script src="../JQuery/jquery-1.4.1.js" language="javascript" type="text/javascript"></script>

<script type="text/javascript">

$(function() {

$('input[id$=RadcomboboxCountry_Input]').focus();

$('input[id$=RadcomboboxCountry_Input]').select();

$('input[id$=RadcomboboxCountry_Input]').bind('keyup', function(e) {

var code = (e.keyCode ? e.keyCode : e.which);

if (code == 13) {    -----------> Enter Key

$('input[id$=RadcomboboxCity_Input]').focus();

$('input[id$=RadcomboboxCity_Input]').select();

}

});

$('input[id$=RadcomboboxCity_Input]').bind('keyup', function(e) {

var code = (e.keyCode ? e.keyCode : e.which);

if (code == 38) {       -----------> Upper Key

$('input[id$=RadcomboboxCountry_Input]').focus();

$('input[id$=RadcomboboxCountry_Input]').select();

}

});

});

</script>

this jquery code worked BBBBBBUUUUUUUTTTTTT autopostback=true of the Parent RadComboBox Became A Problem , Because when SelectedIndex Change Of ParentRadComboBox is fired after that Telerik Skins runs and after that i lost parent ComboBox Focus and we should use mouse but we don't want it....

for fix this problem i decided to set autopostback of perentCB to false and convert

protected void RadcomboboxCountry_SelectedIndexChanged(object o, RadComboBoxSelectedIndexChangedEventArgs e)

{

hfSelectedCo_ID.Value = RadcomboboxCountry.SelectedValue;

RadcomboboxCity.Items.Clear();

RadcomboboxCity.Items.Add(new RadComboBoxItem(" ...", "5"));

RadcomboboxCity.DataBind();

RadcomboboxCity.SelectedIndex = 0;

}

to a public non static method without parameters and call it with jquey like this : (i used onclientchanged property of parentcombo box like onclientchanged = "MyMethodForParentCB_InJquery();" insread of selectedindexchange event)

public void MyMethodForParentCB_InCodeBehind()

{



hfSelectedCo_ID.Value = RadcomboboxCountry.SelectedValue;

RadcomboboxCity.Items.Clear();

RadcomboboxCity.Items.Add(new RadComboBoxItem(" ...", "5"));

RadcomboboxCity.DataBind();

RadcomboboxCity.SelectedIndex = 0;

}

for doing that i read the blow manual and do that step by step :

=======================================================================

http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=732

=======================================================================

but this manual is about static methods and this is my new problem ...

when i am using static method like :

public static void MyMethodForParentCB_InCodeBehind()

{



hfSelectedCo_ID.Value = RadcomboboxCountry.SelectedValue;

RadcomboboxCity.Items.Clear();

RadcomboboxCity.Items.Add(new RadComboBoxItem(" ...", "5"));

RadcomboboxCity.DataBind();

RadcomboboxCity.SelectedIndex = 0;

}

so i recieved some errors and this method could not recognize my controls and hidden field...

one of those errors like this :

Error 2 An object reference is required for the non-static field, method, or property 'Darman.SuperAdmin.Users.hfSelectedCo_ID' C:\Javad\Copy of Darman 6\Darman\SuperAdmin\Users.aspx.cs 231 13 Darman

any idea or is there any way to call non static methods with jquery

(i know we can not do that but is there another way to solve my problem)???????????????

Answer 1

Your problem is related to the interaction between .NET and jQuery. Basically, if you change values in the user interface using jQuery, .NET doesn't know anything about it. If you make an ajax call using jQuery, it doesn't know anything about .NET's controls.

The ajax method you found and started to implement is the right way to go. However, jQuery is going to make a true ajax call. Everything you do in code behind has to exist in that static function. It can create objects and do things with them, but no controls will exist when you enter this function at runtime (unlike using an updatepanel, which walks through the full page lifecycle).

So, something like this is not going to work:

public static void MyMethodForParentCB_InCodeBehind()
{

hfSelectedCo_ID.Value = RadcomboboxCountry.SelectedValue;
RadcomboboxCity.Items.Clear();
RadcomboboxCity.Items.Add(new RadComboBoxItem(" ...", "5"));
RadcomboboxCity.DataBind();
RadcomboboxCity.SelectedIndex = 0;

}

In the case above, you don't have access to any of the controls, so you're basically left with populating the control yourself using jQuery.

You'll need to send the selected value to the static method, create the new list item as a string, and return this to the ajax callback. Within the jQuery ajax callback you'll have to add the item into the list yourself.

public static string MyMethodForParentCB_InCodeBehind( string selectedvalue )
{

     string rtrnString = SomeClass.GetValue( selectedvalue );

     return rtrnString;

} 

The following function in your presentation logic should retrieve this result and add it to your list using jQuery.

function AjaxSucceeded (result)
{

     alert(result.d);

     // result.d will have the value of the string passed back from the function
     // it's up to you to populate the combobox using jQuery.

}

The side effect of doing this is that the .NET control no longer shares the same viewstate that it did before. Meaning, if the page does a postback, the new value entered into your combobox will not be available in codebehind. You most likely won't even get this far as you'll probably get view state errors.

You're kind of in a tough spot. You might want to look into using updatepanels, as you will have access to the controls in code behind.