अद्यतनपैनल

Question

का उपयोग कर एक HTML तालिका में गतिशील रूप से ताज़ा पंक्तियां मैं कुछ इंट्रानेट ऐप्स के लिए हाल ही में एएसपी.NET AJAX अद्यतन पैनेल नियंत्रण का उपयोग कर रहा हूं, और अधिकांश भाग के लिए, मैं इसका उपयोग कर रहा हूं डेटा के गतिशील रूप से ताज़ा करें या उपयोगकर्ता के कार्यों के आधार पर किसी फ़ॉर्म पर नियंत्रण छुपाएं और दिखाएं।

एक ऐसी जगह है जहां मुझे कुछ परेशानी हो रही है, और मुझे आश्चर्य है कि किसी के पास कोई सलाह है या नहीं। मेरा फॉर्म एक सुंदर ठेठ तालिका आधारित लेआउट का उपयोग कर रहा है जहां उपयोगकर्ता को भरने के लिए लेबल और फ़ील्ड के ग्रिड को प्रदर्शित करने के लिए तालिका का उपयोग किया जाता है। (मुझे पहले से ही पता है कि टेबल आधारित लेआउट कुछ लोगों द्वारा छोड़े गए हैं, और मैं पेशेवरों और विपक्ष को समझता हूं। लेकिन यह मेरी पसंद है, इसलिए कृपया "टेबल आधारित लेआउट का उपयोग न करें" के साथ जवाब न दें।)

अब मेरी समस्या यह है कि ऐसे समय होते हैं जब मैं की तरह पंक्तियों के एक सेट के आसपास एक अद्यतन पैनेल को लपेटने के लिए करता हूं ताकि मैं उन्हें छुपा सकूं और उन्हें गतिशील रूप से दिखा सकूं, लेकिन अपडेट पैनेल आपको वास्तव में ऐसा करने नहीं देता है। मूल समस्या यह है कि यह उनके चारों ओर एक div लपेटता है, और जहां तक ​​मुझे पता है, आप तालिका पंक्तियों के चारों ओर एक div लपेट नहीं कर सकते हैं। यह वैध एचटीएमएल नहीं है।

तो जिस तरह से मैं इसके साथ काम कर रहा हूं, मेरी गतिशील पंक्तियों को पूरी तरह से एक पूरी नई तालिका का हिस्सा बनाना है, जो ठीक है, लेकिन फिर आपको ऊपर दिए गए तालिका के साथ मैन्युअल रूप से सभी कॉलम को संरेखित करना होगा, और यह एक असली दर्द और बहुत नाजुक है।

तो, सवाल यह है कि ... क्या किसी को अपडेटपेनल या कुछ समान का उपयोग करके पंक्तियों को गतिशील रूप से उत्पन्न या ताज़ा करने के लिए किसी भी तकनीक के बारे में पता है? उम्मीद है कि समाधान पेज पर अपडेटपेनल छोड़ने जितना आसान होगा, लेकिन यदि नहीं, तो भी मैं इसे सुनना चाहता हूं।

Answer 1

उत्तर: अंत में, वहाँ एक UpdatePanel का उपयोग कर ऐसा करने के लिए कोई रास्ता नहीं है। सबसे अच्छा आप प्राप्त कर सकते हैं पूरी तालिका को ताज़ा करना, लेकिन व्यक्तिगत पंक्तियों को नहीं।

Answer 2

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

<tr style="display: <%= visible %>"> 
    <td></td> 
</tr> 

: सब आप चाहते हैं, जबकि अपनी (बहुत बहुत बुरा) तालिका लेआउट को बनाए रखने की सामग्री को छिपाने के लिए है, तो इस तरह दृश्यता मूल्य के लिए वहाँ में एक एएसपी वर के साथ पंक्ति में एक शैली टैग शामिल आवश्यक रूप से दृश्यमान चर।

उसने कहा, उचित लेआउट को अलग करने से आपको यहां चोट पहुंच रही है।

Answer 3

