JQuery DIalog和ASP.NET直放站

Question

我有一個ASP.NET中繼器，顯示刪除LinkBut​​ton的項目列表。

我想設置Delete LinkBut​​tons來顯示一個JQuery對話框來進行確認。如果單擊「確定」按鈕，我想要執行回發。

顯而易見的問題是，中繼器中的每個LinkBut​​ton都有自己的ID，我不想爲對話框重複所有的JavaScript。

對此提出建議？

Answer 1

解決方案並非如此簡單。按下jQuery UI對話框的確定​​按鈕後，您必須能夠調用原始回調函數。

首先你需要一個通用的js函數來顯示對話框：

function showConfirmRequest(callBackFunction, title, content) 
{ 
    $("#divConfirm").html(content).dialog({ 
     autoOpen: true, 
     modal: true, 
     title: title, 
     draggable: true, 
     resizable: false, 
     close: function(event, ui) { $(this).dialog("destroy"); }, 
     buttons: { 
      'Ok': function() { callBackFunction(); }, 
      'Cancel': function() { 
       $(this).dialog("destroy"); 
      } 
     }, 
     overlay: { 
      opacity: 0.45, 
      background: "black" 
     } 
    }); 
} 

我認爲一個div存在類似

<div id="divConfirm"></div> 

在C＃代碼隱藏，你必須註冊以前的客戶端函數，傳遞您的控件的原始asp.net回調函數作爲參數（我推廣）：

protected void AddConfirmRequest(WebControl control, string title, string message) 
{ 
    string postBackReference = Page.ClientScript.GetPostBackEventReference(control, String.Empty); 
    string function = String.Format("javascript:showConfirmRequest(function() {{ {0} }}, '{1}', '{2}'); return false;", 
            postBackReference, 
            title, 
            message); 
    control.Attributes.Add("onclick", function); 
} 

通過GetPostBackEventReference方法，您可以檢索asp.net分配給控件的回發函數。

現在，直放站的ItemDataBound，檢索執行刪除，並把它傳遞給這個函數控制：

<asp:Repeater ID="repeater" runat="server" OnItemDataBound="repeater_OnItemDataBound"> 
    ... 
    <ItemTemplate> 
     ... 
     <asp:Button ID="btnDelete" runat="server" Text="Delete" /> 
     ... 
    </ItemTemplate> 
</asp:Repeater> 

，代碼：

protected void repeater_OnItemDataBound(object sender, RepeaterItemEventArgs e) 
{ 
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) 
    { 
     WebControl btnDelete = ((WebControl)e.Item.FindControl("btnDelete")); 
     AddConfirmRequest(btnDelete, "Confirm delete", "Are you sure? Really???"); 
    } 
} 

我希望這有助於。

Answer 2

<asp:GridView ... CssClass="mygridview"></asp:GridView> 

和

$('table.mygridview td a').whatever() 

這將讓你與所有的鏈接按鈕同時工作。

Answer 3

你可以這樣說：

<asp:Repeater ID="Repeater1" runat="server"> 
    <ItemTemplate> 
     ... 
     <asp:LinkButton OnClick="DoSomething" OnClientClick="return ConfirmDelete();" ID="btnConfirm" runat="server" CssClass="button" Text="Delete"></asp:LinkButton><br /><br /> 
    </ItemTemplate> 
</asp:Repeater> 

<script> 
    function ConfirmDelete() { 
     return confirm("Delete this record?"); 
    } 
</script> 

或者我想你也可以把它像這樣：

<script> 
    $(function() { 
     $(".button").click(function() { 
      return confirm("Delete this record?"); 
     }); 
    }); 
</script> 

在ConfirmDelete方法，你可以定義你的jQuery的確認對話框

Answer 4

Hy，
首先，您應該使用Jquery Dialog或其他clienside對話框，它更酷。

您應該在頁面上有一個html元素來調用Jquery對話框彈出窗口。

<div class="Popup"></div> 

