別の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から追加情報をロードしたい。

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をターゲットにしようとしています。..任意のアイデアAJAXを実行します

My機能？

Answer 1

あなたの現在のコードはリンク（タグ）をレンダリングしており、通常はリンクをクリックすると、新しいアクションメソッドにリダイレクトする新しいGETリクエストが行われます。

リダイレクトは必要ありませんが、2番目のビューコンポーネントの結果を同じビューに表示する場合は、ajaxを使用する必要があります。

たとえば、2番目のビューコンポーネントの結果を各リンクのすぐ下に表示するには、別の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> 

あなたのorignal疑問に持っていたとのparam（id）上でのみ交換のparams私はこれらすべてのルートを削除しました。あなたのアイテムはレコードの一意のID（プライマリキー）であり、ビューコンポーネント内のエンティティ（データベースなどから）を取得して詳細を取得できるものを使用していると仮定すると、Idプロパティがあります。

これは、CSSクラスmyClassでリンクを生成します。あなたはそれを見ることができます、私はasp-action属性値を "DetailsVc"として使用しました。リンクタグヘルパーのビューコンポーネント名を属性値として直接使用してhref値を生成することはできません。だから私たちはあなたの第2のビューコンポーネント名を想定すると、このような

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

以下のようにあなたのビューコンポーネントの結果を返すラッパーアクションメソッドを作成する必要がありDetailsComponentあり、それはidのparamを受け入れます。このアクションメソッドのパラメータリストを更新し、必要に応じてコンポーネントを表示します。 （ただし、ユニークなId値を渡してサーバーコードの詳細を取得することをお勧めします）

これで、タグのclickイベントを受信して​​正常な動作を妨げるJavaScriptコードがいくつかあるリダイレクト）、ajax呼び出しを行い、ajax呼び出し結果を使用して、クリックされたリンクの横にある詳細divを更新します。

あなたは（@section一部なしか、jsの外部ファイルで）自分のメインビューで、このコードを置くことができる

@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> 
}