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

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

- Nil

---

如果您不想重新加载整个页面，那么您需要使用ajax。如果这对您来说没问题，您可以直接使用常规表单提交。 - teo van kot

Ajax是最简单的实现方式。 - jbutler483

绝对是ajax - jamiedanq

尽管有些人真的很努力地帮助我，但我仍然无法找到可行的解决方案:( - Nil

@Nil 你解决了吗？如果解决了，是什么解决方案？ - nam

Answer 1

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

。

空的

：

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

</div>

使用 Ajax 将 HTML 显示在空的 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);
            })
        }

- rogerdeuce

---

抱歉，我无法理解应该在数据旁边放置什么。 - Nil

svm是我的操作结果中的一个对象，我需要引用添加该对象吗？ - Nil

抱歉，是的，我试图让它更接近您的问题，但错过了那部分内容，现在正在更新。 - rogerdeuce

看起来你的搜索操作将svm作为参数，这就是我放置它的原因。你调用的是哪个操作来执行搜索并返回部分视图？ - rogerdeuce

我正在调用SearchMenu ActionResult来获取搜索结果，并将该结果传递给ListPartial方法。 - Nil

让我们在聊天中继续这个讨论。 - Nil

Answer 2

jQuery会帮助你完成这个任务！尝试像这样处理提交按钮的点击事件：

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

- Husni Salax

---

我不知道为什么，但它对我没有起作用。也许我的按钮在部分视图上，而 div 在主视图上。 - Nil

@Nil 尝试在 $("#yourContainerId").html(result); 之后添加 load 或 reload window.reload(); 函数，如果有帮助，请检查修复。谢谢。 - Husni Salax

我写成了 $("#showFloors").html(result); window.reload(); 但仍然没有出现。 - Nil

@Nil 这里你可以获取有关此解决方案的一些信息 ;) https://dev59.com/43DYa4cB1Zd3GeqPF_Oo - Husni Salax

Answer 3

你可以使用Ajax来完成这个操作。

首先，在你的视图中将html.beginform改为ajax.beginform，并在UpdateTargetId中添加要更改内容的div id。使用ajax.beginform的"OnSuccess"函数更新第一个部分后，你可以使用它来更新其他partialviews。你需要像下面这样添加更新函数：

@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”的引用。

- kkakkurt

---

但我有三个局部视图。现在我想更新第三个部分，以后定期更新第二个部分视图，这还能正常工作吗？ - Nil

我已经更新了关于更新多个部分视图的答案。 - kkakkurt

对象？哪个对象？将要传递给控制器的对象？ - Nil

是的。如果您想添加其他对象以传递给控制器，可以将它们添加到该字段中。但是如果您不需要它，您可以不使用它。 - kkakkurt

我尝试了类似这样的代码： "@using (Ajax.BeginForm("SearchMenu", "Search", new { /your objects/ }, new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, UpdateTargetId = "ChangeThisPart", OnSuccess = "OnSuccessMethod" })) { Html.RenderAction("SearchMenu", "Search");

}<script> function OnSuccessMethod() { $("#abc").load('/Search/SearchMenu'); $("#YouWantToChangeThirdDivID").load('/YourController/YourAction3'); }; </script>" 但是它没有起作用。 - Nil

你好，我仍然无法将数据从视图传递到控制器，你能告诉我如何传递那些数据吗？ - Nil

Answer 4

假设你有一个包含PartialView的View，需要通过按钮点击进行更新：

<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]属性更新积分的操作。

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

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

- Dilip Oganiya

---

嘿，谢谢，我正在尝试以这种方式完成它，但现在出现了一个新错误，对于@{Html.RenderAction("SearchMenu", "Search");}，它会给出一个错误System.Web.Mvc.HttpHandlerUtil+ServerExecuteHttpHandlerAsyncWrapper。 - Nil

我不知道我的错误在哪里，但它显示空异常。 - Nil