<script> 
    var confirm = false; 
    function ConfirmDelete(doPostback) { 
     $(".Popup").dialog(){ /* threat the dialog result , set confirm variable */ }; 
     if(confirm) { 
      __doPostback(); } 
     else return false; 
    } 
</script> 

在這裏我把comented一句話就可以把代碼來處理對話結果的部分。 你可以從上面的鏈接中找到信息。

該函數返回false，並因爲它阻止了服務器端代碼（異步回發）的執行。
按鈕應該是這樣的：

<asp:Repeater ID="Repeater1" runat="server"> 
       <ItemTemplate> 
    <asp:LinkButton OnClientClick="ConirmDelete(<#%GetPostbackReference()%>)" CommandArgument = "<%# DataBinder.Eval(Container.DataItem, "Id") %>" OnClick="btnConfirm_Click" ID="btnConfirm" runat="server"></asp:LinkButton> 
    </ItemTemplate> 
</asp:Repeater> 

在CommandArgument屬性我設置的項目至極的ID都綁定到中繼器。
這樣對你查看在此paramater的btnConfirm_Click事件

void btnConfirm_Click(object sender, CommandEventArgs e) 
{ 
    e.CommandArgument -> you will find the id an you can execute the delete 
} 

你應該在後面的代碼：

protected string GetPostbackReference() 
{  
return Page.ClientScript.GetPostBackEventReference(btnConfirm, null); 
} 

此函數被調用的結合的元素，並返回當前控件的回發方法，這將看起來像__doPostback（源，參數）

這是一個javascript方法，你可以執行easilly，並且你可以完全控制回發。 在客戶端，您可以決定是否調用此回發事件。

---

PS：如果有什麼不清楚的後這裏的問題，我會更新的答案。

Answer 5

<asp:Repeater ID="Repeater1" runat="server"> 
      <ItemTemplate> 
... 
       <asp:LinkButton OnClick="DoSomething" OnClientClick="return ConfirmDelete();" ID="btnConfirm" runat="server" CssClass="button" Text="Delete"></asp:LinkButton><br /><br /> 
      </ItemTemplate> 
     </asp:Repeater> 
<script> 
     function ConfirmDelete() { 
      return confirm("Delete this record?"); 
     } 
</script> 

Answer 6

這個問題肯定是由tanathos回答的，但我有另一個選項可以避免在代碼隱藏中使用腳本，如果您非常喜歡。我只是使用display：none隱藏了asp刪除按鈕，並添加了一個刪除按鈕，調用確認對話框，並在確認刪除後單擊隱藏的asp刪除按鈕。

在中繼器的HTML：

<ItemTemplate> 
... 
<td> 
    <a href="#" class="dummy-delete-button">Delete</a> 
    <asp:Button ID="DeletePolicyButton" runat="server" OnCommand="OnDeleteCommand" CommandArgument="Argument" Text="Delete" CssClass="delete-button" /> 
</td> 
... 
</ItemTemplate> 

的CSS：

.delete-button 
{ 
    display: none; 
} 

的JavaScript：

// make the dummy button look like a button 
$("a.dummy-delete-button").button({ 
    icons: { 
     primary: "ui-icon-trash" 
    } 
}); 

// create the dialog 
var deleteDialog = $('<div>Are you sure you want to remove this policy?</div>') 
    .dialog({ 
     autoOpen: false, 
     modal: true, 
     title: 'Delete Policy' 
    }); 

// handle click event to dummy button 
$("a.dummy-delete-button").click(function (e) { 
    // don't follow the href of the dummy button 
    e.preventDefault(); 
    // get a reference to the real ASP delete button 
    var button = $(this).closest('td').find('.dummy-delete-button'); 
    deleteDialog.dialog({ 
     buttons: { 
      // handle delete. Note: have to defer actual button click until after close 
      // because we can't click the button while the modal dialog is open. 
      "Delete": function() { deleteDialog.bind("dialogclose", function() { button.click() }); $(this).dialog("close"); }, 
      // handle close 
      "Cancel": function() { $(this).dialog("close"); } 
     } 
    }); 

    deleteDialog.dialog("open"); 
});