2009-10-15 15 views
10

मेरे पास एक एएसपी.NET रिपेटर है जो लिंकबटन को हटाए गए आइटमों की एक सूची दिखाता है।JQuery DIalog और ASP.NET पुनरावर्तक

मैं पुष्टिकरण के लिए JQuery संवाद दिखाने के लिए हटाएं लिंकबटन सेट करना चाहता हूं। यदि "ठीक" बटन क्लिक किया गया है, तो मैं पोस्टबैक करना चाहता हूं।

स्पष्ट समस्या यह है कि दोहराने वाले प्रत्येक लिंकबटन में इसकी अपनी आईडी होगी और मैं संवाद के लिए सभी जावास्क्रिप्ट को डुप्लिकेट नहीं करना चाहता हूं।

सुझाव?

उत्तर

13

समाधान इतना आसान नहीं है। JQuery UI संवाद के ठीक बटन दबाए जाने के बाद आपके पास मूल कॉलबैक फ़ंक्शन को कॉल करने की क्षमता होनी चाहिए।

सबसे पहले आप संवाद को दिखाने के लिए एक सामान्यीकृत js समारोह की जरूरत है: मैं

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

की तरह एक div की उपस्थिति की अपेक्षा की ग # पर

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" 
     } 
    }); 
} 

कोड-पीछे आप पिछले ग्राहक पंजीकरण कराना होगा फ़ंक्शन, मूल एएसपीनेट कॉलबैक पास करना पैरामीटर के रूप में आपके नियंत्रण का कार्य (I सामान्यीकृत):

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: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???"); 
    } 
} 

मुझे आशा है कि इस मदद करता है

अब, पुनरावर्तक ItemDataBound पर, नियंत्रण है कि हटाने पर अमल करते हैं और इस समारोह के लिए इसे पारित पुनः प्राप्त।

+0

एक्सेलेंट ने जवाब दिया है कि यह मेरे से अधिक समझने योग्य और क्लीनर उत्तर है! –

+0

धन्यवाद, मैंने बहुत संभव सामान्यीकरण करने की कोशिश की है। मैं एक कस्टम नियंत्रण पर समाधान डालने पर काम कर रहा हूं, वास्तविक एएसपी ओवरराइड कर रहा हूं: बटन – tanathos

+0

इसे कहीं भी पोस्ट करें, और यहां एक नोट दें! –

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

और

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

है कि आप एक साथ सभी लिंक बटन के साथ काम करने के लिए अनुमति देगा।

1

आप इस तरह यह कर सकते हैं:

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

या मुझे लगता है कि आप भी इस शामिल नहीं हो सका: ConfirmDelete विधि में

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

, आप अपने jQuery संवाद की पुष्टि परिभाषित कर सकते हैं

+0

कहाँ Jquery संवाद है? –

+0

यह सवाल नहीं था। मुझे लगता है कि वह बिना किसी सहायता के इस हिस्से को बना सकता है;) – k0ni

+0

हाँ, लेकिन आप इसका उपयोग नहीं करते हैं और –

0

हाई,
सबसे पहले आपको Jquery Dialog या अन्य क्लाइन्ससाइड संवादों का उपयोग करना चाहिए, यह अधिक कूलर है।

आपके पास jquery संवाद पॉपअप को आमंत्रित करने के लिए पृष्ठ पर एक HTML तत्व होना चाहिए।

<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 वाक्य डाल पर । आप उपरोक्त लिंक से जानकारी प्राप्त कर सकते हैं।

फ़ंक्शन झूठा लौट रहा है और इसके कारण यह सर्वर साइड कोड (async पोस्टबैक) के निष्पादन को अवरुद्ध करता है।
बटन दिखना चाहिए:

<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 संपत्ति पर मैं सेट आइटम जो की आईडी पुनरावर्तक से आबद्ध कर रहे हैं।
btnConfirm_Click घटना आप इस परमाटर के लिए acces है पर इस तरह से

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 (स्रोत, param)

जैसा दिखेगायह एक जावास्क्रिप्ट विधि है जिसमें आप आसानी से उत्साहित हो सकते हैं, और आपके पास पोस्टबैक का पूर्ण नियंत्रण है। क्लाइंटसाइड पर आप यह तय कर सकते हैं कि इस पोस्टबैक ईवेंट को कॉल करना है या नहीं।


पुनश्च: कुछ स्पष्ट नहीं पोस्ट यहाँ एक सवाल है और मैं इस सवाल का जवाब अपडेट करेगा हैं।

0
<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> 
+0

हैलो सर, मैंने एक तर्क दिया और कोड के रूप में लिखा है। कृपया कोशिश करें और इसका उपयोग करें – user191019

+0

jquery संवाद कहां है? –

0

प्रश्न का जवाब निश्चित रूप से तानाथोस द्वारा दिया गया है, लेकिन मेरे पास एक और विकल्प है जो कोड-बैक में स्क्रिप्टिंग से बचता है यदि आप इतने इच्छुक हैं। मैंने डिस्प्ले का उपयोग करके एएसपी डिलीट बटन को छुपाया: कोई भी नहीं और एक डिलीट बटन जोड़ा जो पुष्टिकरण संवाद को आमंत्रित करता है और हटाए जाने की पुष्टि होने पर छुपा एएसपी डिलीट बटन पर क्लिक करता है।

पुनरावर्तक में 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> 

सीएसएस:

.delete-button 
{ 
    display: none; 
} 

जावास्क्रिप्ट:

// 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"); 
}); 
संबंधित मुद्दे