How to update partial view from another partial view via action results

Question

I have three partial views on main view

on the first partial view I have search functionality and when user clicks on search I want to refresh results into 3rd partial view.

Controller:

public ActionResult Search()
{  
         virtualmodel vm = new virtualmodel(); 
      return PartialView(svm);

} 

[HttpPost]
public ActionResult Search(ViewModel svm)
{  
         // Query to retrive the result 
      // I am not sure what to return from here. Link to another action    or just return back to same same partial 

} 

public ActionResult AnotherPartialPartial()
{
}

In main view

 @{Html.RenderAction("Search", "Searchc");
  }

How to do it? Do I need ajax?

if you don't want to reload whole page - then you need ajax. If it's ok for you - you can just use regular form post — teo van kot
– teo van kot, Commented Apr 26, 2016 at 13:07
Despite some people really tried to help me but still I am not able to find out workable solution :( — Nil
– Nil, Commented Apr 26, 2016 at 14:18
@Nil Did you get it resolved - and if you did what was the solution? — nam
– nam, Commented Feb 12, 2017 at 16:32

score 2 · Accepted Answer · 2016-04-26 14:24:36Z

2

Using ajax you can call a controller action and return it's response to a particular div.

Empty div:

<div class="row" id="div3">

</div>

Ajax to display html in empty div:

function performSearch(searchCriteria) {
   //get information to pass to controller
   var searchInformation = JSON.stringify(**your search information**);

            $.ajax({
                url: '@Url.Action("Search", "ControllerName")',//controller name and action 
                type: 'POST',
                data: { 'svm': searchInformation } //information for search
            })
            .success(function (result) {
                $('#div3').html(result); //write returned partial view to empty div
            })
            .error(function (xhr, status) {
                alert(status);
            })
        }

edited Apr 26, 2016 at 14:24

answered Apr 26, 2016 at 13:17

user4103496

Sign up to request clarification or add additional context in comments.

6 Comments

Nil Over a year ago

Sorry, I am unable to understand what to put next to data

Nil Over a year ago

svm is an object at my action result, do I need to refer to add that object?

user4103496 Over a year ago

sorry yes, I was trying to make it closer to your problem and I missed that part, updating now

user4103496 Over a year ago

it looked like your search action was taking svm as a parameter, which is why I put that there. What is the action you are calling to perform your search, and return the partial view?

Nil Over a year ago

I am calling SearchMenu actionresult to get search result and I am passing that result to ListPartial method

|

Husni Salax · Accepted Answer · 2016-04-26 13:17:58Z

1

jQuery will help you with it! Try to handle submit button onclick event like this:

$("#yourButtonId").click(function()
{
   $.ajax({
      type: "POST",
                url: "/yourUrl", //in asp.net mvc using ActionResult
                data: data,
                dataType: 'html',
                success: function (result) {
              //Your result is here
              $("#yourContainerId").html(result);
      }
   });
});

answered Apr 26, 2016 at 13:17

Husni Salax

2,0181 gold badge21 silver badges30 bronze badges

4 Comments

Nil Over a year ago

I don't know why but it didn't work for me.My be my button is on partial view and div on main view

Husni Salax Over a year ago

@Nil Try to add load or reload window.reload(); function after $("#yourContainerId").html(result); if it helps pls, check up as fixes thanx

Nil Over a year ago

I wrote it like $("#showFloors").html(result); window.reload(); but still no

Husni Salax Over a year ago

@Nil Here is you may get some information about this solution ;) stackoverflow.com/questions/16014129/…

kkakkurt · Accepted Answer · 2016-04-26 13:59:57Z

1

You can do it with ajax.

First, change your html.beginform to ajax.beginform in your view and add div id into UpdateTargetId that you want to change contents. After updating first partial with ajax.beginform, you can update other partialviews with ajax.beginform's "OnSuccess" function. You have to add update function like that:

@using (Ajax.BeginForm("YourAction", "YourController", 
        new { /*your objects*/ }, new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, 
        UpdateTargetId = "ChangeThisPart", OnSuccess = "OnSuccessMethod" }))
        {
           /*your code*/
        }

<script>
   function OnSuccessMethod() {
      $("#YouWantToChangeSecondDivID").load('/YourController/YourAction2');
      $("#YouWantToChangeThirdDivID").load('/YourController/YourAction3');
   };
</script>

Then in your controller, return a partial view to refresh your view part that you entered it's ID in UpdateTargetId value:

public ActionResult YourControllerName(YourModelType model)
{
   ...//your code
   return PartialView("_YourPartialViewName", YourViewModel);
}

Note: Don't forget to add reference to "jquery.unobtrusive-ajax.min.js" in your view while using ajax.

edited Apr 26, 2016 at 13:59

answered Apr 26, 2016 at 13:25

kkakkurt

2,8001 gold badge35 silver badges35 bronze badges

6 Comments

Nil Over a year ago

But I have 3 partial views. I want to update 3rd partial for now and later periodically I want to update 2nd partial view, will it still work?

kkakkurt Over a year ago

I have updated my answer for updating multiple partial views.

Nil Over a year ago

Objects? Which object? One which will be passed to controller ?

kkakkurt Over a year ago

Yes. If you want to add additional object to pass to controller, you can add them in that field. But if you don't want it, you don't have to use it.

Nil Over a year ago

I tried something like this "@using (Ajax.BeginForm("SearchMenu", "Search", new { /*your objects*/ }, new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, UpdateTargetId = "ChangeThisPart", OnSuccess = "OnSuccessMethod" })) { Html.RenderAction("SearchMenu", "Search"); <div id="abc"></div> } <script> function OnSuccessMethod() { $("#abc").load('/Search/SearchMenu'); $("#YouWantToChangeThirdDivID").load('/YourController/YourAction3'); }; </script>" It didn't work tho

|

Jonathan · Accepted Answer · 2018-04-06 18:21:58Z

0

So, say you have your View with PartialView, which have to be updated by button click:

<div class="target">
 @{ Html.RenderAction("UpdatePoints");}
</div>

<input class="button" value="update" />

There are some ways to do it. For example you may use jQuery:

<script type="text/javascript">
    $(function(){    
        $('.button')click(function(){        
            $.post('@Url.Action("PostActionToUpdatePoints", "Home")').always(function(){
                $('.traget').Load('/Home/UpdatePoints');        
            })        
        });
    });        
</script>

PostActionToUpdatePoints is your Action with [HttpPost] attribute, which you use to update points

If you use logic in your action UpdatePoints() to update points, maybe you forgot to add [HttpPost] attribute to it:

[HttpPost]
public ActionResult UpdatePoints()
{    
    ViewBag.points =  _Repository.Points;
    return PartialView("UpdatePoints");
}

edited Apr 6, 2018 at 18:21

Jonathan

5,0292 gold badges23 silver badges39 bronze badges

answered Apr 26, 2016 at 13:16

Dilip Oganiya

1,56414 silver badges22 bronze badges

2 Comments

Nil Over a year ago

Hey, thanks, I am trying to do it in this way, but here is a new error now, for @{Html.RenderAction("SearchMenu", "Search");} it gives an error System.Web.Mvc.HttpHandlerUtil+ServerExecuteHttpHandlerAsyncWrapper

Nil Over a year ago

I don't know where am I wrong but it says null exception

Collectives™ on Stack Overflow

How to update partial view from another partial view via action results

4 Answers 4

6 Comments

4 Comments

6 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

4 Comments

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related