如何在MVC视图中将剃刀值传递给jQuery函数

Question

所以我正在尝试在一个MVC-4视图中使用razor '@'符号（）向JavaScript函数传递参数，但我收到了“未终止字符串常量”的语法错误提示。

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

@foreach (var item in Model)
{
 ...
    <input type="button" value="Assign" onclick="AssignButtonClicked('@item.ID')" />
}

我使用了与此答案相同的语法 https://dev59.com/W1TTa4cB1Zd3GeqPwdsQ#5179316

编辑：

这只是一个语法错误，功能仍然有效。

- Jimmy

---

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

在JavaScript中，使用反引号(`)比单引号更好。这个答案完全描述了它。Razor页面中的反引号。 - Iman Bahrampour

Answer 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');
}

- Satpal

Answer 2

试一试

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

- Amit

---

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

Answer 3

尝试这个：

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

脚本

<script type="text/javascript">

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

- Jaimin

---

@Jim Barton，它在我的项目中完美运行。你能展示一些foreach循环的代码吗？ - Jaimin

输入标签位于<tr> <td> <input... /> </td> </tr>中，如果这有所不同？循环的其余部分只包含<td> @Html.DisplayFor(modelItem => item.Forename)</td>行等。 - Jimmy

@Jim Barton，未终止的字符串常量是因为缺少闭合引号。我很确定你在语法上犯了一些错误。请检查你的“table”和“foreach”循环，我认为你可能遗漏了一些“tr”，“td”或“某些标签”。 - Jaimin

Answer 4

作为替代方案，您可以使用另一种方法在jQuery函数中获取@item.ID。只需添加具有该值的隐藏并在函数中获取其值。

例如，您有一个列表：

<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>

- Andrey Gubal

Answer 5

为了避免这种问题，您可以在C#代码部分中构建所有的js函数调用。

而不是：

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

使用：

@{
  var assignFunctionCall = "AssignButtonClicked(" + item.ID + ")";
}
<input type="button" value="Assign" onclick="@assignFunctionCall " />

- Bbone

Answer 6

你尝试使用：

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

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

- Daniele

---

语法错误。正确的应该是 onclick="javascript:alert('@Model.username.ToString()');" - Dylan Czenski