如何在ASP MVC应用程序的视图中调用Javascript函数?

elcex8rz  于 2023-03-06  发布在  Java
关注(0)|答案(3)|浏览(309)

如何在ASP MVC应用程序的视图中调用Javascript函数?
在C#foreach循环中给anchor标签赋href值。这个值将从Javascript函数中获取。我们如何在C#的MVC模型中实现这个功能?
它应该从javascript函数中获取值,而不会发生任何事件。

  • . CSHTML文件*
@foreach (var item in Model.items)
{
    <a href="JavascriptFunction(item.tostring())" class="solutions-grid__card">
        Title
    </a>
}
    • Javascript函数**
function JavascriptFunction(str) {
    alert(str);
    return str.replace(/(?:^\w|[A-Z]|\b\w)/g, (word, index) => {
        return index === 0 ? word.toLowerCase() : word.toUpperCase();
    }).replace(/\s+/g, '');
}

href标记值应具有Javascript返回值。

5q4ezhmt

5q4ezhmt1#

不要使用href,而只需使用onclick

<a onclick="JavascriptFunction(item.tostring())" class="solutions-grid__card">
    Title
</a>
oknrviil

oknrviil2#

要在ASP.NETMVC应用程序的视图中调用JavaScript函数,可以使用以下方法:
在视图中的script标记中定义JavaScript函数:

<script>
    function JavascriptFunction(str) {
        alert(str);
        return str.replace(/(?:^\w|[A-Z]|\b\w)/g, (word, index) => {
            return index === 0 ? word.toLowerCase() : word.toUpperCase();
        }).replace(/\s+/g, '');
    }
</script>

在View的foreach循环中,使用Url.Action()方法为将处理请求的action方法生成URL:

@foreach (var item in Model.items)
{
    <a href="@Url.Action("ActionMethodName", "ControllerName", new { str = item.ToString() })" class="solutions-grid__card">
        Title
    </a>
}

这里,ActionMethodName和ControllerName应该分别替换为操作方法和控制器的名称。
在Controller操作方法中,检索str参数的值并将其传递给JavaScript函数:

public ActionResult ActionMethodName(string str)
{
    ViewBag.JavascriptResult = "<script>var result = JavascriptFunction('" + str + "');</script>";
    return View();
}

在这里,ViewBag.javascriptResult用于存储JavaScript函数的结果,该结果将呈现在View中。
在视图中,使用Html.Raw()方法呈现JavaScript结果:

@Html.Raw(ViewBag.JavascriptResult)

这将执行JavaScript函数并将结果存储在result变量中,您可以使用此变量动态设置href标签的值。

<a href="http://example.com/@result" class="solutions-grid__card">
    Title
</a>

我希望这对你有帮助:)

eeq64g8w

eeq64g8w3#

你已经陈述了你的主要标准:
将href值赋给C# foreach循环中的锚标记。
在循环内部,Razor引擎正在C#上下文中执行。该引擎无法切换到解析/执行JavaScript函数。服务器上的Razor引擎不执行JavaScript。
因此,您的代码需要在foreach循环中执行一个C#函数,以提供与JavaScript函数相同的输出。您的JS函数JavascriptFunction将一个单词字符串转换为驼峰式字符串。

console.log(JavascriptFunction("This is some text"));
-> Output: "thisIsSomeText"

C#等价物在下面的Razor页面(.cshtml)中。参考链接添加在注解中。请参见Microsoft文档中的此链接和SO link帖子,了解如何从foreach循环中调用C#函数。
将C#函数放在静态类中比直接放在Razor页面中更好。

@page
@{
    string[] stringList = new string[]
    {
        "This is some text", // -> "thisIsSomeText"
        "Custom web component", // -> "customWebComponent"
        "Add to source control" // -> "addToSourceControl"
    };
}
<div style="display: grid;">
    @foreach (string item in stringList)
    {
        <a href="@ConvertToCamelCase(item)" class="solutions-grid__card">
            @item
        </a>
    }
</div>

@* https://stackoverflow.com/questions/5159877/how-do-i-define-a-method-in-razor
    https://learn.microsoft.com/en-us/aspnet/core/mvc/views/razor?view=aspnetcore-7.0#functions *@

@functions {
    // The method 'ConvertToCamelCase()' produces the equivalent
    // output as the JavaScript function in the '<script>' tag.
    public string ConvertToCamelCase(string str)
    {
        System.Text.RegularExpressions.Regex rx =
            new System.Text.RegularExpressions.Regex(@"(?:^\w|[A-Z]|\b\w)");

        // Convert first letter in each word
        // https://stackoverflow.com/questions/44567538/how-i-replace-a-text-like-javascript-in-c-sharp
        int index = 0;
        string result = rx.Replace(str, (System.Text.RegularExpressions.Match m) =>
        {
            // Increment 'index' AFTER it's been evaluated
            return index++ == 0 ? m.ToString().ToLower() : m.ToString().ToUpper();
        });
        // Remove all whitespaces
        // https://stackoverflow.com/questions/6219454/efficient-way-to-remove-all-whitespace-from-string
        return System.Text.RegularExpressions.Regex.Replace(result, @"\s+", "");
    }
}

相关问题