在标签上加载RenderPartial点击

Question

我有一些标签，我想调用RenderPartial，在第二个标签中点击标签（overviewTab）。

现在RenderPartial会在页面加载时加载，但我只想在单击该概览选项卡时加载它。我怎样才能做到这一点？

这是我到目前为止有：

<script type="text/javascript"> 
    var overviewLoaded = false; 
    $(document).ready(function() { 
      $('#overviewTab').off('click').on('click', function() { 
       if (!overviewLoaded) { 
        overviewLoaded = true; 

       } 
      }); 
</script> 


<ul class="nav nav-tabs" role="tablist"> 
    <li class="active"><a tabindex="0" target="_self" href="#edit" role="tab" data-toggle="tab">Edit</a></li> 
    <li id="overviewTab"><a tabindex="0" target="_self" href="#overview" role="tab" data-toggle="tab">Account Overview</a></li> 
</ul> 
<div class="tab-content"> 
    <div class="tab-pane active" id="edit"> 
     // -- stuff 
    </div> 
    <div class="tab-pane" id="overview"> 
     <div class="row"> 
      @{ Html.RenderPartial("GetInfoPanel"); } 
     </div> 
    </div> 
</div> 

Answer 1

你可以做的是，当用户点击链接，该选项卡上，以通过AJAX加载概述选项卡的内容。

因此给链接添加Id并添加一个html5数据属性来存储要加载的目标url。

<li id="overviewTab"> 
<a tabindex="0" target="_self" id="overviewLink" href="#overviewLink" role="tab" 
      data-url="@Url.Action("GetInfo","Home")" data-toggle="tab">Account Overview</a> 
</li> 

而且我们不会在标签内容中调用RenderPartial，因为我们会用ajax加载它。

<div class="tab-content"> 
    <div class="tab-pane active" id="edit">Edit Stuff</div> 
    <div class="tab-pane" id="overview"></div> 
</div> 

现在使用jQuery听click事件此链接，并使用jQuery load()方法异步加载概述选项卡的内容。

$(function(){ 

    $("#overviewLink").click(function (e) { 
     e.preventDefault(); 
     $("#profile").html("Loading...").load($(this).data("url")); 
    }); 

}); 

假设您的HomeController中有一个名为GetInfo的操作方法，它返回Overview选项卡的局部视图。

public ActionResult GetInfo() 
{ 
    // to do : Update to include the data for the view 
    return PartialView(); 
} 

，如果你想在上面的代码为多个标签的工作你可以改变从基于ID选择了jQuery选择一个CSS类为基础的选择。

上面的代码在每次链接被点击时都会对action方法进行ajax调用。您可以添加一点点客户端代码来跟踪哪个链接被点击，并在第一次调用后阻止呼叫（存储在本地数组中，其中单击了项目，如果它存在于阵列中，则不要拨打电话）

Answer 2

没有任何办法做到这一点，你问过。 Html.RenderPartial发生在服务器上为初始页面请求

做会暴露的HTML作为一种新的ViewResult，然后当你想要显示它

Answer 3

在通过Ajax查询加载它的最简单的事情的一部分尝试使用RenderPartialViewToString，并使用该字符串设置html选项卡。 ：

控制器

[HttpGet] 
     public JsonResult GetTab() 
     { 

      var msg = String.Empty; 
      bool isValid = false; 
      var view = String.Empty; 

      try 
      { 
       var model = new Artist(); 
       model.Name = "Name"; 
       model.Band = "Band"; 
       view = RenderPartialViewToString("_ArtistDetail", model); 
       isValid = true; 
      } 

      catch (Exception ex) 
      { 
       msg = String.Format("{0}: {1}", DateTime.Now.ToShortTimeString(), ex.Message); 
       //or view = "Error" view 
      } 

      var result = new { isValid = isValid, view = view, msg = msg }; 
      return Json(result, JsonRequestBehavior.AllowGet); 
     } 

     //Magic here! 
     protected string RenderPartialViewToString(string viewName, object model = null) 
     { 
      if (string.IsNullOrEmpty(viewName)) 
       viewName = ControllerContext.RouteData.GetRequiredString("action"); 

      ViewData.Model = model; 

      using (var sw = new StringWriter()) 
      { 
       ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(ControllerContext, viewName); 
       ViewContext viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData, TempData, sw); 
       viewResult.View.Render(viewContext, sw); 

       return sw.GetStringBuilder().ToString(); 
      } 
     } 

管窥_ArtistDetail.cshtml

@model WebApplication1.Models.Artist 

<h1>@Model.Name</h1> 
<h3>@Model.Band</h3> 

HTML

<ul class="nav nav-tabs" role="tablist"> 
    <li class="active"><a tabindex="0" target="_self" href="#edit" role="tab" data-toggle="tab">Edit</a></li> 
    <li id="overviewTab"><a tabindex="0" target="_self" href="#overview" role="tab" data-toggle="tab">Account Overview</a></li> 
</ul> 
<div class="tab-content"> 
    <div class="tab-pane active" id="edit"> 
     // -- stuff 
    </div> 
    <div class="tab-pane" id="overview"> 
     <div id="myTab" class="row"> 
      Loading... 
     </div> 
    </div> 
</div> 

JS

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
     var target = $(e.target).attr("href"); 
     if (target == "#overview" && !overviewLoaded) { 
      GetTab(); 
      overviewLoaded = true; 
     }; 
    }); 

    var GetTab = function() { 
     var div = $("#myTab"); 
     div.empty(); 
     div.append("Loading..."); 

     $.ajax({ 
      url: "/GetTab", 
      type: 'GET', 
      dataType: 'json', 
      processData: false, 
      contentType: 'application/json; charset=utf-8', 
      success: function (data) { 
       div.empty(); 

       if (data.isValid) { 
        div.append(data.view); 
       } else { 
        div.append(data.msg); 
       } 
      }, 
      error: function (jqXHR, textStatus, errorThrown) { 
       console.log("error"); 
      } 
     }); 
    };