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?

Answer 1

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

Answer 2

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

Answer 3

You can do it with ajax.

First, change your html.beginform to ajax.beginform in your view and add div id into that you want to change contents. 中。 After updating first partial with ajax.beginform, you can update other partialviews with ajax.beginform's function. 函数更新其他partialview。 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);
}

Don't forget to add reference to "jquery.unobtrusive-ajax.min.js" in your view while using ajax. 在使用ajax时，不要忘记在视图中添加对“jquery.unobtrusive-ajax.min.js”的引用。

Answer 4

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