防止 actionlink 改变当前视图

Posted 2023-02-26

【中文标题】防止 actionlink 改变当前视图

【英文标题】：Prevent actionlink from changing current view

【发布时间】：2018-05-21 14:37:10

【问题描述】：

我有一个触发视图控制器中的函数的操作链接，该函数将文件从一个文件夹移动到“存档”文件夹，因此它不会返回任何内容。但是，当单击按钮时，函数会触发并移动正确的文件，但视图会更改为“/functionName + variables”，我需要页面保持不变并且只运行函数。理想情况下，不要让页面刷新/重新定向回自身。

该按钮在 ng-repeat 中，因为文件可以更改，还有一个按钮可以下载此触发的文件并下载文件，不会发生视图更改等。

<div ng-repeat="file in toFileList">
    @
        var toURL = Url.Action("DownloadFile", "Home", new  ToFrom = "to", FileName = "toFileList[$index][0]");
        toURL = HttpUtility.UrlDecode(toURL);
    
    @
        var toArchiveURL = Url.Action("ArchiveFile", "Home", new  ToFrom = "to", FileName = "toFileList[$index][0]" );
        toArchiveURL = HttpUtility.UrlDecode(toArchiveURL);
    

    <a style="text-decoration: none;" data-ng-href="@toURL">
        <span class="glyphicon glyphicon-download-alt"></span>
    </a>
    <a style="text-decoration: none;" data-ng-href="@toArchiveURL">
        <span class="glyphicon glyphicon-eye-open"></span>
    </a>
</div>

我构建 actionlink URL，然后使用 data-ng-href 将它们应用到每个按钮

该函数是一个 void，因为它不返回任何与 ActionResult 类型的文件下载函数不同的任何内容。

public void ArchiveFile(string ToFrom, string FileName)
        
            string path = BaseFolder + client + @"\" + ToFrom + @"\" + FileName;
            string destinationPath = BaseFolder + client + @"\" + ToFrom + @"\Archive\" + FileName;

            byte[] fileBytes = System.IO.File.ReadAllBytes(path);

            System.IO.File.Move(path, destinationPath);
        

我已尝试将“id="something" 添加到包含操作变量的 ，然后将以下内容添加到页面底部（以下内容取自此处的另一个类似问题）

<script>
        $("#something").click(function (e) 
            e.preventDefault();
            $.ajax(
                url: $(this).attr("href"),
                success: function () 
                    alert("clicked"); 
                

            );

        );
    </script>

但这不会导致任何事情发生

编辑：我还尝试了标签上的 js/ajax id 和相同的结果。

【问题讨论】：

1) 如果您将 id 添加到重复的内容中，那么您最终会得到重复的 ID，除了添加 ID 的第一个元素之外，这对任何东西都不起作用。 2）它是你必须添加选择器的超链接，因为这是被点击的东西，3）如果这个标记被 Angular 重复，那么它直到执行的稍后时间才会存在，所以你会必须延迟绑定事件，直到该代码全部运行。可能 Angular 有一个解决方案，从我读过的 jQuery 和 Angular 不会成为好朋友。

实际上我有点惊讶这完全有效（即使没有 ajax）- Razor 代码（在服务器端执行）对 "toFileList[$index][0]" 字符串的构成是什么，这是一个填充在客户端？我看不出它如何正确评估它。此外，Razor 代码只会执行一次，不会为每个文件重复。

因为 Razor 在计算 javascript 值之前在服务器端执行，或者甚至存在 JS 执行环境。除非我错过了什么？诚然，我不是 Angular 专家，但我知道它是一个客户端 JS 框架。这里是否有一些与 Angular 相关的服务器端魔法在起作用，这在您的 sn-p 中并不明显？

据我所知，您的 toArchiveURL Razor 变量应该看起来像 http://www.example.com/ControllerName/ArchiveFile?toFrom=to&FileName=toFileList[$index][0] 如果那是客户端变量，它怎么可能在服务器上评估 toFileList[$index][0]？还是 Angular 解释它的魔力，因为它已经作为 URL 的一部分注入到“数据”属性中？我想一定是这样的。无论如何，实际的 Razor 代码将不会重复执行，它在 ng-repeat 循环的执行上下文之外。

我对这个选择器非常好奇：$("#something") #something 是什么/在哪里？ jQuery 选择器执行时是否存在？ DOM 中是否有多个具有相同 ID 的元素？这可能失败的原因有很多，它们似乎围绕着你在这里拥有的这种奇怪的框架组合。但至少，如果您有多个具有相同 id 的元素，那么您的 html 无效。如果 jQuery 选择器执行时你的元素不存在，那么它根本不会附加点击处理程序。

【参考方案1】：

在使用 Angular 时，我对其进行了更改，因此我改为在 js 中调用 c# 控制器函数。

HTML：

<div style="float:left" ng-click="archiveFile(toFileList[$index][0])">
   <span class="glyphicon glyphicon-eye-open"></span>
</div>

我使用 ng-click 在 .js 控制器中调用 angular

JS：

$scope.archiveFile = function (fileName)     
  $http.get("/Home/ArchiveFile",  params:  ToFrom: "To", FileName: fileName  ).then(function (result) 
      console.log(result)
  );
;

在这里，我给出了一个 ng-click 引用的范围名称，并传递了 c# 函数所需的参数。这会触发该功能并且不会尝试更改视图。