यदि आप गतिशील रूप से अपने नियंत्रण बना रहे हैं, तो आप तय कर सकते हैं कि आपके नियंत्रण उत्पन्न करते समय कौन सी चीज़ों को प्रदर्शित या छुपाया जा सकता है।

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

<table> 
    <tr id="row1" runat="server"> 
     <td>Label</td><td>Field</td> 
    </tr> 
</table> 

और पीछे कोड से:

row1.visible = false; 

@Rob एलेन की जवाब के एक संशोधन से ऐसा करते हैं:

सीएसएस

.hidden_row { 
    display: none; 
} 

एएसपी एक्स

<tr class="<%= variable %>"> 

एक ही विचार है, बस एक वर्ग का उपयोग कर के बजाय सीएसएस तालिका में सीधे कोडिंग।

Answer 4

अपडेटपेनल (या सामान्य रूप से AJAX पोस्टबैक) का उपयोग तत्वों को छिपाने या दिखाने के लिए नहीं किया जाना चाहिए। यदि आपको डेटा अपडेट करने की आवश्यकता है, तो यह एक बात है ... लेकिन अन्यथा, प्रदर्शन सीएसएस संपत्ति को बदलने के लिए जावास्क्रिप्ट का उपयोग करें।

आप jQuery की तरह एक ग्राहक ढांचे, तो यह और भी आसान हो जाता है का उपयोग करते हैं - आप कुछ इस तरह कर सकता है:

<button onclick="$('.inactive').toggle();">Toogle Inactive</button> 

<table> 
<tr class="inactive"><td>Inactive 1</td></tr> 
<tr class="inactive"><td>Inactive 2</td></tr> 
<tr><td>Active 1</td></tr> 
<tr><td>Active 2</td></tr> 
</table> 

Answer 5

हमारी परियोजना में हमें इस समस्या का कुछ समाधान मिला। हमें प्रत्येक पंक्ति में कई सक्रिय तत्वों के साथ जटिल संबंध बनाना था (संपादन के लिए बटन, स्वीकार आदि)।

हमने divpan बनाया है जो अद्यतन पैनेल में रखा गया है (आवश्यकता होने पर पूरी तालिका को अपडेट करने के लिए)। इस div में हमने शीर्ष पंक्तियों के लिए हेडर परिभाषा और अलग-अलग तालिकाओं के साथ तालिका बनाई है (उन तालिकाओं को अद्यतन पैनलों में रखा गया है)। प्रत्येक पंक्तियों में बराबर कॉलम बनाने के लिए हमें प्रत्येक टेबल सेल के लिए सीएसएस कक्षाओं का उपयोग करना होगा।

तो, हम कुछ इस तरह की है (प्रत्येक पंक्ति में हम कुछ बटन, ड्रॉपडाउन, टूलटिप्स, आदि है, लेकिन विचार को समझने के लिए मैं इसे एकल स्तंभ तक छोटा कर दिया गया है):

<UpdatePanel> 
<DIV> 
    <TABLE> 
    <TR> 
    <TH class="h1">Name</TH> 
    </TR> 
    </TABLE> 

    <UpdatePanel Id='InnerPanel1'> 
     <TABLE> 
     <TR> 
     <TD class="h1">John</TD> 
     </TR> 
     </TABLE> 
    </UpdatePanel> 
</DIV> 
</UpdatePanel> 

ऐसा नहीं है सुरुचिपूर्ण और बड़े HTML उत्पन्न करता है, लेकिन काम करता है।

Answer 6

मुझे एक ही समस्या थी और मैंने समाधान पर चिपकाया।

यदि आप पूरी तालिका स्वयं अपडेटपेनल के अंदर भी हैं तो आप तालिका के टीडी भागों को अपडेट कर सकते हैं !!

पता नहीं क्यों। इससे मेरा काम बनता है।

