Create a client side to update multiple partial views with ajax

Question

How to create ASP.NET MVC to update multiple partial views?

As well as based on client actions in the view, how to update other partial views.

Example. Suppose there are 3 partial views, and when you select a check box in one of the partial views, you need to update the remaining 2 partial views.

Do I need to design different Javascript modules for different types, and then raise the event from one partial view, and then the other 2 partial views subscribe to this?

Is there any js framework that supports these events, or how do the two views speak to each other?

Answer 1

Remember that since these are partial views, this does not mean that they do not belong to the current DOM.

That means if I have 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 share a partial view with each other, edit its contents (by assigning an identifier or class that depends on how you want it), and you can only have one ajax to request a server to respond and edit a partial view desires.

Here is an example:

These are the 3 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 update its contents, you can also do this.

Tip:

, javascript, , , . , , .., .. , .

Answer 2

---

: p1, p2, p3   . , , .

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");
    }

    <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>

PartialView ( p1)

@{
    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"/>

. , .