在另一个 ViewComponent 中调用一个 ViewComponent

Question

我目前正在 ViewComponent (ViewComponent1) 视图中编码。在此视图中，我列出了一些项目：

如您所见，频道11、12、13和14是可以点击的。每个通道都有一些附加信息（OBIS、avtalsid 等）。我想做的是在 ViewComponent1 中调用 ViewComponent2，并根据单击的项目传递一些数据。

我试图做的是创建另一个名为 "Test" 的 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

您当前的代码正在呈现 links（a 标签），通常单击 link 会执行一个新的 GET 请求，这就是您所看到的，重定向到新操作方法。

如果你不想重定向，但想在同一个视图中显示第二个视图组件的结果，你应该使用 ajax.

例如，如果您想在每个 link 下方显示第二个视图组件的结果，您可以为此添加另一个 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>

在这里，我只是删除了您在原始问题中的所有路由参数，并仅替换为 on param (id) 。假设您的项目将有一个 Id 属性，它是记录（主键）的唯一 ID，您可以使用它在视图组件中获取实体（来自数据库左右）以获取详情。

这将生成 link 和 css class myClass。你可以看到，我使用 asp-action 属性值作为 "DetailsVc"。我们不能直接使用 link 标签助手中的视图组件名称作为属性值来生成 href 值。所以我们应该创建一个包装器操作方法，returns 您的视图组件结果如下

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

假设您的第二个视图组件名称是 DetailsComponent 并且它接受一个 id 参数。根据需要更新此操作方法和视图组件的参数列表。（但我建议只传递唯一的 Id 值并再次在服务器代码中获取详细信息）

现在您所要做的就是编写一些 javascript 代码来侦听那些 a 标签上的 click 事件并防止正常行为（重定向）并生成 ajax改为调用，使用 ajax 调用结果更新单击的 link 旁边的详细信息 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>
}

在另一个 ViewComponent 中调用一个 ViewComponent

Invoking a ViewComponent within another ViewComponent

javascript

c#

asp.net-core

asp.net-core-viewcomponent