jquery टैब

Question

के तहत मांग पर उपयोगकर्ता नियंत्रण लोड हो रहा है मेरे पास उपयोगकर्ता नियंत्रण पर कुछ jquery टैब हैं जो प्रत्येक के तहत एक अलग उपयोगकर्ता नियंत्रण लोड करता है। प्रत्येक उपयोगकर्ता नियंत्रण अद्वितीय है। यह सब अभी ठीक काम करता है लेकिन समग्र पृष्ठ प्रतिक्रिया बहुत धीमी है। प्रदर्शन में सुधार करने के लिए मैं मांग पर इन टैब के तहत कुछ उपयोगकर्ता नियंत्रण लोड करने की कोशिश कर रहा हूं (जो टैब के क्लिक पर है)। शायद बिना पोस्ट के ... अजाक्स। क्या कोई मुझे मार्गदर्शन कर सकता है? मैंने this ट्यूटोरियल और this का पालन करने का प्रयास किया लेकिन उसे कोई सफलता नहीं मिली। मैंने पैरेंट उपयोगकर्ता नियंत्रण के लिए कोड संलग्न किया है।

<ul id="tabs"> 
<li class="active">Rewards</li> 
<li id="liCoupons">Coupons</li> 
<li id="liLibrary">Library</li> 
<li id="liProducts">Favorite</li> 
<li id="liPreferences">Preferences</li></ul><ul id="tabPanes" class="rewardsTabs"> 
<li> 
    <div class="wrapper active"> 
     <uc:Rewards ID="wellness" runat="server" /> 

    </div> 
</li> 
<li id="liCoupons"> 
    <div class="wrapper"> 
     <uc:Coupon runat="server" /> 
    </div> 
</li><li id="liLibrary"> 
    <div class="wrapper"> 
     <uc:Library runat="server" /> 
    </div> 
</li><li id="liProducts"> 
    <div class="wrapper"> 
     <uc:Products runat="server" /> 
    </div> 
</li> 
<li> 
    <div class="wrapper"> 
     <div class="preferences"> 
      <uc:Preferences runat="server"/> 
     </div> 

    </div> 
</li> 

Answer 1

आपके द्वारा उल्लिखित second link का काम करना चाहिए। आपको अपने मार्कअप में किसी भी उपयोगकर्ता नियंत्रण को परिभाषित करने की आवश्यकता नहीं है।

<ul id="tabs"> 
    <li class="active">Rewards</li> 
    <li id="liCoupons">Coupons</li> 
    <li id="liLibrary">Library</li> 
    <li id="liProducts">Favorite</li> 
    <li id="liPreferences">Preferences</li> 
</ul> 
<div id="results" class="wrapper"></div> 

प्रत्येक टैब क्लिक एक ajax कॉल

$.ajax({ 
     type: "POST", 
     url: "Default.aspx/WebMetodToCall", 
     data: data, // I wouldn't prefer passing webmethod name here 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function (msg) { 
      $('#result').html(msg.d); 
     }, 
     failure: function (msg) 
      //error 
     } 
    }); 

वेब तरीकों के

करेंगे।

[WebMethod] 
    public static string Rewards() 
    { 
     return RenderControl("~/controls/rewardsControl.ascx"); 
    } 

[WebMethod] 
    public static string Coupons() 
    { 
     return RenderControl("~/controls/couponsControl.ascx"); 
    }  
... 

प्रत्येक विधि केवल अनुरोधित नियंत्रण प्रदान करेगी। आपकी विधि में आप अपनी आवश्यकताओं के आधार पर व्यूस्टेट को रख या निकाल सकते हैं।प्रतिपादन के बाद, वेबमाइडर को प्लेसहोल्डर में इंजेक्शन देने के लिए HTML स्ट्रिंग को वापस लेना चाहिए।

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

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

Answer 2

अपने उपयोगकर्ता नियंत्रण वहाँ काम करने के लिए के बाद पीठ और दृश्य-राज्य पर निर्भर करता है? AJAX का उपयोग कर टैब में प्रदर्शित होने के लिए उपयोगकर्ता नियंत्रण HTML को लाने के लिए सापेक्ष आसान होगा लेकिन फिर उस नियंत्रण पर पोस्ट-बैक पूरे डेटा को वास्तविक पृष्ठ पर भेज देगा (जिसमें उपयोगकर्ता नियंत्रण लोड नहीं हो सकता है)। तो मूल रूपरेखा

