javascript - 如何根据具有 url id 作为属性的 li 点击到达新位置

Question

嗨，我有一些代码，例如：

<ul>
  <li data-id="1"></li>
  <li data-id="2"></li>
  <li data-id="3"></li>
</ul>

在脚本中：

$('li').click(function () {

            window.location.href = '@Url.Action("View", "People", new { id = $(this).data('id')})';
        });

我想要实现的是，当用户单击列表项时，它会重定向到：

人/视图/id

其中 id 是列表项的 id 属性。

麻烦的是我无法弄清楚代码有什么问题。

$(this).data('id') 部分有一个波浪形的下划线并表示：

',' 或 '}' 预期。

抱歉，这可能是一个非常愚蠢的问题，但我无法正确解决。

Answer 1

您不能混合服务器和客户端代码。他们不相互影响。

我猜你需要做这样的事情：

window.location.href = '@Url.Action("View", "People")' + "/" + $(this).data('id');

Answer 2

Url.Action 方法在 javascript 中不起作用。它是服务器端 MVC 的一部分。您可以直接在 MVC 视图中生成链接，例如：

<ul>
  <li data-id="1"><a href="@Url.Action("View", "People", new { id = 1})">...</a></li>
  <li data-id="2"><a href="@Url.Action("View", "People", new { id = 2})">...</a></li>
  <li data-id="3"><a href="@Url.Action("View", "People", new { id = 3})">...</a></li>
</ul>

data-id 属性可能会过时。如果您仍然需要 id 客户端，我建议您使用隐藏字段。

Answer 3

您可以使用下面的代码，

window.location.href = '@Url.Action("View", "People", new { id = $(this).attr("data-id") })';