2011-04-14 18 views
8

मैं कोडबेहिंड से एक jQuery UI संवाद दिखाना चाहता हूं और पोस्टबैक के बाद इसे रीफ्रेश करने की आवश्यकता है।jQuery संवाद-पोस्टबैक लेकिन अपडेट पैनेल अपडेट नहीं किया गया

संवाद फ़िल्टर करने और डेटा खोजने के लिए एक नियंत्रण है। तो उपयोगकर्ता DropDownLists से चयन करता है और टेक्स्टबॉक्स में टेक्स्ट दर्ज करता है, एक "लागू-बटन" पर क्लिक करता है, एक एसिंक्रोनस पोस्टबैक होता है, डेटा उपयोगकर्ता के चयन के अनुसार फ़िल्टर हो जाता है और परिणाम ग्रिड व्यू में दिखाया जाएगा। इसलिए मुझे GridView के आस-पास UpdatePanel को अपडेट करने की आवश्यकता है।

अतुल्यकालिक पोस्टबैक इन कड़ियों की मदद से काम करता है:

(मूल रूप से dlg.parent().appendTo(jQuery("form:first")); -Solution)

समस्या: मैं अद्यतन नहीं कर सकते UpdatePodeel न तो UpdateMode = "हमेशा" और मैन्युअल के साथ UpdatePanel.Update() के माध्यम से codebehind से ly। मुझे लगता है कि यह संवाद के साथ कुछ है जो UpdatePanel के अंदर नहीं है या कुछ समान है। उम्मीद है कि कोई मेरी मदद कर सकता है।

कुछ स्रोत:

function createChargeFilterDialog() { 
    //setup dialog 
    $('#Dialog_ChargeFilter').dialog({ 
     modal: true, 
     resizable: false, 
     autoOpen: false, 
     draggable: true, 
     hide: "Drop", 
     width: 850, 
     height: 600, 
     position: "center", 
     title: "Charge-Filter", 
     buttons: { 
      "Close": function() { 
       $(this).dialog("close"); 
      } 
     }, 
     open: function (type, data) { 
      $(this).parent().appendTo(jQuery("form:first")) 
     }, 
     close: function (type, data) { 
     } 
    }); 
} 

यह codebehind से कहा जाता हो जाता है जब BtnShowDialog (बाहर jQuery-संवाद) के माध्यम से

AjaxControlToolkit.ToolkitScriptManager.RegisterStartupScript _ 
      (Me.Page, GetType(Page), "showChargeFilterDialog", "createChargeFilterDialog();$('#Dialog_ChargeFilter').dialog('open');", True) 

अद्यतन क्लिक किया जाता है: मैं भी एक समस्या में देखा है पोस्टबैक-वैल्यू। सभी टेक्स्टबॉक्स यदि खाली हैं या कोई अल्पविराम नहीं है। यह इंगित करता है कि नियंत्रण कई बार प्रदान किया जाता है: http://www.componentart.com/community/forums/t/60999.aspx

मुझे यकीन है कि दोनों मुद्दे संबंधित हैं। इसके सभी नियंत्रणों के साथ पूरा संवाद प्रत्येक एसिंक्रोनस पोस्टबैक में पुनर्निर्मित किया जाएगा, इसलिए सभी नियंत्रण नाम डीओएम में कई बार मौजूद हैं (व्यूस्टेट कॉमा-एपेंडिंग समस्या उत्पन्न करना)। नियंत्रण केवल फ़ायरबग/आईई डेवपर टूलबार में दिखाई देता है और HTML-स्रोत में नहीं, इसलिए मुझे लगता है कि jQuery इन समस्याओं का कारण बनता है। मैं कैसे डायलॉग कर सकता हूं डायलॉग या मैं कैसे मनोरंजन कर सकता हूं (जांचें कि पहले से मौजूद है) संवाद? क्या ऐसा इसलिए है क्योंकि संवाद एक अद्यतन पैनेल के अंदर है या क्योंकि यह UpdatePanel के बाहर (जावास्क्रिप्ट के माध्यम से) स्थानांतरित हो गया है?

async पोस्टबैक से पहले संवाद को नष्ट समस्या का समाधान नहीं करता है क्योंकि संवाद बस गायब हो जाएगा:

<asp:Button ID="BtnApplyFilter" OnClientClick="$('#Dialog_ChargeFilter').dialog('destroy');" ... /> 

