ASP.NET ग्रिड शोध आणि निवड मध्ये वापरकर्ता अनुभव ऑप्टिमाइझ करणे
ग्राहकांना ग्रिड इंटरफेसमध्ये वस्तू शोधण्याची आणि निवडण्याची क्षमता देणे हे ASP.NET ऍप्लिकेशन्समधील एक वारंवार वैशिष्ट्य आहे. तथापि, विकासकांना वारंवार समस्या येतात: ग्रिड रिफ्रेश होते आणि जेव्हा एखादी वस्तू निवडली जाते तेव्हा शोध पॅरामीटर्स गमावले जातात. कारण प्रत्येक वेळी नवीन आयटम निवडताना त्यांना त्यांचा शोध रीस्टार्ट करावा लागतो, यामुळे वापरकर्त्यांना त्रास होऊ शकतो.
उपयोगिता सुधारण्यासाठी पोस्टबॅक किंवा ग्रिड अपडेटनंतर शोध निकष जतन करणे अत्यावश्यक आहे. जेव्हा ग्राहकांना समान मानकांवर आधारित अनेक पर्याय निवडावे लागतात तेव्हा हे विशेषतः महत्त्वपूर्ण असते. शोध संज्ञा गमावल्यास प्रक्रिया अनावश्यकपणे पुनरावृत्ती होते.
सुदैवाने, आम्ही JavaScript आणि ASP.NET च्या अंगभूत वैशिष्ट्यांचा वापर करून ग्रिडमधील आयटम निवडल्यानंतरही शोध कीवर्ड चालू राहतील याची खात्री करू शकतो. DataTables आणि ASP.NET च्या दृश्य स्थितीला पूरक असलेल्या पद्धतींचा वापर करून, आम्ही वापरकर्त्याचा अनुभव अधिक सहज बनवू शकतो.
ASP.NET प्रकल्पात हे साध्य करण्यासाठी JavaScript आणि VB.Net कसे वापरायचे ते आम्ही पुढील मार्गदर्शकामध्ये पाहू. तुम्ही तुमची ग्रिड अपडेट करता तेव्हा शोध निकष प्रभावीपणे कसे राखायचे हे दाखवण्यासाठी आम्ही वास्तविक-जागतिक परिस्थिती देखील पाहू.
| आज्ञा | वापराचे उदाहरण |
|---|---|
| sessionStorage.getItem() | ब्राउझरच्या सेशन स्टोरेजमधून या कमांडद्वारे शोध पॅरामीटर्स पुनर्प्राप्त केले जाऊ शकतात. या उदाहरणात, ते पूर्वी प्रदान केलेले शोध मूल्य पुनर्प्राप्त करते आणि पृष्ठ रिफ्रेश किंवा ग्रिड अद्यतनानंतर शोध फील्ड पुन्हा भरले आहे याची खात्री करते. |
| sessionStorage.setItem() | ब्राउझरच्या सत्र स्टोरेजमध्ये वर्तमान शोध क्वेरी जतन करते. वापरकर्त्याने एखादी वस्तू निवडली किंवा ASP.NET ग्रिड परत पोस्ट केल्यावर हे शोध पॅरामीटर्स गमावण्यापासून ठेवते. |
| ScriptManager.RegisterStartupScript() | सर्व्हरवरून ASP.NET क्लायंट-साइड स्क्रिप्ट नोंदणी आणि चालवते. ग्रिडच्या शोध बॉक्समध्ये शोध मूल्य जतन करण्यासाठी, संग्रहित शोध निकष एकतर पृष्ठ लोड करताना किंवा पोस्टबॅकचे अनुसरण करण्यासाठी येथे वापरला जातो. |
| DataTable().search() | अपडेट किंवा पृष्ठ लोड केल्यानंतर, कॅशे केलेले शोध मूल्य ही डेटाटेबल्स पद्धत वापरून ग्रिडवर परत लागू केले जाते. हे हमी देते की पूर्वी इनपुट केलेल्या शोध क्वेरीनुसार ग्रिड फिल्टर केले गेले आहे. |
| DataTable().draw() | शोध निकष लागू करते आणि डेटा टेबल पुन्हा काढते. जेव्हा AJAX किंवा अन्य तंत्र वापरून पृष्ठ रीफ्रेश किंवा अपडेट केले जाते, तेव्हा शोध संज्ञा पुन्हा लागू करण्यासाठी आणि फिल्टर केलेला डेटा दर्शविण्यासाठी या आदेशाची आवश्यकता असते. |
| on('keyup') | शोध इनपुट बॉक्समध्ये इव्हेंट हँडलर जोडते जेणेकरून प्रत्येक कीस्ट्रोक रेकॉर्ड केला जाईल. या उदाहरणात, वर्तमान शोध इनपुटसह सत्र संचयन अद्यतनित करून ग्रिड रीफ्रेश किंवा रीलोड केले तरीही शोध मूल्य राखले जाईल याची खात्री करते. |
| __doPostBack() | हे ASP.NET फंक्शन पोस्टबॅक सुरू करण्यासाठी JavaScript वापरून सर्व्हरला डेटा परत पाठवते. जेव्हा ग्रिडमधील आयटम निवडला जातो, तेव्हा स्क्रिप्टचा वापर सर्व्हरला वर्तमान शोध मूल्य संप्रेषण करण्यासाठी केला जातो, सर्व्हर-साइड प्रक्रियेदरम्यान शोध स्थिती राखली जाते याची हमी देते. |
| $.ajax() | सर्व्हरला असिंक्रोनस HTTP विनंती पाठवते. या प्रकरणात, संपूर्ण पृष्ठ रीलोड न करता सर्व्हरला शोध निकष पाठवून AJAX सह वेबसाइटचे विशिष्ट क्षेत्र (जसे की ग्रिड) अद्यतनित करताना शोध इनपुट संरक्षित करण्यात मदत करते. |
ASP.NET ग्रिडमध्ये शोध निकष जतन करण्यासाठी स्क्रिप्ट सोल्यूशन्स समजून घेणे
ऑफर केलेल्या स्क्रिप्ट्सचा उद्देश ASP.NET ऍप्लिकेशन्समधील सामान्य समस्या सोडवणे हा आहे जेथे वापरकर्ते ग्रिडमधून निवड करतात तेव्हा त्यांच्या शोध पॅरामीटर्सचा मागोवा गमावतात. पहिला दृष्टिकोन JavaScript चा वापर करून क्लायंटच्या बाजूने शोध इनपुट संचयित करतो सत्र संचयन कार्य या रणनीतीद्वारे वापरकर्ता अनुभव सुधारला आहे, जे वेबसाइट रीलोड झाल्यानंतरही शोध वाक्यांश सक्रिय राहते याची खात्री करते. जेव्हा पृष्ठ रीलोड होते किंवा एखादी वस्तू निवडली जाते, तेव्हा कॅशे केलेले शोध मूल्य ग्रिडवर स्थानिकरित्या कॅप्चर करून आणि सेव्ह करून पुन्हा लागू केले जाऊ शकते. या पद्धतीमुळे वापरकर्त्याला समान निकष प्रविष्ट करणे आवश्यक नाही.
दुसरी पद्धत सर्व्हर-साइड वापरते व्ह्यू स्टेट ASP.NET चे वैशिष्ट्य. या प्रकरणात, शोध मूल्य ViewState ऑब्जेक्टमध्ये ठेवले जाते, जे पोस्टबॅकमध्ये डेटा संरक्षित करते. जेव्हा वापरकर्ता ग्रिडशी संवाद साधतो आणि एखादी वस्तू निवडतो तेव्हा व्ह्यूस्टेटमध्ये ठेवलेले मूल्य पृष्ठावर परत पाठवले जाते. ही पद्धत हमी देते की शोध पॅरामीटर्स संपूर्ण सत्रासाठी प्रवेशयोग्य आहेत आणि सर्व्हर-साइड प्रक्रियेमध्ये सहजपणे समाविष्ट केले जातात. शोध इनपुट नुकसान टाळण्यासाठी, सर्व्हर क्लायंट-साइड ग्रिडवर शोध पुन्हा लागू करण्यासाठी स्क्रिप्ट चालवू शकतो.
AJAX पूर्ण-पृष्ठ रीलोड थांबविण्यासाठी तिसऱ्या दृष्टिकोनामध्ये वापरले जाते. जेव्हा एखादा आयटम निवडला जातो तेव्हा पृष्ठाचे डायनॅमिक अद्यतन होते, जे सर्व्हरला असिंक्रोनस विनंती ट्रिगर करते. हे शोध निकष ठेवते — जे AJAX विनंतीसह दिले जाते — ग्रिड रीफ्रेश होत असताना कुशलतेने. अपडेट पूर्ण झाल्यानंतर, JavaScript फंक्शन ग्रिडवर शोध मूल्य पुन्हा लागू करते. हे तंत्र वापरकर्त्याचा अनुभव वाढवण्यासाठी ग्रिडची स्थिती जपून ठेवत असिंक्रोनसपणे सामग्री अद्यतनित करते.
वेगळ्या प्रकारे, यापैकी प्रत्येक पद्धती शोध इनपुटच्या संरक्षणाची हमी देते. सोप्या क्लायंट-साइड सोल्यूशन्ससाठी, सत्र स्टोरेज तंत्र योग्य आहे, तर ViewState अधिक व्यापक ASP.NET धोरण ऑफर करते. AJAX हे सुनिश्चित करते की सर्व्हर-साइड अपडेट्स आणि क्लायंट-साइड इंटरॅक्टिव्हिटी यांच्यात संतुलन प्रदान करून वापरकर्त्याच्या क्रिया शोध प्रक्रियेत व्यत्यय आणत नाहीत. वापरकर्ता घर्षण कमी करणे आणि अखंड ASP.NET ग्रिड-आधारित डेटा परस्परसंवाद अनुभव जतन करणे या उद्दिष्टासह, प्रत्येक समाधान कार्यप्रदर्शन आणि उपयोगिता सर्वोत्तम पद्धतींचे पालन करते.
आयटम निवडीनंतर ASP.NET ग्रिडमध्ये शोध निकष राखणे
दृष्टीकोन 1: सेशन स्टोरेजसह JavaScript वापरणे (क्लायंट-साइड)
// JavaScript to store search criteria in session storage$(document).ready(function() {var searchValue = sessionStorage.getItem('searchValue') || '';var table = $('#gridViewArtifacts').DataTable({lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],searching: true,ordering: true,paging: true});table.search(searchValue).draw(); // Apply search from session$('#gridViewArtifacts_filter input').on('keyup', function() {sessionStorage.setItem('searchValue', $(this).val());});});
ASP.NET मध्ये पोस्टबॅक दरम्यान शोध इनपुट राखून ठेवणे
दृष्टीकोन 2: ASP.NET ViewState (सर्व्हर-साइड) वापरणे
१पूर्ण पृष्ठ रीलोड रोखण्यासाठी AJAX वापरून शोध निकष जतन करणे
दृष्टीकोन 3: आंशिक पृष्ठ अद्यतनांसाठी AJAX
// JavaScript for AJAX request to retain search after item selection$(document).ready(function() {$('#gridViewArtifacts').DataTable({lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],searching: true,ordering: true,paging: true});$('#chkSelect').on('change', function() {var searchValue = $('#gridViewArtifacts_filter input').val();$.ajax({type: 'POST',url: 'UpdateGrid.aspx',data: { searchValue: searchValue },success: function() {// Reapply search after AJAX update$('#gridViewArtifacts').DataTable().search(searchValue).draw();}});});});
ASP.NET आणि JavaScript सह ग्रिड शोध चिकाटी वाढवणे
पेज रिफ्रेश किंवा पोस्टबॅकनंतर ग्रिडमधील निवडलेल्या आयटमची हायलाइट केलेली स्थिती राखणे हा ASP.NET ग्रिड वापरकर्ता अनुभव अबाधित ठेवण्याचा एक महत्त्वाचा भाग आहे. वापरकर्ते त्यांच्या निवडी ठिकाणी राहतील अशी अपेक्षा करतात कारण ते इंटरफेसच्या इतर क्षेत्रांशी संवाद साधतात जेव्हा ते एकाधिक निवडी करतात. हे वारंवार कठीण असते कारण काही राज्ये ग्रिड बदलांच्या परिणामी रीसेट होऊ शकतात. JavaScript वापरणे आणि ViewState सक्षम करा हे निराकरण करण्याचा एक मार्ग म्हणजे पोस्टबॅक खालील निवड स्थिती संचयित करण्यासाठी आणि पुन्हा लागू करण्यासाठी विशेषता.
विकसक क्लायंट-साइड स्टोरेज वापरू शकतात, जसे स्थानिक स्टोरेज किंवा सत्र संचयन, संग्रहित शोध निकषांव्यतिरिक्त निवडलेल्या वस्तूंचा मागोवा ठेवण्यासाठी. हे विशेषतः अशा परिस्थितीत उपयुक्त आहे जेथे वापरकर्ते एकाच वेळी अनेक उत्पादने निवडतात. निवडलेले आयटम आयडी संचयित करून पृष्ठ रीलोड झाल्यानंतर ग्रिडवर निवड पुन्हा लागू करण्यासाठी JavaScript वापरता येते. वापरकर्त्याच्या क्रिया नष्ट होण्यापासून रोखून, हे तंत्र संपूर्ण वापरकर्ता अनुभव मोठ्या प्रमाणात वाढवते.
अधिक क्लिष्ट ग्रिडसाठी चांगल्या गतीची हमी दिली जाते, विशेषत: जे मोठे डेटासेट व्यवस्थापित करतात, AJAX अद्यतने वापरून. संपूर्ण ग्रिड रीलोड करण्याची गरज वाचवून शोध पॅरामीटर्स आणि निवडलेल्या वस्तू अखंड ठेवून आंशिक बदल केले जाऊ शकतात. एकत्रित करून अधिक द्रव आणि परस्परसंवादी ग्रिड अनुभव प्राप्त केला जातो AJAX सर्व्हर-साइड लॉजिकसह, जे वेबसाइटला त्यांच्या वर्कफ्लोमध्ये हस्तक्षेप न करता वापरकर्त्याच्या क्रियाकलापांशी गतिशीलपणे जुळवून घेण्यास सक्षम करते.
ASP.NET ग्रिडमध्ये शोध आणि निवड जतन करण्यासाठी वारंवार विचारले जाणारे प्रश्न आणि त्यांची उत्तरे
- पोस्टबॅक नंतर मी शोध निकष कसे राखू शकतो?
- शोध इनपुट मध्ये संचयित करून पोस्टबॅक दरम्यान शोध निकष जतन केले जाऊ शकतात sessionStorage किंवा १.
- वेबसाइट रिफ्रेश झाल्यावर, मी माझ्या निवडी ग्रिडमध्ये राखू शकतो का?
- होय, जेव्हा पृष्ठ रीलोड होईल तेव्हा निवडलेले आयटम आयडी पुन्हा लागू करण्यासाठी JavaScript चा वापर करून आणि त्यात सेव्ह करून localStorage किंवा sessionStorage.
- ग्रिड आयटम निवडताना, पृष्ठ पूर्णपणे रीलोड होण्यापासून थांबवण्याचा एक मार्ग आहे का?
- आंशिक पृष्ठ अद्यतनांसाठी, वापरा AJAX ग्रिड पूर्णपणे रीलोडिंग टाळण्यासाठी आणि शोध पॅरामीटर्स जतन करण्यासाठी.
- पोस्टबॅक दरम्यान क्रमवारी आणि पेजिंग निवडी जतन केल्या जाऊ शकतात?
- होय, नोकरी ५; वैकल्पिकरित्या, वापरा sessionStorage किंवा १ स्थिती राखण्यासाठी मालमत्ता.
- ग्रिडमधील आयटमची निवड आणि शोध सातत्य एकत्र?
- होय, तुम्ही जावास्क्रिप्ट वापरू शकता शोध निकष आणि निवडलेल्या आयटममध्ये संग्रहित केल्यानंतर पृष्ठ रीलोड झाल्यावर ते पुन्हा लागू करण्यासाठी sessionStorage.
ASP.NET ग्रिड्समध्ये शोध आणि निवडीचे अंतिम विचार
ASP.NET ग्रिडमध्ये वापरकर्ता अनुभव सुधारण्यासाठी आयटम निवडल्यानंतर शोध निकष ठेवण्याची आवश्यकता आहे. क्लायंट-साइड आणि सर्व्हर-साइड धोरणे हमी देतात की वापरकर्ते पोस्टबॅकिंग दरम्यान त्यांचे शोध इनपुट राखतात. याचा परिणाम अधिक अखंड आणि वापरकर्ता-अनुकूल इंटरफेसमध्ये होतो.
शोध इनपुट आणि निवडलेल्या आयटम जतन करणे, द्वारे असो व्ह्यू स्टेट धारणा किंवा JavaScript स्टोरेज, हे उद्दिष्ट आहे. यामुळे त्रास कमी झाला पाहिजे. या तंत्रांचा वापर करून, तुम्ही तुमच्या ग्रीड-आधारित ॲप्सचे डायनॅमिक आणि वापरकर्ता-अनुकूल स्वरूप राखू शकता तसेच एकूण उपयोगिता वाढवू शकता.
ASP.NET ग्रिड शोध चिकाटीसाठी संदर्भ आणि स्त्रोत सामग्री
- वर सविस्तर माहिती ASP.NET ViewState आणि ते पोस्टबॅक दरम्यान डेटा कसे संरक्षित करते ते यावरून प्राप्त झाले मायक्रोसॉफ्टचे अधिकृत दस्तऐवजीकरण .
- द डेटाटेबल्स JavaScript शोध कार्यक्षमतेमध्ये वापरलेले एकीकरण वरून संदर्भित होते DataTables अधिकृत दस्तऐवजीकरण .
- चा वापर सत्र संचयन क्लायंट-साइड डेटा संचयित करण्यासाठी JavaScript मध्ये उदाहरणे वापरून शोधले गेले MDN वेब डॉक्स .
- अंमलबजावणीबाबत मार्गदर्शन केले AJAX ग्रिड स्थिती राखत असताना पृष्ठ रीलोड होण्यापासून रोखण्यासाठी कडून गोळा केले गेले W3Schools AJAX ट्यूटोरियल .