1. छिपे हुए चर या दृश्य-स्थिति का उपयोग कर सक्रिय टैब को ट्रैक करें।
2. प्रारंभिक पृष्ठ चक्र में सक्रिय टैब के आधार पर उपयोगकर्ता नियंत्रण लोड करें। सबसे अच्छा शर्त init मंच होगा (नहीं कि दृश्य-स्थिति यहां उपलब्ध नहीं होगी, इसलिए आपको छुपे हुए चर में सक्रिय टैब स्टोर करना होगा और Request.Forms संग्रह के माध्यम से इसे एक्सेस करना होगा)।
3. प्रत्येक उपयोगकर्ता को एक आईडी नियंत्रित करें और यह टैब से टैब से अलग होना चाहिए। दृश्य-स्थिति लोड करने के लिए आईडी बहुत महत्वपूर्ण है।
4. यदि आपको टैब स्विचिंग पर दूषित दृश्य-स्थिति त्रुटियां मिलती हैं तो आपको पहले टैब के लिए उपयोगकर्ता नियंत्रण लोड करना होगा और फिर बाद में पृष्ठ चरण (लोड/प्रीरेंडर कहें), इसे अनलोड करें और सक्रिय टैब के लिए नया उपयोगकर्ता नियंत्रण लोड करें ।
5. आप सही स्थान पर उपयोगकर्ता नियंत्रण लोड करने के लिए प्रत्येक टैब फलक के भीतर प्लेसहोल्डर या पैनल नियंत्रण का उपयोग कर सकते हैं।
6. कहने की जरूरत नहीं है, jquery टैब के परिवर्तन पर, आपको पोस्ट-बैक स्क्रिप्ट का उपयोग करके अपना फॉर्म जमा करना होगा। प्रत्येक पोस्ट-बैक के बाद, आपको टैब को फिर से शुरू करने और सक्रिय टैब चुनने के लिए एक स्क्रिप्ट की आवश्यकता होती है।
7. बेहतर उपयोगकर्ता अनुभव के लिए, संपूर्ण चीज़ को UpdatePanel में रखें।

Answer 3

आप इसे jQuery के साथ एक छोटे से समायोजित करते हैं, यह काम करना चाहिए:
http://blogs.msdn.com/b/sburke/archive/2007/06/13/how-to-make-tab-control-panels-load-on-demand.aspx

या फिर आप asp.net टैब का उपयोग करें।

Answer 4

शायद एक एंकर का उपयोग करें जो नीचे परिभाषित सेवा को इंगित करता है। उदाहरण के लिए,

<li><a href="...webservices/ControlServce.svc/Content?cType=Rewards" class="wrapper active"></a></li> 

/// <summary> 
/// Service used by ajax for loading social media content 
/// </summary> 
[ServiceContract(Namespace = "")] 
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] 
public class ControlService 
{ 
    /// <summary> 
    /// Streams html content 
    /// </summary> 
    /// <param name="type">type of control</param> 
    /// <returns>html stream of content</returns> 
    [OperationContract] 
    [WebGet(UriTemplate = "Content?cType={cType}")] 
    public Stream GetContent(string cType) 
    { 
     var tw = new StringWriter(); 
     var writer = new Html32TextWriter(tw); 

     var page = new Page(); 
     var control = page.LoadControl(cType); 

     control.RenderControl(writer); 

     writer.Close(); 

     var stream = new MemoryStream(Encoding.UTF8.GetBytes(tw.ToString())); 

     WebOperationContext.Current.OutgoingResponse.ContentType = "text/html"; 
     WebOperationContext.Current.OutgoingResponse.Headers.Add("Cache-Control", "no-cache"); 
     return stream; 
    } 
} 

Answer 5

आपको jquery और webmethod का उपयोग करके दूसरे लिंक के लिए जाना चाहिए। इस तरह आप वास्तव में पृष्ठ को भारी किए बिना मांग पर टैब को पॉप्युलेट करेंगे।

Answer 6

इसे बनाने के लिए आपको एक अजाक्स कॉल करने की आवश्यकता होगी। अब आपके पास AJAX कॉल करने के विकल्प हैं:

1 - एसओएपी वेब सेवा के माध्यम से कॉल करें (एएसपी अजाक्सस्क्रिप्ट प्रबंधक संदर्भ प्रत्येक वेब विधि के लिए आवश्यक होगा)।

2- पिछले उत्तर के रूप में डब्ल्यूसीएफ सेवा के माध्यम से कॉल करें।

3 - बाकी सेवा के माध्यम से कॉल करें।

4- Jquery AJAX विधि के माध्यम से कॉल करें लेकिन अनुरोध "Actions.aspx" जैसे बाहरी पृष्ठ पर जाना चाहिए, इसलिए जब आप अपनी विधि को कॉल करते हैं तो HTTPRequest क्रिया पृष्ठ में किया जाएगा, तो इसके बदले में डेटा लौटाएगा। $.Ajax(url,data,action,successMethod); // this is the fastest way I tried them all.

यहां आपको क्या करना चाहिए: 1- परिवर्तन टैब ईवेंट पर उपर्युक्त विकल्पों से उपयुक्त अजाक्स कॉलिंग विधि का उपयोग करके अपनी विधि को कॉल करें।

2- सफलता विधि से लौटाए गए डेटा का उपयोग करें, लेकिन डेटाटाइम ऑब्जेक्ट्स के लिए eval (डेटा) का उपयोग करना आपके लिए बेहतर है। निम्नलिखित

var helper = { 
callAjax: function(sentData, successFun) { 
     jQuery.ajax({ 
      url: "/Actions.aspx", 
      type: "Get", 
      data: sentData, 
      cache: true, 
      dataType: "json", 
      success: successFun 
     }); 
    } 
}; 

helper.callAjax('request=getCities&countryID=' + countryID, function (args) { 
    var result = eval(args); // this object will contain the returned data 
var htmlData = ''; 
    for (var i=0;i<result.length;i++){ 
    // write your HTML code by jQuery like this 
    htmlData += '<div>' + result[i].title + '</div>'; 
} 
$('#tab3').html(htmlData); 
}); 

अब Actions.ASPX कोड उपयोग पर

:

protected void Page_Load(object sender, EventArgs e) 
    { 
     object _return = new 
     { 
      error = "", 
      status = true 
     }; 
     JavaScriptSerializer _serializer = new JavaScriptSerializer(); 
     if (!Page.IsPostBack) 
     { 
      string str = Request.QueryString["request"].ToString(); 
      switch (str.ToLower()) 
      { 
case "getcities": 
        int countryID = Convert.ToInt32(Request.QueryString["countryID"].ToString()); 
        _return = JQueryJson.Core.City.getAllCitiesByCountry(countryID).Select(_city => new 
        { 
         id = _city.ID, 
         title = _city.Name 
        }); 
        _serializer = new JavaScriptSerializer(); 
        Response.ClearContent(); 
        Response.ClearHeaders(); 
        Response.ContentType = "text/json"; 
        Response.Write(_serializer.Serialize(_return)); 
        break; 
} 
// etc........ 
} 

Answer 7

मेरी राय में, आपकी समस्या का सबसे तेजी से समाधान

यहाँ कुछ उदाहरण बताते हैं कि कैसे यह कॉल करने के लिए है (लेकिन जरूरी नहीं कि सबसे अच्छा दीर्घकालिक) आपके सभी UserControl एस को .aspx पृष्ठ में लपेटना है। इस स्थिति में, आपको अपने माता-पिता UserControl मार्कअप को नए .aspx पृष्ठ पर ले जाना होगा, और इसे AJAX के माध्यम से कॉल करना होगा।

यह मानते हुए कि आप Menu.aspxकी तरह यह पेज कुछ कहा जाता है, और आगे यह सोचते हैं कि आप किसी भी डेटा इस पेज में पारित कर दिया (अर्थात, वह आंतरिक रूप से अपने स्वयं के डेटा के सभी ट्रैक कर सकते हैं), अपने jQuery की जरूरत नहीं है

function GetMenu ($placeholder) { 
    $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", dataType: "json", 
     url: "Menu.aspx", 
     done: function (result) { 
      $placeholder.html(result.d); 
     }, 
     fail: function() { 
      $placeholder.html("Error loading menu."); 
     } 
    }); 
} 

कुछ नोट::

