想要与 @Html 不同的值
本文关键字:@Html | 更新日期: 2023-09-27 18:32:10
每次用户单击图像时,我如何在javascript中获取确切的"PostId"的值
for (int i = 0; i < Model.Count; i++)
{
<img src="/images/icon_edit.gif" width="22" height="19" class="Edit" itemid="post" />
@Html.HiddenFor(x => x[i].PostId, new { @class = "postnew" })
}
.JS:
$(document).ready(function () {
$('.Edit').click(function () {
alert($("#post").val());
var params = { uname: $(this).val() };
$.ajax({
url: "/Profile/Post",
type: "Get",
data: { id: $("#post").val() }
});
});
});
您可以将帖子 ID 呈现为数据属性并使用 jQuery 访问该属性。
@for (int i = 0; i < Model.Count; i++)
{
<img src="/images/icon_edit.gif" width="22" height="19" class="Edit" data-post-id="@x[i].PostId" />
}
j查询:
$(document).ready(function () {
$('.Edit').click(function () {
var $this = $(this), id = $this.data('postId');
$.ajax({
url: "/Profile/Post",
type: "Get",
data: { id: id }
});
});
});
生成的img
标记将如下所示:
<img src... data-post-id="1" ... />
使用 jQuery,您可以使用 .data()
读取属性。用连字符分隔的名称将被驼峰化,因此postId
.
但是,我们可以做得更好...
考虑使用
.on
处理所有当前和将来的点击事件,以处理用.Edit
修饰的元素。如果以后可能会将具有.Edit
的新元素添加到 DOM 中,这将非常有用,因为它们将自动包含在内。$(document).on('click', '.Edit', function() { /* ... */ });
请考虑使用语义有意义的标记,并将图像包装在锚点中,而不是使 img 可单击。然后,只需将锚点的
href
添加到帖子的 URL 中即可。然后,您可以取消数据属性,而只是您的 AJAX 调用。@for (int i = 0; i < Model.Count; i++) { <a href="@Url.Action("Post", "Profile", new{id = x[i].PostId})" class="Edit"><img src="/images/icon_edit.gif" width="22" height="19" /></a> } $(document).ready(function () { $(document).on('click', '.Edit', function () { var url = $(this).attr('href'); $.ajax({ url: url, type: "Get" }); }); });
带有 data 属性的解决方案很好,但如果你想使用隐藏字段,你可以使用 jQuery next() 选择器。
$(document).ready(function () {
$('.Edit').click(function () {
// the 'next' hidden field for the img
var id = $(this).next().val();
$.ajax({
url: "/Profile/Post",
type: "GET",
data: { id: id }
});
});
});