<asp:UpdatePanel ID="UpdatePanel1" runat="server"><ContentTemplate> <table ID="Table1"> 
<tr> 
<td > 
... 
</td> 
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional"> 
<ContentTemplate> 
<td > 
.... 
</td> 
<td > 
... 
</td> 
<td > 
... 
</td> 
</ContentTemplate> 
</asp:UpdatePanel> 

</tr> 

</table></ContentTemplate></asp:UpdatePanel> 

Answer 7

ASP कोड:

<asp:ScriptManager ID="ScriptManager1" runat="server"> 
</asp:ScriptManager> 
<table width="100%"> 
    <tr> 
     <td style="width: 300px"> 
      Employee First Name 
     </td> 
     <td> 
      <asp:TextBox ID="txtFname" runat="server"></asp:TextBox> 
     </td> 
    </tr> 
    <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
     <ContentTemplate> 
      <tbody> 
       <tr> 
        <td style="width: 300px"> 
         Date Of Birth 
        </td> 
        <td> 
         <asp:TextBox ID="txtDOB1" runat="server" OnTextChanged="txtDOB_TextChanged" AutoPostBack="true"></asp:TextBox> 
         <asp:CalendarExtender ID="txtDOB1_CalendarExtender" runat="server" Enabled="True" 
          TargetControlID="txtDOB1"> 
         </asp:CalendarExtender> 
        </td> 
       </tr> 
       <tr> 
        <td style="width: 300px"> 
         Age 
        </td> 
        <td> 
         <asp:TextBox ID="txtAge" Style="font-weight: bold; font-size: large" runat="server" 
          Enabled="false"></asp:TextBox> 
        </td> 
       </tr> 
      </tbody> 
     </ContentTemplate> 
    </asp:UpdatePanel> 
    <tr> 
     <td align="right" style="width: 300px"> 
      <asp:Button ID="btnSubmit" runat="server" CssClass="button" Text="Submit" /> 
     </td> 
     <td> 
      <asp:Button ID="btnClear" runat="server" CssClass="button" Text="Reset" /> 
     </td> 
    </tr> 
</table> 

कक्षा कोड:

protected void txtDOB_TextChanged(object sender, EventArgs e) 
{ 
    try 
    { 
     DateTime Today = DateTime.Now; 
     DateTime DOB = Convert.ToDateTime(txtDOB1.Text); 
     ArrayList arr = new ArrayList(); 
     arr = span(Today, DOB); 
     arr[0].ToString();//For Years 
     arr[1].ToString();//For Months 
     arr[2].ToString();//For Days 
     txtAge.Text = "Y: " + arr[0].ToString()+",M: "+arr[1].ToString()+",D: "+arr[2].ToString(); 

    } 
    catch (Exception ex) 
    { 

     lblError.Text = "Error : " + ex.Message ; 
    } 
} 
public ArrayList span(DateTime f, DateTime l) 
{ 
    int days; 
    int months; 
    int years; 

    int fird = f.Day; 
    int lasd = l.Day; 

    int firm = f.Month; 
    int lasm = l.Month; 

    if (fird >= lasd) 
    { 
     days = fird - lasd; 
     if (firm >= lasm) 
     { 
      months = firm - lasm; 
      years = f.Year - l.Year; 
     } 
     else 
     { 
      months = (firm + 12) - lasm; 
      years = f.AddYears(-1).Year - l.Year; 
     } 
    } 
    else 
    { 
     days = (fird + 30) - lasd; 
     if ((firm - 1) >= lasm) 
     { 
      months = (firm - 1) - lasm; 
      years = f.Year - l.Year; 
     } 
     else 
     { 
      months = (firm - 1 + 12) - lasm; 
      years = f.AddYears(-1).Year - l.Year; 
     } 
    } 


    if (days < 0) 
    { 
     days = 0 - days; 
    } 
    if (months < 0) 
    { 
     months = 0 - months; 
    } 
    ArrayList ar = new ArrayList(); 
    ar.Add(years.ToString()); 
    ar.Add(months.ToString()); 
    ar.Add(days.ToString()); 
    return ar; 
}