部分视图内容未重新加载

Question

我有一个带有按钮的视图，当单击此按钮时，ajax 函数调用控制器方法 ApplicationAndUse，该方法应该将列表传递到我的视图中包含的部分视图。局部视图内容应该被刷新，但这不起作用，我的局部仍然是空的。我的代码：

主视图：

@model List<String>


<div class="row">
<div class="col-md-2">
    @foreach (var item in Model)
    {
        <div id="univers-@item" class="btn btn-info">@item</div><br />
    }
</div>
<div class="col-md-10">
    @Html.Partial("_ApplicationAndUsePartial", null, new ViewDataDictionary())
</div>
</div> 
@section scripts
{
<script type="text/javascript">

    $(function () {

        $('[id^=univers]').click(function () {

            var selectedButton = $(this).attr('id');
            var selectedUniverse = selectedButton.substring(selectedButton.indexOf('-') + 1, selectedButton.lenght);


            $.ajax({
                url: "http://" + window.location.host + "/UseAndNeed/ApplicationAndUse",
                type: "POST",
                data: { idUniverse: selectedUniverse },
                dataType: "json",
            });
        });
    });
</script>
}

局部视图：

@model List<int>

@if (Model!= null) { 
foreach (var item in Model)
{
    <div id="ApplicationUse-@item" class="btn btn-default">@item</div><br />
}
}

控制器功能：

[OutputCache(Duration = 0)]
    public ActionResult ApplicationAndUse(String idUniverse)
    {
         List<int> items = new List<int>();
         items.Add(1);
         items.Add(2);
        return PartialView("_ApplicationAndUsePartial", (object)items);
    }

我想念什么？

Answer 1

为我们要显示局部视图内容的div提供一个唯一的ID。

<div id="myPartial" class="col-md-10">
    @Html.Partial("_ApplicationAndUsePartial", null, new ViewDataDictionary())
</div>

并且在 ajax 方法的 success 处理程序中，使用来自 ajax 调用的响应更新此 div 的 innerHTML。此外，在进行 ajax 调用时，您不需要传递指定的数据类型值。

var myUrl= "http://" + window.location.host + "/UseAndNeed/ApplicationAndUse";

$.ajax({  type: "POST",
          url : myUrl,
          data: { idUniverse: selectedUniverse },
          success:function(result){
              $("myPartial").html(result);
          }
       });

您应该始终使用 Url.Action 或 Url.RouteUrl html 辅助方法来构建 url 到操作方法。无论您当前的 page/path.

是什么，它都会正确构建 url

var myUrl= "@Url.Action("ApplicationAndUse","UseAndNeeed")";

如果您的 js 代码位于 razor 视图中，则此方法有效。但是如果您的代码位于单独的 javascript 文件中，您可以使用上述辅助方法在剃刀视图中构建 url(s) 并将其保存在外部 js 文件代码可以访问的变量中.这样做时务必确保使用 javascript 命名空间，以避免全局 javascript 变量可能出现的问题。

@section Scripts
{
 <script>
    var myApp = myApp || {};
    myApp.Urls = myApp.Urls || {};
    myApp.Urls.baseUrl = '@Url.Content("~")';       
 </script>
 <script src="~/Scripts/PageSpecificExternalJsFile.js"></script>

}

并且在你的 PageSpecificExternalJsFile.js 文件中，你可以阅读它。

var myUrl= myApp.Urls.baseUrl+"UseAndNeed/ApplicationAndUse";
$("#myPartial").load(myUrl+'?idUniverse=someValue');

部分视图内容未重新加载

Partial View content is not reloaded

c#

ajax

asp.net-mvc

asp.net-mvc-partialview