如何在 mvc 视图中将剃刀值传递给 jquery 函数

Posted 2023-02-25

【中文标题】如何在 mvc 视图中将剃刀值传递给 jquery 函数

【英文标题】：how to pass a razor value to a jquery function, in an mvc view

【发布时间】：2013-08-21 02:44:33

【问题描述】：

所以我尝试使用剃刀“@”表示法（在 MVC-4 视图中）将参数传递给 javascript 函数，但出现语法错误：“未终止的字符串常量”

我应该用另一种方式来写这个吗？

@foreach (var item in Model)

 ...
    <input type="button" value="Assign" onclick="AssignButtonClicked('@item.ID')" />

我使用了与此答案相同的语法https://***.com/a/5179316/1662619

编辑：

只是语法错误，功能仍然有效

【问题讨论】：

解决方案：- 去掉 @item.ID 周围的单引号

最好在javascript中使用反引号（`）而不是单引号。这个答案完全描述了它。 backticks in razor pages

【参考方案1】：

如果可以使用JQuery.data()

<input type="button" value="Assign" onclick="AssignButtonClicked(this)" 
       data-assigned-id="@item.ID" />

还可以使用

获取

function AssignButtonClicked(elem)
     var id= $(elem).data('assigned-id');

【参考方案2】：

试试这个

 <input type="button" value="Assign"
   onclick="@("AssignButtonClicked('"+item.ID+"')")"  />

【讨论】：

这个答案对我有用，尽管实际上提交这段代码非常痛苦，因为可读性是-10！

【参考方案3】：

试试这个，

 <input type="button" value="Assign" onclick="AssignButtonClicked(@item.ID);" />

脚本

<script type="text/javascript">

 function AssignButtonClicked(obj) 
        alert(obj);
        return false;
    
</script>

【讨论】：

@Jim Barton 它在我的项目上完美运行。你能显示一些foreach 循环的代码吗？

输入标签在 内，如果这有什么不同？循环的其余部分仅由

@html.DisplayFor(modelItem => item.Forename) 行等组成。

@Jim Barton 未终止的字符串常量是因为缺少右引号。很确定你在语法上犯了一些错误。检查你的 table 和你的 foreach 循环我认为你错过了一些tr,td 或 some tag.

【参考方案4】：

作为替代方案，您可以使用其他方式在您的 jQuery 函数中获取 @item.ID。只需添加 hidden span 并在您的函数中获取它的值。

说，你有清单：

<ul>
@foreach (var item in Model)

 ...
   <li> <input type="button" value="Assign" onclick="AssignButtonClicked()" />
        <span class="hidenID">@item.ID</span>
</li>

</ul>

比在你的脚本中添加：

<script>
$(document).ready(function()
$('.hidenID').hide() //**hide your span
);

function AssignButtonClicked()

...
var id = $(this).closest('li').find('.hidenID').text();
...


</script>

但在我看来，jQuery 更好的方法如下：

    <ul>
        @foreach (var item in Model)
        
         ...
           <li> <input type="button" value="Assign" class="button" />
                <span class="hidenID">@item.ID</span>
        </li>
        
        </ul>
    <script>
        $(document).ready(function()
        $('.hidenID').hide() //**hide your span
        );

        $(function()
         $('.button').click(function()
        ...
         var id = $(this).closest('li').find('.hidenID').text();
        ...
        
    );

);

    </script>

【参考方案5】：

你尝试过：

<input type="button" value="Assign" onclick="AssignButtonClicked('@item.ID');" />

我在javascript函数调用AssignButtonClicked('@item.ID');的末尾添加了一个分号

【讨论】：

语法错误。我的是onclick = "javascript:alert('@Model.username.ToString()');"

【参考方案6】：

为避免此类问题，您可以在 c# 代码部分构建所有 js 函数调用。

代替：

<input type="button" value="Assign" onclick="AssignButtonClicked('@item.ID')" />

用途：

@
  var assignFunctionCall = "AssignButtonClicked(" + item.ID + ")";

<input type="button" value="Assign" onclick="@assignFunctionCall " />