在另一個ViewComponent中調用ViewComponent

Question

我目前正在編碼ViewComponent（ViewComponent1）視圖。在此視圖中，我列出了幾項：

正如您所看到的，通道11,12,13和14是可點擊的。每個頻道都有一些附加信息（OBIS，avtalsid等）。我想要做的是調用ViewComponent1中的ViewComponent2，並根據點擊的項目傳遞一些數據。

我試圖做的是創建另一個View名爲「測試」和View中調用ViewComponent2其參數一起，就像這樣：

<div class="row"> 
    <div class="col-md-2 canalstyle"> 
     <a asp-controller="Customer" asp-action="Test" asp-route-pod="@item.STATION" 
     asp-route-idnr="@item.IDNR" asp-route-kanal="@item.KANAL" asp-route-start="@Model.start" 
     asp-route-end="@Model.end"> @Html.DisplayFor(modelItem => item.KANAL)</a> 
    </div> 
</div> 

這工作，但這種方法重定向我遠離我當前View（ViewComponent 1）。我不想那樣。我想要當前視圖從ViewComponent2加載附加信息。

我的功能在運行AJAX：

function myFunction() { 

var data = JSON.stringify({ 
     'idnr': id, 
     'start': this.start, 
     'end': this.end 
}); 

$.ajax({ 
    url: '@Url.Action("Test2","Customer")', 
    type: 'GET', 
    data: { idnr: id, start: this.start, end: this.end }, 
    contentType: 'application/json', 
    success: handleData(data) 
}) 
}; 

function handleData(data) { 
    alert(data); 
    var url = $(this).attr("href"); 
    var $target = $(this).closest("div").find(".details"); 
    $.get(url, function (res) { 
     $target.html(res); 
    }); 
    //do some stuff 
} 

而且我的Test2操作：

public async Task<IActionResult> Test2(string idnr, string start, string end) 
{ 
    ServiceClient r2s = new R2S.ServiceClient(); 
    R2S.Konstant[] kData = r2s.GetKonstantListAsync(new string[] { "IDNR" }, new string[] { idnr}).Result; // mätarnummer in... --> alla konstanter kopplade till denna. 

    return ViewComponent("MeterReader2", new { k = kData[0], start = start, end = end }); 
} 

我努力的目標相同的DOM ..任何想法？

Answer 1

您當前的代碼被渲染鏈接（一個標籤）和常點擊鏈接會做一個新的GET請求，這是你所看到的，重定向到新的操作方法。

如果你不想重定向，但要表現出同樣的觀點，第二視圖分量的結果，你應該使用AJAX。

例如，如果你想只顯示各個鏈接下方第二視圖分量的結果，您可以針對添加另一個HTML元素。在這裏，我正在添加一個空的div。

<div class="row"> 
    <div class="col-md-2 canalstyle"> 
     <a class="myClass" asp-controller="Customer" asp-action="DetailsVc" 
            asp-route-id="@item.Id" > @item.KANAL</a> 

     <div class="details"></div> 

    </div> 
</div> 

這裏我只是刪除所有航線PARAMS你在一部開拓創新的問題了，只與參數（id）所取代。假設您的項目將具有Id屬性，該屬性是記錄（主鍵）的唯一ID，並使用它可以從視圖組件中獲取實體（從數據庫等）以獲取詳細信息。

這將生成與css類myClass的鏈接。你可以看到，我用asp-action屬性值作爲「DetailsVc」。我們不能直接使用鏈接標記助手中的視圖組件名稱作爲屬性值來生成href值。因此，我們應該創建它返回您的視圖分量的結果，例如下面

public IActionResult DetailsVc(int id) 
{ 
    return ViewComponent("DetailsComponent", new { id =id }); 
} 

假設你的第二視圖組件名稱是DetailsComponent一個包裝動作方法，它接受一個id PARAM。根據需要更新此操作方法的參數列表並查看組件。 （但我建議只傳遞唯一的Id值，並再次獲取服務器代碼中的詳細信息）

現在，您只需使用一些javascript代碼即可收聽click事件，並防止正常行爲（重定向），然後進行ajax調用，使用ajax調用結果更新點擊鏈接旁邊的詳細信息div。

你可以把這段代碼在你的主視圖（或外部JS文件沒有@section部分）

@section Scripts 
{ 
    <script> 
     $(function() { 

      $("a.myClass").click(function(e) { 
       e.preventDefault(); 
       var url = $(this).attr("href"); 
       var $target = $(this).closest("div").find(".details"); 
       $.get(url,function(res) { 
         $target.html(res); 
        }); 
      }); 
     }); 
    </script> 
}