如何从 Asp.Net Core MVC 应用程序中的控制器访问 javascript 代码

Question

我有一个 Asp.Net Core MVC 应用程序，它可以搜索 youtube 视频并返回一个显示在屏幕上的列表。每个视频都放置在具有复选框的自定义组件中。每次选中一个复选框时，我都会访问一个脚本，该脚本会搜索屏幕上的所有视频组件，并将视频 ID 存储在我的 .cshtml 页面的列表中。

在某些时候，我需要获取此视频 ID 列表来进行处理。为此，我在同一个 .cshtml 页面中创建了一个 javascript 方法来返回这个 id 列表。 我已经对 Blazor (.razor) 页面上的 JSRuntime 进行了研究，但这不是我的情况。 事实是，通过单击按钮，我需要调用控制器方法，并且该方法调用我的 javascript 方法，该方法返回我的 id 列表。 如何最好地做到这一点？

这是我的 javascript 代码。

@section scripts
{
    <script>
        var listaDeIds = [];
        function Mostrar() {
            //document.getElementById("btnplaylist").style.display = 'block';
            var videos = document.querySelectorAll('#video');
            var count = 0;
            var lista = [];

            for (var i = 0; i < videos.length; i++) {
                //console.log("1 -  " + videos.item(i).getAttribute("name"));
                var videoID = videos.item(i).getAttribute("name");
                //console.log("2 -  " + videos.item(i).getAttribute("id"));
                const shadow = videos.item(i).shadowRoot;
                const childNodes = Array.from(shadow.childNodes);
                //console.log("3 - " + childNodes.length);

                childNodes.forEach(childNode => {
                    if (childNode.nodeName === "DIV") {
                        //console.log("4 - " + childNode.nodeName);
                        const shadowChilds = Array.from(childNode.childNodes);
                        //console.log("5 - " + shadowChilds.length);
                        shadowChilds.forEach(shadowShild => {
                            if (shadowShild.nodeName === "DIV") {
                                //console.log("6 - " + shadowShild.nodeName);
                                const shadowChildsInternas = Array.from(shadowShild.childNodes);
                                //console.log("7 - " + shadowChildsInternas.length);
                                shadowChildsInternas.forEach(interna => {
                                    if (interna.nodeName === "INPUT") {
                                        //console.log("8 - Name " + interna.nodeName);
                                        if (interna.checked === true) {
                                            //console.log("9 - Checked: " + interna.checked);
                                            lista[count] = videoID;
                                            count = count + 1;
                                        }
                                    }
                                });
                            }
                        });
                    }
                });
            }
            if (lista.length > 0) {
                document.getElementById("btnplaylist").style.display = 'block';
            } else {
                document.getElementById("btnplaylist").style.display = 'none';
            }
            listaDeIds = lista;
        }

        function RetornaListaDeIds() {
            return listaDeIds;
        }
    </script>

这是我的html组件代码

<custom-iframe id="video" name="@item.Id.VideoId" urlvideo='@Url.Content(item.Url)' onclick="Mostrar()"></custom-iframe>

这是调用我的控制器的按钮。

<div id="btnplaylist" class="right_side hidden">
            <button value="Playlist" asp-controller="VideoSearch" asp-action="GravarSelecionados" class="btn green-button button-tamanho-padrao">Playlist</button>
        </div>

我控制的代码。

Answer 1

我认为您可能在这里遗漏了一些高水平的东西，所以请耐心等待。

您的用例是您希望用户“检查”您通过网络应用程序提供给他们的视频，直观地更改视频周围的页面元素并最终将它们发送出去进行处理，我认为这意味着某种存储或至少有一些后端工作。

如果我正确理解您尝试解决此问题的方法，那是不可能的。即使您确实让后端运行 javascript，它也不会知道客户端的状态，也无法从中读取视频列表。在我看来，javascript 没有理由在您的服务器上运行。

相反，您需要您的客户端 Javascript 通过 API 以 JSON 格式将该 ID 列表发送到您的服务器。流程进行（用户复选框->浏览器上的JS收集该视频的ID并格式化POST请求，其中包含一些描述检查内容的json->将JSON发送到您的服务器，然后读取并处理它）

前端 javascript 和服务器应该始终以这种方式相互通信。同样，不需要在服务器本身上运行 javascript。

Answer 2

继续感谢所有为解决我的问题提供建议的人的支持。我遵循并测试了所有建议，最适合我的问题的是使用 ajax，由 @Andre.Santarosa 建议。

我按照以下文章作为参考：http://www.macoratti.net/15/05/mvc_ajax.htm

我安装了包：Microsoft.jQuery.Unobtrusive.Ajax 我在 _Layout.cshtml 中添加了脚本引用：

<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>

在列出视频的页面上，代码如下所示：

按钮代码：

<div id="btnplaylist" class="right_side hidden">
            <input type="button" value="Playlist" id="Playlist" class="btn green-button button-tamanho-padrao" />
        </div>

Ajax 代码：

$('#Playlist').click(function () {
            var url = "/VideoSearch/PegarListaDeIds";
            var lista = listaDeIds;

            $.post(url, { pListaDeIds: lista }, function (data) {
                $("#msg").html(data);
            });
        });