在 MVC 5 Razor 视图中调用 JavaScript 函数

Posted 2023-03-27

【中文标题】在 MVC 5 Razor 视图中调用 JavaScript 函数

【英文标题】：Calling JavaScript function in MVC 5 Razor view

【发布时间】：2014-12-31 09:40:39

【问题描述】：

我在另一篇文章中看到，您可以像这样在剃刀代码中调用 javascript 函数：

@:FunctionName()

对我来说，虽然这只会输出实际的单词FunctionName()

这是我的看法：

@model PriceCompare.Models.QuoteModel

@
    ViewBag.Title = "Quote";


<h2>Quote</h2>

@if (@Model.clarify == true)

    // do drop down loic
    @:ShowClarify();

else

    // fill quote
    @:ShowQuote();

<div class="clarify">

    You can see the clarify div
</div>
<div class="quote">

    You can see the quote div
</div>

@section head 

    <script type="text/javascript">

        $(document).ready(
            function ShowQuote() 
                $(".quote").show();
            ,
            function ShowClarify() 
                $(".clarify").show();
            
        );

    </script>

是因为我把它嵌套在了一个`@if'中吗？反正围绕这个？

【参考方案1】：

您需要将您的 javascript 放在 <script> 标记中，并且您需要在其范围内调用函数：

<script type="text/javascript">

    $(document).ready(
        function ShowQuote() 
            $(".quote").show();
        ,
        function ShowClarify() 
            $(".clarify").show();
        

        @if (@Model.clarify == true)
        
            // do drop down loic
            ShowClarify();
        
        else
        
            // fill quote
            ShowQuote();
        
    );

</script>

【讨论】：

谢谢。 “@:”语法是一回事吗？停产了吗？

@: 语法只是告诉 Razor 将后面的内容视为纯文本。在代码块的上下文中，这对于防止 Razor 尝试在 C#/VB 上下文而不是 JavaScript 上下文中运行 FunctionName() 方法（它实际存在的位置）是必要的。

@Guerrilla 我没有把它放在 Visual Studio 中，所以您可能仍然需要在 javascript 函数调用前使用 @:。

我相信它需要 @: 在我刚刚尝试的前面（所以 @: ShowClarify(); 和 @: ShowQuote(); ）

【参考方案2】：

如果您将任何参数传递给 JavaScript 函数，则必须用引号 ('') 将其括起来。

foreach (var item in files)
    
        <script type="text/javascript">
            Attachment(**'@item.FileName'**, **'@item.Size'**);
        </script>  
     

【讨论】：

您应该使用代码格式选项（选择代码，Ctrl-k）以确保您的代码以您希望它在答案中的方式显示。此外，最好使用示例中问题中的内容来更清楚地说明您的意思。