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

見演示