आपका मदद बहुत सराहना कर रहा है।


समाधान: मैं AjaxControlToolkit से ModalPopupExtender उपयोग करने के साथ समाप्त हो गया। कुछ छोटे मुद्दों के बाद यह एसिंक्रोनस पोस्टबैक के साथ एक आकर्षण की तरह काम कर रहा है (यदि आप पॉपअप को दिखाना चाहते हैं तो प्रत्येक कोड-बैक फ़ंक्शन में MPE.Show() पर कॉल करना न भूलें)। अगर कोई दिलचस्पी लेता है तो मैं और कोड जोड़ सकता हूं।

+0

हैलो टिम। मेरी भी यही समस्या है। मुझे आश्चर्य है कि क्या आपको अंततः इसके लिए एक संभावित समाधान मिला। मैंने पूरे ऐप में jquery संवाद लागू किया है, लेकिन मुझे इस संवाद में से 1 में 2 ड्रॉपडाउनलिस्ट के बीच बाध्यकारी करने की आवश्यकता है। इसलिए, मैं अंतिम विकल्प के रूप में ModalPopUpExtender में बदल जाऊंगा। कृपया, मेरे प्रश्न पर एक नज़र डालें: http://stackoverflow.com/questions/8082921/dropdownlist- चयनित- इंडेक्स-changed-event-inside-jquery-dialog। विनम्र, – aleafonso

उत्तर

1

मुझे यकीन है कि नहीं कर रहा हूँ, लेकिन यह शायद है अपने काम BZ सही ans मुझे फार्म जब मैं उपयोग कर रहा था

AjaxControlToolkit.ToolkitScriptManager.RegisterStartupScript 

इस कोशिश?

ScriptManager.RegisterClientScriptBlock(Me.Page, GetType(Page), "showChargeFilterDialog", "createChargeFilterDialog();$('#Dialog_ChargeFilter').dialog('open');", True) 
+0

धन्यवाद, लेकिन यह भी काम नहीं करता है। सामग्री वही होगी हालांकि मैंने इसे कोडबेइंड में बदल दिया है और 'UpdatePanel.Update() 'कहा है। –

5

मुझे लगता है यह संवाद के अंदर UpdatePanel या कुछ इसी तरह किया जा रहा है नहीं के साथ कुछ करने के लिए है।

मैंने पोस्टबैक-मानों में भी एक समस्या देखी है। सभी टेक्स्टबॉक्स यदि खाली हैं या कोई अल्पविराम नहीं है।

आप दोनों मायने में सही हैं। समस्या का क्रूक्स यह है कि स्क्रिप्ट प्रबंधक "सोचता है" यह एक तत्व को अद्यतन करना है जिसे jQuery वास्तव में पृष्ठ पर एक अलग स्थान पर ले जाया गया है, जिसके परिणामस्वरूप तत्व की कई प्रतियां और आपके द्वारा उल्लिखित समस्याओं का परिणाम हुआ है।

मैंने नेस्टेड अपडेटपैनल्स का उपयोग करके यह समस्या देखी है, लेकिन यह अन्य परिदृश्यों में भी हो सकती है।

यह एक समस्या है जिसके लिए कामकाज गन्दा हैं।

विकल्प 1 - jQuery UI के लिए स्रोत कोड बदलें। मुझे जल्दी फिक्स के साथ कोई भाग्य नहीं था; पूरी प्लगइन को फिर से लिखने से कम, मुझे डोम को पुन: व्यवस्थित किए बिना संवाद सही तरीके से काम करना आसान नहीं था। साथ ही, उस मार्ग के साथ, अब आप स्रोत कोड "स्वयं" हैं क्योंकि आपने इसे संशोधित किया है।

विकल्प 2 - जब भी पृष्ठ को आंशिक रूप से डुप्लिकेट तत्वों को निकालने के लिए प्रस्तुत किया जाता है तो डीओएम समायोजित करें। आप नकली डुप्लिकेट तत्व को साफ करने के लिए कुछ अतिरिक्त स्क्रिप्ट आउटपुट कर सकते हैं। मुझे इस दृष्टिकोण को पसंद नहीं है क्योंकि यह स्क्रिप्ट चलाने तक डीओएम को अमान्य स्थिति में रहने की अनुमति देता है।

