ASP.NET & C# & jQuery - looking for a better and usage solution

Question

I have a little problem about using jQuery (I really do not know jQuery but I am forced to use it).

I am using Visual Studio 2008, ASP.NET web app with C#, Telerik controls on my pages. I am also using SqlDataSources (connecting to stored procedures) on my pages

My pages are based on a 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 this code, let me tell you how: the child SqlDataSource has a stored procedure that has a parameter and I fill that parameter with this line

hfSelectedCo_ID.Value = RadcbCoNameInInsert.SelectedValue;

RadcbCoNameInInsert.SelectedValue means country ID.

After doing that SelectedIndexChange event of parent RadComboBox (Country) could not be fired therefore I forced to set the AutoPostback property to true.

After doing that, everything was ok until some one told me can you control focus and keydown of your radcombo boxes (when you press the Enter key on the parent combobox [country], so child combobox gets focus -- and when you press upperkey on child radcombobox [city], parent combobox[country] gets the focus - for users that do not want to use mouse for input 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 but autopostback=true of the parent RadComboBox became a problem because when SelectedIndexChange of the parent RadComboBox 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....

To fix this problem I decided to set AutoPostback of parent CB 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 jQuery like this (I used onclientchanged property of parent combobox like

onclientchanged = "MyMethodForParentCB_InJquery();" 

instead 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 below 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;
}

I got some errors and this method could not recognize my controls and hidden field...

One of those errors:

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.