How can I update multiple DOM elements using Asp.Net MVC Ajax's UpdateTargetId

Question

How can I update multiple DOM elements using Asp.Net Ajax?

This is my code:

<span id="status">No Status</span>
<br />
@Ajax.ActionLink("Update Status", "GetStatus", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "status" })
<br />
<br />
@using (Ajax.BeginForm("UpdateForm", new AjaxOptions { UpdateTargetId = "textEntered" }))
{
    @Html.TextBox("textBox1", "Enter text")
    <input type="submit" value="Submit" /><br />
    <span id="textEntered">Nothing Entered</span>
}

UpdateTargetID takes a single string. Basically I want something like in WebForms we would write updatePanel2.update() and that panel too would update itself regardless of it's position. I know that can be achieved using Jquery. But I am trying to know if there is something available in the framework itself so I don't have to write repetitive code of Jquery on all pages of my project going forward.

Answer 1

But I am trying to know if there is something available in the framework itself so I don't have to write repetitive code of Jquery on all pages of my project going forward.

There is no native framework support for mutliple UpdateTargetId's in AJAX. You have to extend default behaviours to support multiple update areas.

What you can do is to make one AJAX call, get all the results in the format of Json. Then iterate the data on client side using JQuery and update the relevant areas on the page.

Answer 2

You could have your panel describe itself and have a javascript code reading those information and performing the update for you. For instance, you could use the data-* tags available in HTML5 and compatible with HTML 4.1.

Just to give you an idea :

<div class="autoUpdate" data-target="/Controller/UpdateAction" >
    //..Some HTML content here.
</div>

<script>
    function test() {
        $(".autoUpdate").each(function(i, e) {
            var target = $(e).data("target");

            //...AJAX Query here will return HTML. Just replace innerHTML with AJAX response.
        }
    }
</script>

Or you could also simplify this by creating an updating panel widget in jQuery. It's simple enough to extend jQuery's functionalities.