विकल्प 3 - अद्यतनपैनल के प्रतिपादन को मैन्युअल रूप से ओवरराइड करें। कोड इस तरह दिखता है:

private bool _hasDomPresence 
{ 
    get 
    { 
     return ViewState["__hasDomPresence"] == null ? false : (bool)ViewState["__hasDomPresence"]; 
    } 
    set 
    { 
     ViewState["__hasDomPresence"] = value; 
    } 
} 

protected override void OnLoad(EventArgs e) 
{ 
    if(!ScriptManager.GetCurrent(this.Page).IsInAsyncPostBack) 
    { 
     // a full postback means we no longer have a DOM presence 
     _hasDomPresence = false; 
    } 

    base.OnLoad(e); 
} 

protected virtual void ShowDetailDialog() 
{ 
    // code to show the offending dialog 

    // we are showing it, so note the fact that it now has a DOM presence 
    _hasDomPresence = true; 
} 

protected override void Render(HtmlTextWriter writer) 
{ 
    foreach(Control c in this.Controls) 
    { 
     // 
     // find the offending control's parent container prior to it being rendered 
     // In my scenario, the parent control is just a server-side DIV 
     if(c == this.DetailDialog) 
     { 
      // 
      // here, I am checking whether or not the panel actually needs to be 
      // rendered. If not, I set it to invisible, thus keeping a new DOM 
      // element from being created. 
      if(!this.DetailUpdatePanel.IsInPartialRendering && _hasDomPresence) 
      { 
       this.DetailUpdatePanel.Visible = false; 
      } 
     } 
    } 

    base.Render(writer); 
} 

यह इसलिए भी कि पेज के क्लाइंट और सर्वर संस्करण से मेल नहीं खाते (या कम से कम ASP.Net नहीं बता सकता कि वे करते हैं) घटना सत्यापन भ्रमित करेगा। इस काम को बनाने का एकमात्र तरीका यह था कि ईवेंट सत्यापन बंद कर दिया जाए।

उचित सुरक्षा मॉडल के साथ, ईवेंट सत्यापन 100% आवश्यक नहीं है, लेकिन मुझे इसे बंद करने के लिए मजबूर होना पसंद नहीं है।

संक्षेप में, यह एसओ पर पोस्ट किया गया सबसे बुरा कोड है और यदि आप इसका उपयोग करते हैं तो शराबी सफेद बिल्ली के बच्चे मर जाएंगे, लेकिन दृष्टिकोण काम करने लगता है।

उम्मीद है कि इससे मदद मिलती है।

+0

इस कामकाज के लिए धन्यवाद। लेकिन इस बीच मैंने jQuery-Dialog दृष्टिकोण छोड़ दिया है और नवीनतम AjaxControlToolkit रिलीज से ModalPopupExtender का उपयोग कर रहा हूं। यह क्लाइंट- या सर्वरसाइड से खोलने पर ध्यान दिए बिना कुछ छोटे मुद्दों को हल करने के बाद एसिंक पोस्टबैक के साथ पूरी तरह से काम कर रहा है। धन्यवाद फिर से :) –

4

यहां बताया गया है कि मैंने एक ही समस्या को हल किया। यह किसी भी पुराने संवाद को हटा देता है और नए अपडेट किए गए एक को फॉर्म में वापस जोड़ता है ताकि पोस्टबैक काम कर सकें। मैंने निम्नलिखित कोड को एक स्क्रिप्ट ब्लॉक में रखा है जो पृष्ठ पर ScriptManager.RegisterStartupScript के माध्यम से कोड में जोड़ा जाता है।

$('#divMyDialogAdded').remove(); 

$('#divMyDialog').dialog({ 
    autoOpen: false, 
    modal: true 
}).parent().appendTo('form:first'); 

$('#divMyDialog').attr('id', 'divMyDialogAdded'); 
+0

यह मेरे लिए भी काम करता था, हालांकि मैंने इसे अपने jQuery तैयार हैंडलर में डाल दिया और पेज लोड को स्क्रिप्ट मैनेजर का उपयोग करने के बजाय पार्टरियल लोड हैंडलर है। –

1

मुझे लगता है कि jQuery और स्क्रिप्ट प्रबंधक/अद्यतन पैनल जब पैदा करते हैं और यह confilct बनाई स्क्रिप्ट पार्स और आप विधि के पीछे कोड में इस का उपयोग करने के लिए सही ढंग से अद्यतन पैनल के उत्प्रेरक में घटना को संभाल चाहिए:

 UpdatePanel2.Update(); 