1. done और failsuccess का स्थान ले लेगा और jQuery 1.8 में error, इसलिए किसी भी jQuer AJAX कॉल यह कुछ ऐसा दिखाई देगा y AJAX आप इस संक्रमण के लिए योजना बनाना चाहिए।
2. मैंने इसे एक समारोह में बड़े पैमाने पर लपेट लिया क्योंकि मैं जेएस कक्षाओं और कार्यों के अंदर AJAX कॉल करना पसंद करता हूं, और फिर उन वस्तुओं का संदर्भ देता हूं।मेनू के साथ, यह संभावना नहीं है कि आपके पास AJAX के माध्यम से एक ही डेटा लोड करने वाले कई अलग-अलग पृष्ठ होंगे (क्योंकि यह किसी प्रकार के मास्टर पेज पर होगा, मैं अनुमान लगा रहा हूं), लेकिन इन्हें करने की आदत में खुद को प्राप्त करना हमेशा अच्छा होता है बातें।

3. कसकर-युग्मित HTML/जावास्क्रिप्ट के बारे में आपकी भावनाओं के आधार पर, आप कॉलबैक फ़ंक्शन के साथ $placeholder को प्रतिस्थापित कर सकते हैं। कॉलिंग कि अपने पृष्ठ से जहां अपने मेनू बसता था कुछ ऐसा दिखाई देगा:

   $(document).ready(function() { 
       GetMenu(MenuCallback); 
   }); 
   
   function MenuCallback(menuHtml) { 
       $("#menu").html(menuHtml); // I'm assuming the ID of your ul/span/div tag here. 
   } 
   

4. कुछ लोगों को (अपने आप को शामिल) $ उपसर्ग का उपयोग जावास्क्रिप्ट और jQuery चर के बीच अंतर करने के लिए। तो यहां, $placeholder एक jQuery चर है।

5. आप एक type: "GET" के रूप में इस $.ajax कॉल है, जो थोड़ा और अधिक कुशल हो जाएगा फिर से लिखने में सक्षम हो सकता है, लेकिन मुझे यकीन है कि अगर UserControl कि संबंध में समस्याओं का कारण होगा नहीं हूँ। आम तौर पर, अगर मैं AJAX के माध्यम से एक संपूर्ण .aspx पृष्ठ लोड कर रहा हूं, तो मैं POST के बजाय GET का उपयोग करता हूं। आपको इसे आज़माने के लिए बहुत कुछ बदलना नहीं है: बस type संपत्ति को स्विच करें और result.dresult पर बदलें।

Answer 8

मुझे लगता है कि सबसे अच्छा समाधान वापस

http://msdn.microsoft.com/en-us/library/ms178210.aspx

उपयोगकर्ता कुछ टैब पर क्लिक करता है, ऑनक्लिक ईवेंट कॉल js पैरामीटर के रूप में टैब के नाम के साथ समारोह, की तुलना में उस टैब कॉल सर्वर क्लाइंट कॉल लागू करने के लिए है उसी पैरामीटर के साथ कोड।

कोड में से आप नियंत्रण लोड करते हैं जो आप चाहते हैं कि कौन सा टैब क्लिक किया गया है। अब आपको एचटीएमएल में नियंत्रण प्रस्तुत करने और जेएस फ़ंक्शन पर वापस थैम भेजने की आवश्यकता है। अब आपके पास जेएस फ़ंक्शन में नियंत्रण है, यह पता लगाएं कि आप कोड डालने के लिए कहां डालना चाहते हैं।

कि सिद्धांत रूप में काम करना चाहिए और यह जटिल :) करने के लिए)

Answer 9

इस सवाल का asnwer (मेरा नहीं) नहीं है आप के लिए शायद उपयोगी है:

Asynchronous loading of user controls in a page

यह कहा गया है कि वहाँ वापस पोस्ट करने के लिए उपयोगकर्ता नियंत्रण पर एक फॉर्म की आवश्यकता के साथ समस्याएं हैं, लेकिन यह अजाक्स पोस्ट के साथ स्वतंत्र रूपों के लिए ठीक होना चाहिए। पेज पर फॉर्म (पोस्ट) पोस्ट करते समय आपको क्या करना होगा, इसके बारे में सोचना होगा, लेकिन यह दुर्बल नहीं होना चाहिए। ऐसा कोई कारण नहीं होना चाहिए जिससे आप इसे एशक्स हैंडलर नहीं बना सकें।