MVC列表中的jQuery ui对话框

Question

我有一个列表表，显示来自数据库的一些信息。

我正在尝试做的是检查项目状态是否为1，以及是否存在注释以显示一个小图标，用户将在其中单击并查看该项目的特定注释。

因此，在清单表中，似乎可以根据上述标准很好地显示该图标，但是当我单击特定的清单时，它会打开所有对话框，并带有所有其他具有相同项目状态的清单的注释，而不是我选择的状态。

您能帮我解决我做错了什么吗？

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.BookingId)
        </td>
        <td>
            <a href="@Url.Action("ItemDetails", new {id=item.ItemId })" title="@item.Item.ItemDescription">
            @Html.DisplayFor(modelItem => item.Item.ItemName)
                </a>
        </td>
          <td>
            @Html.DisplayFor(modelItem => item.StartDate)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.EndDate)
        </td>
         <td>
            @Html.DisplayFor(modelItem => item.RequestDate)
        </td>
        @if (item.StatusCodeId == 1)
        {
         <td style="color:#DD7500">

            @Html.DisplayFor(modelItem => item.StatusCode.StatusCodeName)

             @if (item.Comments != null)
             {                                 
              <img class="orangeclicker" style="margin-left:3px;display:inline;margin-bottom:-3px;cursor: pointer;" title="Tutor Comments" src="~/Images/chat_icon.gif" /> 

                      <div class="orangedialog" title="Tutor Comments"> 
                     <p> @item.Comments</p>
                     </div>                          
             }            
        </td>
        }
                }                      
    </tr>   
}   
</table>  
<script>  $(function ()
  {    
      $(" .orangedialog").dialog({
          autoOpen: false,
          show: { effect: "blind", duration: 1000 },
          hide: { effect: "explode", duration: 1000 },
          buttons: {
              Close: function () {
                  $(this).dialog("close");
              }
          }
      });

      $('.orangeclicker').live("click", function () {
         $(".orangedialog").dialog("open");        

      });         
  });

</script>

Answer 1

它们都具有相同的id或class （因为它们在foreach语句中呈现）

您可以通过将类或id与list的index相结合来增加差异

我前面没有代码，但我也认为类似的方法会起作用。

更新：

 $('.orangeclicker').live("click", function (e) {
     alert("check"); // if this fires at click, the problem is somewhere else
     var target= $(e.currentTarget);
     target.next().dialog("open");        

  });         

Answer 2

您应该尝试这样：

首先；您必须在具有相同类的表的每一行中创建链接。

<a class="comments">Comments</a>

第二; 将页面更新为：

<div id="dialog-details" style="display: none">
  <p>
   @if (item.Comments != null)
         {                                 
          <img class="orangeclicker" style="margin-left:3px;display:inline;margin-bottom:-3px;cursor: pointer;" title="Tutor Comments" src="~/Images/chat_icon.gif" /> 

                  <div class="orangedialog" title="Tutor Comments"> 
                 <p> @item.Comments</p>
                 </div>                          
         }   
   </p>
 </div>

第三次将您的脚本更新为：

    $('.comments').click(function () {
       $("#dialog-details").dialog('open');
     return false;
});
  $("#dialog-details").dialog({
    autoOpen: false,
    resizable: false,
    height: 170,
    width: 350,
    show: { effect: 'drop', direction: "up" },
    modal: true,
    draggable: true,
    open: function (event, ui) {
        $(".ui-dialog-titlebar-close").hide();

    },
    buttons: {

        "Close": function () {
            $(this).dialog("close");
        }
    }
});

</script>

Answer 3

您应该使用$(this).next().next().find(".orangedialog")查找相关元素。

$('.orangeclicker').on("click", function (e) {
    $element = $(this).next().next().find(".orangedialog");
    $element.dialog("open"); 
});

更新资料

使用on()代替live()

见演示