तो मैं इस समस्या है और कोड नीचे से इसे हल कर सकते हैं (यह मेरे नमूना कोड):

<!--------- show for dialog ---> 
<div id="dialog" style="direction: rtl;"> 
    <asp:ScriptManager ID="ScriptManager1" runat="server"> 
    </asp:ScriptManager> 
    <asp:UpdatePanel ID="UpdatePanel2" runat="server" RenderMode="Block" UpdateMode="Conditional" EnableViewState="True" ChildrenAsTriggers="True"> 
     <ContentTemplate> 
      <div> 
       <table> 
        <tr> 
         <td> 
          <asp:ListBox ID="lstSLA" runat="server" SelectionMode="Single" Width="250px" Height="350px"> 
          </asp:ListBox> 
         </td> 
         <td valign="middle"> 
          <asp:Button ID="BtnUpMove" runat="server" Text=" top" OnClick="BtnUpMove_Click" /> 
          <div> 
           <br /> 
          </div> 
          <asp:Button ID="BtnDownMove" runat="server" Text="down" OnClick="BtnDownMove_Click" /> 
         </td> 
        </tr> 
        <tr> 
         <td colspan="2" align="center"> 
          <asp:Button ID="btnSavePeriority" runat="server" Text="Save" OnClick="btnSavePeriority_Click" /> 
         </td> 
         <td> 
         </td> 
        </tr> 
       </table> 
      </div> 
     </ContentTemplate> 
     <Triggers> 
      <asp:PostBackTrigger ControlID="btnSavePeriority" /> 
      <asp:AsyncPostBackTrigger ControlID="BtnUpMove" EventName="Click" /> 
      <asp:AsyncPostBackTrigger ControlID="BtnDownMove" EventName="Click" /> 
     </Triggers> 
    </asp:UpdatePanel> 
</div> 

और ग # कोड में: संरक्षित voi डी BtnUpMove_Click (ऑब्जेक्ट प्रेषक, EventArgs ई) { int चयनित इंडेक्स = lstSLA.SelectedIndex;

 if (SelectedIndex == -1) // nothing selected 
     { 
      UpdatePanel2.Update(); 
      return; 
     } 
     if (SelectedIndex == 0) // already at top of list 
     { 
      UpdatePanel2.Update(); 
      return; 
     } 

     ListItem Temp; 
     Temp = lstSLA.SelectedItem; 

     lstSLA.Items.Remove(lstSLA.SelectedItem); 
     lstSLA.Items.Insert(SelectedIndex - 1, Temp); 
     UpdatePanel2.Update(); 
     lstSLA.SelectedIndex = -1; 
    } 
    protected void BtnDownMove_Click(object sender, EventArgs e) 
    { 
     int SelectedIndex = lstSLA.SelectedIndex; 

     if (SelectedIndex == -1) // nothing selected 
     { 
      UpdatePanel2.Update(); 
      return; 
     } 
     if (SelectedIndex == lstSLA.Items.Count - 1) // already at top of list    
     { 
      UpdatePanel2.Update(); 
      return; 
     } 

     ListItem Temp; 
     Temp = lstSLA.SelectedItem; 

     lstSLA.Items.Remove(lstSLA.SelectedItem); 
     lstSLA.Items.Insert(SelectedIndex + 1, Temp); 
     UpdatePanel2.Update(); 
     lstSLA.SelectedIndex = -1; 

    } 
    protected void btnSavePeriority_Click(object sender, EventArgs e) 
    { 
     if (lstSLA.Items.Count == 0) return; 
     try 
     { 
      var db = DatabaseHelper.GetITILDataAccess(); 
      ServiceLevel srvlvl = new ServiceLevel(); 
      int priority = 1; 
      foreach (ListItem ls in lstSLA.Items) 
      { 
       srvlvl = new ServiceLevel(); 
       srvlvl = db.ServiceLevels.Single(p => p.ID == long.Parse(ls.Value)); 
       srvlvl.priority = priority; 
       priority++; 
       ServiceLevelManagement.Update(srvlvl); 

      } 
      ShowMessage(ITILMessages.InsertComplete); 
     } 
     catch (Exception ex) 
     { } 
     finally { } 

    } 
संबंधित मुद्दे