c# - 想要来自 for 循环的 @Html.HiddenFor 不同的值

Question

每次用户单击图像时，如何在我的 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() }     
      });
  });
});

Answer 1

您可以将帖子 ID 呈现为 data attribute并使用 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" />   
}

jQuery:

$(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。

但是，我们可以做得更好...

1. 考虑使用 .on处理对用 .Edit 装饰的元素的所有当前和 future 的点击事件。如果带有 .Edit 的新元素稍后可能会添加到 DOM，这将很有用，因为它们将自动包含在内。

    $(document).on('click', '.Edit', function() { /* ... */ });
   

2. 考虑使用语义上有意义的标记，并将图像包裹在 anchor 中，而不是使 img 可点击。然后，只需将 href 添加到帖子 URL 的 anchor 。然后您可以取消数据属性并简单地进行 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"  
         });
     });
   });