Question

参考this tutorial我使用下面的代码在部分视图中显示数据AllWS

$.get("/Home/GetAllWS", function (json)
    {
        var strHtml = ""; 
        $.each(json, function(i, wsdata)
        {
            strHtml = strHtml + "<div class='col-sm-4'>" +
                       "<p>" + wsdata.Title + "</p>" +
                       "</div>";
        });

        $('#allwsdiv').append(strHtml);
    })

<div class="row" id="allwsdiv"></div>

// under index view ( calling above partial view)
 <div id="allws">
    @Html.Partial("AllWS")
</div>

这很好用，除非我尝试使用$ .load添加项目成功后重新加载视图div在浏览器中显示我的json数据。我错过了什么。重新加载局部视图的正确方法是什么

//Item adding success
success: function (response) {
                //Reload Partial view to fetch latest added records
                $('#allws').load("@Url.Action("GetAllWS")");

                alert('success');
            },

Answer 1

看起来你的GetAllWS方法返回JSON数据。你不能使用$ .load方法！ $ .load将使用返回的响应数据替换jQuery选择器的innerHTML。这意味着当你调用一个返回HTML标记的动作方法时，你应该使用$ .load（通常是查看结果）

我建议你将所有项目包装到方法中并在成功处理程序中调用该方法。

function loadAll()
{ 
    $.get("/Home/GetAllWS", function (json)
    {
        var strHtml = ""; 
        $.each(json, function(i, wsdata)
        {
            strHtml = strHtml + "<div class='col-sm-4'>" +
                       "<p>" + wsdata.Title + "</p>" +
                       "</div>";
        });
        $('#allwsdiv').append(strHtml);
    })
}

根据需要调用此方法。可能是文档就绪事件和添加项目方法的成功处理程序

$(function(){
  loadAll();

  $("#addBtn").click(function(e){
     e.preventDefault();

     //your ajax call here
      $.ajax({
      // your existing code here
        ,success : function(response){
          loadAll();
        };
     });
  });

});

您也可以考虑从您要调用的操作方法发送一个JSON格式的新项目来添加新项目。在这种情况下，您无需再次调用loadAll方法。您只需要解析返回的json响应并将其附加到现有容器div（#allwsdiv）

使用$ .load重新加载部分视图显示json

1 个答案: