How to access a server side WebControl from Client?

Question

Problem Description:

I have a simple dialog with a dropdown list and a textbox. Depending on the value of the dropdown list the required value could either be simple text, a date or specific text from database. For the first case the simple textbox that I have works just fine. For the second case I need a datepicker. For the third case I keep the textbox but I add an autocomplete function on it.

My Problem is with the second case. I tried JQuery Datepicker and it works fine but I need to use a different (framework-specific) datepicker which is a server side Web UI control.

When a date type is selected from the dropdownlist I hide the textbox (using JQuery) and I show the (hidden) datepicker and vice versa. The hiding works just fine but when I try to Save, the server side Save function can't recognize when the DatePicker is hidden. The reason I need to do that is because I want to know when to save the value from the DatePicker or the Textbox depending on which one is visible at the moment.

I tried everything css related and server just doesn't seem to be able to recognize those attributes as anything else but true.

Possible Solutions:

1) I could do a "hack" solution and add a hidden textbox and pass a true or false string in it everytime I toggle the datepicker. This way I could check the value of the textbox on save to know if the datepicker is hidden or not.

2) Another one (currently testing it) is to create a void function in my .cs file which takes a boolean input and sets a custom visibility attribute that I will add to the datepicker's framework to true or false. Whenever I toggle the datepicker I will use an AJAX call to call that function and change the server-side datepicker attribute. But I don't know if this attribute will remain changed until I click save or it will somehow go back to its default value.

My Question: Do any of the solutions above seem ok to you and why? Can you think of a better one?

I wonder if it's possible to change the position of the datepicker (off-screen somewhere) rather than show/hide? — alimac83
why don't you just distinguish on the select item in your dropdown list? there you have the information, which value you should save. — chris vietor
@infadelic this is THE solution. I figured it out like 2 minutes before I saw your post. You must have transmitted your brainwaves to me. haha. It was right in front of me all the time but I was stuck trying to apply a different approach... — xray1986

Steve O Steve O · Accepted Answer · 2012-12-07T12:46:17

I think your best bet is to always have the 3 form controls in your page and simply toggle their display states with jquery using the change event of the select box. That way you could simply remove the unused form elements during your form validation and submit the used field.

Alternatively you'd have to write some sort of postback function to handle reprinting that part of the form each the the select change is fired.

--- EDIT ---

Here's an example of the form validation you could use:

$('form').submit(function(e){
    e.preventDefault();

    if($('select.group', this).val() == "datepicker"){
        // Remove the other elemnts from the DOM
        $('input.group, textbox.group').remove();
    }

    // Submit the form
    $(this).submit();
});

Here are the jQuery docs for the remove method: http://api.jquery.com/remove/

How to access a server side WebControl from Client?

2 Answers