1

Thanks in advance.

I am working on a product filter view similar to some thing like on amazon. where I have refresh multiple views but the data for all the partial view come from single ajax call how to refresh multiple partial view. I can refresh main content area completely but some partial views are not supposed to be refreshed.

1
  • I understand you are new, but in the future please paste some code to help you out. I typed up something for your help, hope it helps :) Commented Apr 18, 2020 at 21:57

1 Answer 1

1

I broke it down into steps so you can follow/modify and add your partials like here. First, add 3 Partial Views, they have the same code like below,

@model int
<div class="container fluid">
    <h1>PartialDemo@(Model)</h1>
    <h3>The views will all update when you click update button below</h3>
</div>

DashboardWidgets.cshtml, the code like below, whatever your csthml page is

//<div class="row-fluid">
// <div class="col">
<div id="WidgetID_1" class="container">
    @Html.Partial("_PartialWidget1", 1)
</div>
<div id="WidgetID_2" class="container">
    @Html.Partial("_PartialWidget2", 2)
</div>
<div id="WidgetID_3" class="container">
    @Html.Partial("_PartialWidget3", 3)
</div>
<div id="WidgetID_4" class="container">
    @Html.Partial("_PartialWidget3", 4)
</div>
//</div> // the col
//</div> // the row

// lcik below button to update the partials above
// *****  One button will update them all like you wanted
<button type="button" onclick="UpdateMyWidgets()" class="btn btn-primary">Update All Partial View Views</button>

@section scripts{
    <script type="text/javascript">
        // this one button will update all your partials/widgets, you can add more partials in this function and just copy paste.
        function UpdateMyWidgets() {
            $.ajax({
                url: "@Url.Action("Widget1")",    // whom to call
                type: "POST",
                datatype: "HTML",
                success: function (data) {
                    $("#WidgetID_1").html(data);  // tell it which div to append on return
                }
            })
            $.ajax({
                url: "@Url.Action("Widget2")",
                type: "POST",
                datatype: "HTML",
                success: function (data) {
                    $("#WidgetID_2").html(data);
                }
            });
            $.ajax({
                url: "@Url.Action("Widget3")",
                type: "POST",
                datatype: "HTML",
                success: function (data) {
                    $("#WidgetID_3").html(data);
                }
            });
        }
    </script>
}

When click the "Update All Partial View Views" button, it will call "Update" method. If success, the return data will replace div's content


Backend action ajax request.

// these actions get called from the Update Buttons
public ActionResult Widget1()   
{
     return PartialView("_PartialWidget1", 11);
}
public ActionResult Widget2()
{
     return PartialView("_PartialWidget2", 21);
}
public ActionResult Widget3()
{
     return PartialView("_PartialWidget3", 31);
}
Sign up to request clarification or add additional context in comments.

4 Comments

thanks @transformer that helped I have one more question, when I press browser back button it does a full page load but the partial views check boxes and radio button selections are not reset. how can avoid that happening
Hi, what do you mean press back button, you are leaving the entire page, so what are resetting! Are trying to only refresh one partial then try this. Also if it worked please mark as answer!
Hi, Thanks for prompt responses. on the main page I have rendered a partial view that display list of radio buttons to filter the search result. selected one of those radio button to filter the result. then I have clicked a button which navigates to different page. now I click browser back button which does full page reload but the radio button selection still persists. those selections should be reset
function goBack() { $.ajax({ type: "GET", url: '@Url.Action("goBackPartialViewControllerMethod")', success: function(data) { // data is your view in oncern $('#divGoBackParticialView').html(data); } }); } // <a href="javascript:void(0);" onclick="goBack()">Go Back View</a> It would be easier to follow if can you please create a new question, and post your code and what you expect, just tag my user name and I will try and help you with it. Its a lot for comments section.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.