Question

Well since it seems relatively difficult to send the object of a WebControl over JSON using jquery.ajax() I’ve decided to send the name of the control as a string because I know how to do that. Then I promptly realized that, from a web service, I don’t actually know how to search for a control by ID name. Since its a service I can’t seem to get Control.FindControl() to work so does anyone have ideas or suggestions? All I’m trying to do is call a databind() on my radcombobox.

Thanks in advance!

For any of you that knows anything about asp.net/rad controls – I’m basically updating a database and want the radcombobox to be in sync with that database again after adding something, before I autoselect what was just added. Other than databind do i have to call anything to refresh that list?

Thanks again!

Answer 1

The way i would go in this case is the following:

1. Make some change on the data set
2. Make a call to the web service to update the html page
3. On the service method – i would load the same control and data bind it with the updated data set like this:

    // create standard webform
    Page page = new Page();
    HtmlForm form = new HtmlForm();
    page.Controls.Add(form);
    // prepare for rendering
    StringBuilder html = new StringBuilder();
    StringWriter tw = new StringWriter(html);
    HtmlTextWriter hw = new HtmlTextWriter(tw);    

    // load the control to render
    Control control = page.LoadControl("relativeControlPath");
    TypeOfYourControl myControl = (TypeOfYourControl)control;
    myControl.DataSet = GetUpdatedDataSet();
    myControl.DataBind();

    form.Controls.Add(myControl);
    // render
    HttpContext.Current.Server.Execute(page, hw, false);

    // pack the output as JSON
    result.Add("html", html.ToString());
    JavaScriptSerializer ser = new JavaScriptSerializer();
    string json = ser.Serialize(result);

    return json;

4. When the ajax call receives a response from the previous step, all i have to do i s to replace the current dom element with the newly rendered one:

$.ajax({
    type: 'POST',
    contentType: 'application/json; charset=utf-8',
    url: "webServiceUrl",
    data: "{'if you need a specific params to identify nature of your control':'" + data + "'}",
    dataType: 'json',
    success: function(result) {
        var output = eval('(' + result.d + ')');
        $("oldNode").remove();
        $("parentNode").append(output.html);
    }
});

This approach is generally suitable when you are dealing with composite controls and cannot control or change their behavior.
But for general async update methods i would recommend more lightweight methods like sending serialized data over JSON and using something like jQuery templates on client side for markup generation.