javascript - 在另一个 ViewComponent 中调用一个 ViewComponent

Question

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

如您所见， channel 11、12、13 和 14 是可点击的。每个 channel 都有一些附加信息(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)。我不想要那个。我希望当前 View 从 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 Action :

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

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

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

例如，如果您想在每个链接下方显示第二个 View 组件的结果，您可以为此添加另一个 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(主键)，您可以使用它在 View 组件中获取实体(从数据库左右)以获取详细信息.

这将生成与 css 类 myClass 的链接。你可以看到，我使用 asp-action 属性值作为“DetailsVc”。我们不能直接使用 link 标签助手中的 View 组件名称作为属性值来生成 href 值。所以我们应该创建一个包装器操作方法，它返回您的 View 组件结果，如下所示

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

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

现在您所要做的就是编写一些 javascript 代码来监听那些 a 标签上的 click 事件并阻止正常行为(重定向)并改为进行 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>
}