MVC3 - 只有第一行鏈接與Jquery Modal Dialog很好地配合使用

使用MVC3，Razor，Jquery，Javascript。以下代碼循環顯示帶有字段和鏈接的表結構。每行上的鏈接觸發一個Jquery模式對話框，將彈出的部分視圖頁面顯示出來。但彈出式對話框僅適用於第一行......從第二行開始的鏈接，向下打開頁面作爲完整的網頁，而不是彈出式模式對話框。如何解決這個問題..感謝您的幫助。MVC3 - 只有第一行鏈接與Jquery Modal Dialog很好地配合使用

@foreach (var item in Model) { 
<tr> 
    <td> 
     @Html.DisplayFor(modelItem => item.Title) 
    </td> 
    <td> 
     @Html.DisplayFor(modelItem => item.Category) 
    </td> 

    <td> 
     @Html.ActionLink("Edit", "Edit", new { id = item.ID }, new { id = "modalEdit" }) |    

    </td> 
</tr>

這是Jquery模式對話框的代碼。

<script type="text/javascript"> 
$(document).ready(function() { 
    //initialize the dialog 
    $("#resultEdit").dialog({ modal: true, width: 300, resizable: true, position: 'center', title: 'Edit Information', autoOpen: false, 
    open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); } 

    }); 
}); 

$(function() { 
    $('#modalEdit').click(function() { 
     //load the content from this.href, then turn it into a dialog. 
     $('#resultEdit').load(this.href).dialog('open'); 
     return false; 
    }); 
});

來源

2011-06-13 ZVenue

很可能是因爲所有的編輯鏈接都有相同的ID！

這將使jQuery的行爲高度不可預測！

給你的編輯鏈接共享類，而不是像這樣：

@Html.ActionLink("Edit", "Edit", new { id = item.ID }, new { @class = "modalEdit" })

和您的選擇更改爲：

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

來源

2011-06-13 17:25:47 Patricia

你剛纔打我吧！請注意，因爲'class'是C＃中的保留字，所以在添加class html屬性時，必須用'@'符號作爲前綴。例如。 'new {@class =「modalEdit」}' – Charlino 2011-06-13 17:28:30

謝謝！那工作..除了類需要是@class。（來自Charlinos迴應） – ZVenue 2011-06-13 17:33:22

正確！我使用mvc 2和vb.net，所以語法有點不同:)很高興它的工作！ – Patricia 2011-06-13 18:27:36

你不能有相同ID的多個元素。
改爲使用類名。

來源

2011-06-13 17:24:44 SLaks

嘗試改變鏈接使用一個類，而不是一個ID。

例如

@Html.ActionLink("Edit", "Edit", new { id = item.ID }, new { @class = "modalEdit" })

和

$('.modalEdit').click(function() ...

來源

2011-06-13 17:26:20 Charlino

非常感謝..感謝您的幫助。 – ZVenue 2011-06-13 17:34:12

MVC3 - 只有第一行鏈接與Jquery Modal Dialog很好地配合使用

回答

相關問題