在 onclick 上运行 C# 函数以修改 SVG 文件答案

【问题标题】：Running a C# function on an onclick to modify SVG file在 onclick 上运行 C# 函数以修改 SVG 文件
【发布时间】：2022-11-11 01:21:18
【问题描述】：

我有一个 ASP.NET Core MVC 应用程序，在 .cshtml 页面（Razor）中有几个编码函数。我特别想在点击 a-tag 时运行这个。此代码将必不可少将转到本地存储的 .svg 文件并更改一些样式属性。代码如下，并且存储在视图中.

public static void turnRed()
{   
    var pathToSVG = "path/to/svg";
    var doc = XDocument.Load(pathToSVG);
    var node = doc.Descendants(XName.Get("rect", "http://www.w3.org/2000/svg")).FirstOrDefault(cd => cd.Attribute("id").Value == "rect1");

    node.SetAttributeValue("fill", "red");

    doc.Save(pathToSVG);
}

现在在实际的 html 中，我想要一个简单的 onclick 表达式，当按下 a-tag 时运行代码。

    <a onclick="@{ turnRed(); }" href="#">Change SVG color</a>

无论出于何种原因，我现在拥有的东西都被称为 onload，而不是点击。我该怎么办？如果有一种方法可以在没有 JavaScript 的情况下做到这一点，那将是理想的，但无论如何都行得通。谢谢！

以下是我已经看过并尝试过的一些概念：

Using Razor to call C# function

https://www.c-sharpcorner.com/blogs/how-to-create-razor-function-in-asp-net-mvc-view1

https://asp.mvc-tutorial.com/razor/local-functions/

https://learn.microsoft.com/en-us/aspnet/core/mvc/views/razor?view=aspnetcore-6.0

【问题讨论】：

标签： javascript c# asp.net asp.net-mvc svg

【解决方案1】：

Razor 页面允许使用handler methods。要从您的页面调用方法，您需要输入 On + http 动词 + 您的方法名称。在我的测试中，这不适用于静态方法

更改您的签名方法：

公共无效 OnGetTurnRed()

并将您的“a”更改为：
&lt;a asp-page-handler="TurnRed"&gt;Change SVG color&lt;/a&gt;
Docs Razor

【讨论】：