Design client side for updating multiple partial views with ajax

Question

How to design ASP.NET MVC for updating multiple partial views?

Like based on client action on the view, how to update the other partial views.

Example: Suppose there are 3 partial views, and on selection of checkbox in one of the partial view, other 2 partial views should get updated.

Do I have to design differnt Javascript Modules for different views and then raise event from one partial view and then other 2 partial views being subscribed to that?

Is there any js framework which supports these kind of eventing, or how two views talk to each other?

Answer 1

Updated

Try using data attributes

---

For example : let the actions with partial view return be in home controller as p1,p2,p3 you may need to pass a value to those action.The factors on which these action depend can be stored in data attributes.

public ActionResult Index()
    {
        return View();
    }
    public ActionResult p1(int id)
    {
        ViewBag.P1 = id;
        return PartialView();
    }
    public ActionResult p2(string id)
    {
        ViewBag.P1 = id;
        return PartialView("p1");
    }
    public ActionResult p3(int id)
    {
        ViewBag.P1 = id;
        return PartialView("p1");
    }

On Index View

    <input type="checkbox" class="clickable" data-val1="12" data-val2="hello1" data-val3="1" />
    <input type="checkbox" class="clickable" data-val1="13" data-val2="hello2" data-val3="2" />
    <input type="checkbox" class="clickable" data-val1="14" data-val2="hello3" data-val3="3" />
    <div id="partialContainer1"></div>
    <div id="partialContainer2"></div>
<div id="partialContainer3"></div>

 <script>
    $(function () {
        EventBinder();
    })

    function EventBinder() {
        $('.clickable').click(function () {
            var dataval1 = $(this).data('val1');
            var dataval2 = $(this).data('val2');
            var dataval3 = $(this).data('val3');
            $("#partialContainer1").load("/home/p1/" + dataval1,EventBinder);
            $("#partialContainer2").load("/home/p2/" + dataval2,EventBinder);
            $("#partialContainer3").load("/home/p3/" + dataval3,EventBinder);
            
        });
    }
</script>

On PartialView (For demo purpose i have used a single p1 view)

@{
    Random r = new Random();
}

<h2>@ViewBag.P1</h2>
<input type="checkbox" class="clickable" data-val1="@r.Next(30)" data-val2="@r.Next(30)" data-val3="@r.Next(30)" value="Hi2"/>

You can use data attributes as per you requirements. Hope this might help you.

Answer 2

Remember that because those are partial views does not mean that they do not belong the current DOM.

Which means that if i have this js

function ClickEventListener(partialView)
{
alert(partialView.innerHTML);
}

And i have this:

    <div id="view_1" onclick="ClickEventListener(this)">
<!--Your content-->
    </div>

    <div id="view_2" onclick="ClickEventListener(this)">
<!--Your content-->
    </div>

    <div id="view_3" onclick="ClickEventListener(this)">
<!--Your content-->
    </div>

Will work correctly. With that in mind you can comunicate the partial view with each other, edit its content(assigning id or class, that depends on how you want it) and you can have just one ajax to request de server for response and edit the desire partial view.

Here example:

Those are the 3 parital views that are already displayed

    <div id="view_1" onclick="ClickEventListener(this)">
<!--Your content-->
    </div>

    <div id="view_2" onclick="ClickEventListener(this)">
<!--Your content-->
    </div>

    <div id="view_3" onclick="ClickEventListener(this)">
<!--Your content-->
    </div>

<script>

            function ClickEventListener(partialView)
            {

    var id;
        // base on which partial was click, send request the server a background color for example
                $.get('localhost/ChangeBGColor',{id: $(partialView).prop('id')},function(response){
    $(response.partialTarget).css({background:response.color});
    })

        }
            }

<script>

Server:

public JsonResult ChangeBGColor(int id){
object response;
switch(id)
{
case 1:
response = new { partialTarget= 'view_2',color = 'blue'};
break;
case 2:
response = new { partialTarget= 'view_3',color = 'black'};
break;
case 3:
response = new { partialTarget= 'view_1',color = 'green'};
break;
}

return Json(response,JsonRequestBehavior.AllowGet);

}

If you need to refrest its content, you can do it as well.

An advice:

Partial view are quite tricky, if you have javascript code declared in one of them or all of them, does not matter if you remove the partial view. Variable, methods, object, etc, etc wil stay in memory, will not be remove it with it.