ASP.NET User Control & AJAX

Question

I have this ASP.NET User Control that (as a part of its rendering phase) needs to execute some javascript at client-side. I use ScriptManager.RegisterStartupScript to register the script I want to execute when response reaches the client. Now, in my scenario my control is contained inside an Update panel (to be more precise, it is ajaxified using a Telerik RadAjaxManager). On the same page, I have a second Update panel (again to be more precise, a second panel ajaxified with a second RadAjaxManager setting). When this second panel raises a partial postback, I expect the changes (including any emitted script) from my control to be ignored. This is not the case and frustratingly, I cannot determine what to do? Any ideas ?

score 0 · Answer 1 · edited May 23 '17 at 11:43

IDEA #1: Stop using UpdatePanel.

ASP Webforms are great for a lot of things...partial page rendering is not one of them. While the UpdatePanel does technically perform "partial page-rendering", it also performs a full postback.

Instead, use this alternative . . .

Create an ASP Web API and regain control over your page loading process. By creating a web API controller (which is pretty much just a function on the server that you can call using javascript) you can pass to the server specific information, run only the function (or functions) necessary for the action you are performing, and then return the exact data you need to display on your client.

The same javascript function that makes the call to the server (i.e., your ASP Web API controller) will also handle the response returned, which is easily formatted in the always-simple-to-use JSON format. In the end, your javascript would look something like this:

$('.show-kitten-button').click(function () { // this binds the click event whatever button begins the action.
    // then we'll store some values in our variables
    var kittenType = $('input.kitten-type').val(); // "calico" ...from asp textbox with a CssClass="kitten-type" attribute.
});

// function to make the call to the ASP Web API controller.
function getKittenPicture(kittenType) {
    $.ajax({ // jQuery's AJAX function works well
        type: "GET" // there are four types of requests: get, post, update, and delete. You can do most actions with get and post.
        , url: 'http://yourWebSite.com/api/kittens/' + kittenType // the URL that routes to your ASP Web API controller. This is specified in the global.asax file.
        , success: function (data) { // handle the data if the HTTP response indicates success
            if (data || false) { // if data exists
                var jsonData = JSON.parse(data); // parse it as JSON. This is assuming you are returning a serialized class object from C# or VB.NET. See below for more info on this.
                var kittenImageSrcUrl = jsonData.src; // grab the data from the JSON object.
                showKittenImage(kittenImageSrcUrl); // run the function to show the kitten image.
            }                
        }
        , error: function (data) { // handle the data if the HTTP response indicates an error.
            console.log('An error occurred while retrieving the cute kitten picture.');
            console.log('Error response: ', JSON.parse(data.responseJSON));
        }
        , complete: function (data) {
            // any code to perform once the success (or error) function is complete.
        }
    });
};

function showKittenImage(imgSrc) { // function to show cute kitten image
    $("#kittenImage").attr("src", "kittenImageSrcUrl"); // change the src attribute of the image to match the src URL we got back from the server.
};

More info

If you haven't yet dabbled in the world of APIs, then you're in for a real treat, because it is much, much easier and more effective than using UpdatePanels. UpdatePanels seem simple at first glance--there's not much to making one and they do give the appearance of dynamic page content--but once you start adding multiple panels, inserting start-up scripts, etc...it gets hairy very quickly. Below here are links to everything you'll need to build your first API. I encourage you to check them out...

Thank you Lopsided for your suggestion. I will take a look into the resources you suggest and come back to you ! — michaeln, Feb 27 '15 at 05:45

ASP.NET User Control & AJAX

1 Answers1

IDEA #1: Stop using UpdatePanel.

Instead, use this alternative . . .

More info