在標籤上加載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"); 
      } 
     }); 
    };