如何通过操作结果从另一个局部视图更新局部视图

Question

我对主视图有三个部分视图

在第一个局部视图上，我有搜索功能，当用户单击搜索时，我想将结果刷新到第三个局部视图。

控制器：

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()
{
}

在主视图中

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

怎么做？我需要ajax吗？

Answer 1

使用 ajax，您可以调用控制器操作并将其响应返回到特定的div。

空div:

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

</div>

Ajax 以空 div 显示 html：

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 将帮助您！ 尝试像这样处理提交按钮 onclick 事件：

$("#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

你可以用 ajax 来做。

首先，将视图中的 html.beginform 更改为 ajax.beginform 并将 div id 添加到要更改内容的 UpdateTargetId 中。使用 ajax.beginform 更新第一个部分视图后，您可以使用 ajax.beginform 的 "OnSuccess" 函数更新其他部分视图。您必须添加这样的更新功能：

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

然后在您的控制器中，返回一个局部视图以刷新您在 UpdateTargetId 值中输入其 ID 的视图部分：

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

注意：在使用 ajax 时不要忘记在视图中添加对“jquery.unobtrusive-ajax.min.js”的引用。

Answer 4

所以，假设您的 View 带有 PartialView，必须通过单击按钮来更新：

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

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

有一些方法可以做到这一点。例如，您可以使用 jQuery：

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

PostActionToUpdatePoints 是带有 [HttpPost] 属性的 Action，用于更新点

如果您在操作 UpdatePoints() 中使用逻辑来更新点，可能是您忘记为其添加 [HttpPost] 属性：

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