ASP.NET கிரிட் தேடல் மற்றும் தேர்வில் பயனர் அனுபவத்தை மேம்படுத்துதல்
ASP.NET பயன்பாடுகளில், கிரிட் இடைமுகத்தில் உள்ள பொருட்களைத் தேடி, தேர்ந்தெடுக்கும் திறனை வாடிக்கையாளர்களுக்கு வழங்குவது அடிக்கடி இடம்பெறும் அம்சமாகும். இருப்பினும், டெவலப்பர்கள் அடிக்கடி ஒரு சிக்கலை எதிர்கொள்கின்றனர்: ஒரு பொருளைத் தேர்ந்தெடுக்கும்போது கட்டம் புதுப்பிக்கப்படும் மற்றும் தேடல் அளவுருக்கள் இழக்கப்படும். ஒவ்வொரு முறையும் அவர்கள் ஒரு புதிய பொருளைத் தேர்ந்தெடுக்கும்போது அவர்கள் தேடலை மறுதொடக்கம் செய்ய வேண்டியிருப்பதால், இது பயனர்களை எரிச்சலடையச் செய்யலாம்.
பயன்பாட்டினை மேம்படுத்த, பின்னடைவு அல்லது கட்டம் புதுப்பிப்பைத் தொடர்ந்து தேடல் அளவுகோல்களைப் பாதுகாப்பது அவசியம். நுகர்வோர் ஒரே தரநிலைகளின் அடிப்படையில் பல விருப்பங்களைத் தேர்ந்தெடுக்க வேண்டியிருக்கும் போது இது மிகவும் முக்கியமானது. தேடல் சொற்கள் தொலைந்துவிட்டால், செயல்முறை தேவையில்லாமல் மீண்டும் மீண்டும் செய்யப்படும்.
அதிர்ஷ்டவசமாக, ஜாவாஸ்கிரிப்ட் மற்றும் 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 செயல்பாடு ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி ஒரு போஸ்ட்பேக்கைத் தொடங்குவதன் மூலம் தரவை மீண்டும் சேவையகத்திற்கு அனுப்புகிறது. கட்டத்தில் உள்ள உருப்படி தேர்ந்தெடுக்கப்பட்டால், ஸ்கிரிப்ட் தற்போதைய தேடல் மதிப்பை சேவையகத்திற்குத் தெரிவிக்கப் பயன்படுகிறது, இது சர்வர் பக்கச் செயல்பாட்டின் போது தேடல் நிலை பராமரிக்கப்படும் என்று உத்தரவாதம் அளிக்கிறது. |
$.ajax() | சேவையகத்திற்கு ஒத்திசைவற்ற HTTP கோரிக்கையை அனுப்புகிறது. இந்த நிலையில், முழுப் பக்கத்தையும் மறுஏற்றம் செய்யாமல் சர்வருக்கு தேடல் அளவுகோல்களை அனுப்புவதன் மூலம், அஜாக்ஸுடன் இணையதளத்தின் குறிப்பிட்ட பகுதிகளை (கட்டம் போன்றது) புதுப்பிக்கும் போது, தேடல் உள்ளீட்டைப் பாதுகாக்க இது உதவுகிறது. |
ASP.NET கிரிட்டில் தேடல் அளவுகோல்களைப் பாதுகாப்பதற்கான ஸ்கிரிப்ட் தீர்வுகளைப் புரிந்துகொள்வது
ASP.NET பயன்பாடுகளில் உள்ள பொதுவான சிக்கலை நிவர்த்தி செய்வதே வழங்கப்படும் ஸ்கிரிப்ட்களின் நோக்கமாகும், அங்கு பயனர்கள் ஒரு கட்டத்திலிருந்து தேர்வு செய்யும் போது அவர்களின் தேடல் அளவுருக்களை இழக்கிறார்கள். முதல் அணுகுமுறை ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி கிளையன்ட் பக்கத்தில் தேடல் உள்ளீட்டைச் சேமிக்கிறது செயல்பாடு. இந்த உத்தியால் பயனர் அனுபவம் மேம்படுத்தப்பட்டுள்ளது, இது இணையதளம் மீண்டும் ஏற்றப்பட்ட பிறகும் தேடல் சொற்றொடர் செயலில் இருப்பதை உறுதி செய்கிறது. பக்கம் மீண்டும் ஏற்றப்படும் போது அல்லது ஒரு உருப்படி தேர்ந்தெடுக்கப்பட்டால், உள்ளீட்டை உள்ளீட்டில் கைப்பற்றி சேமிப்பதன் மூலம் தேக்ககப்படுத்தப்பட்ட தேடல் மதிப்பை மீண்டும் கட்டத்திற்குப் பயன்படுத்தலாம். இந்த முறைக்கு நன்றி, பயனர் தொடர்ந்து அதே அளவுகோல்களை உள்ளிட வேண்டியதில்லை.
மற்றொரு முறை சர்வர் பக்கத்தைப் பயன்படுத்துகிறது ASP.NET இன் அம்சம். இந்த வழக்கில், தேடல் மதிப்பு ViewState ஆப்ஜெக்ட்டில் வைக்கப்படுகிறது, இது போஸ்ட்பேக்குகள் முழுவதும் தரவைப் பாதுகாக்கிறது. ஒரு பயனர் கட்டத்துடன் தொடர்புகொண்டு உருப்படியைத் தேர்ந்தெடுக்கும்போது ViewState இல் வைக்கப்பட்டுள்ள மதிப்பு மீண்டும் பக்கத்திற்கு அனுப்பப்படும். இந்த முறை தேடல் அளவுருக்கள் முழு அமர்விற்கும் அணுகக்கூடியது மற்றும் சேவையக பக்க செயலாக்கத்தில் எளிதாக இணைக்கப்படும் என்று உத்தரவாதம் அளிக்கிறது. தேடல் உள்ளீடு இழப்பைத் தடுக்க, சேவையகம் கிளையன்ட் பக்க கட்டத்திற்கு தேடலை மீண்டும் பயன்படுத்த ஸ்கிரிப்டை இயக்கலாம்.
முழுப் பக்க மறுஏற்றத்தை நிறுத்த மூன்றாவது அணுகுமுறையில் பயன்படுத்தப்படுகிறது. ஒரு உருப்படியைத் தேர்ந்தெடுக்கும்போது பக்கத்தின் மாறும் புதுப்பித்தல் ஏற்படுகிறது, இது சேவையகத்திற்கு ஒத்திசைவற்ற கோரிக்கையைத் தூண்டுகிறது. இது அஜாக்ஸ் கோரிக்கையுடன் கொடுக்கப்பட்ட தேடல் அளவுகோல்களை கட்டம் புதுப்பிக்கும் போது தந்திரமாக வைத்திருக்கும். புதுப்பிப்பு முடிந்ததும், ஜாவாஸ்கிரிப்ட் செயல்பாடு தேடல் மதிப்பை மீண்டும் கட்டத்திற்குப் பயன்படுத்துகிறது. இந்த நுட்பம் பயனர் அனுபவத்தை அதிகரிக்க, கட்டத்தின் நிலையைப் பாதுகாக்கும் போது, ஒத்திசைவற்ற முறையில் பொருளைப் புதுப்பிக்கிறது.
வெவ்வேறு வழியில், இந்த முறைகள் ஒவ்வொன்றும் தேடல் உள்ளீட்டைப் பாதுகாக்க உத்தரவாதம் அளிக்கிறது. எளிமையான கிளையன்ட் தீர்வுகளுக்கு, செஷன் ஸ்டோரேஜ் நுட்பம் பொருத்தமானது, அதே சமயம் ViewState ஒரு விரிவான ASP.NET உத்தியை வழங்குகிறது. AJAX, சர்வர் பக்க மேம்படுத்தல்கள் மற்றும் கிளையன்ட் பக்க ஊடாடுதல் ஆகியவற்றுக்கு இடையே சமநிலையை வழங்குவதன் மூலம் பயனர் செயல்கள் தேடல் செயல்பாட்டில் தலையிடாது என்பதை உறுதி செய்கிறது. பயனர் உராய்வைக் குறைப்பது மற்றும் தடையற்ற ASP.NET கிரிட் அடிப்படையிலான தரவு தொடர்பு அனுபவத்தைப் பாதுகாப்பது ஆகியவற்றின் நோக்கத்துடன், ஒவ்வொரு தீர்வும் செயல்திறன் மற்றும் பயன்பாட்டிற்கான சிறந்த நடைமுறைகளை கடைபிடிக்கிறது.
பொருள் தேர்வுக்குப் பிறகு ASP.NET கிரிட்டில் தேடல் அளவுகோலைப் பராமரித்தல்
அணுகுமுறை 1: அமர்வு சேமிப்பகத்துடன் ஜாவாஸ்கிரிப்டைப் பயன்படுத்துதல் (கிளையண்ட்-பக்கம்)
// 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 (Server-Side) பயன்படுத்துதல்
' VB.NET Code-Behind: Store search criteria in ViewState
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not IsPostBack Then
ViewState("SearchValue") = String.Empty
End If
End Sub
Protected Sub chkSelect_CheckedChanged(ByVal sender As Object, ByVal e As EventArgs)
' Retain search criteria in ViewState
Dim searchValue As String = CType(ViewState("SearchValue"), String)
ScriptManager.RegisterStartupScript(Me, Me.GetType(), "ApplySearch",
"document.getElementById('gridViewArtifacts_filter').value = '" & searchValue & "';", True)
End Sub
' Frontend JavaScript to capture search input
$(document).ready(function() {
$('#gridViewArtifacts_filter input').on('input', function() {
__doPostBack('UpdateSearch', $(this).val());
});
});
முழுப் பக்கத்தை மீண்டும் ஏற்றுவதைத் தடுக்க அஜாக்ஸைப் பயன்படுத்தி தேடல் அளவுகோல்களைப் பாதுகாத்தல்
அணுகுமுறை 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 ஐப் பயன்படுத்தலாம். பயனர் செயல்கள் இழக்கப்படுவதைத் தடுப்பதன் மூலம், இந்த நுட்பம் முழு பயனர் அனுபவத்தையும் பெரிதும் மேம்படுத்துகிறது.
அஜாக்ஸ் புதுப்பிப்புகளைப் பயன்படுத்தி, அதிக சிக்கலான கட்டங்களுக்கு, குறிப்பாக பெரிய தரவுத்தொகுப்புகளை நிர்வகிக்கும் கட்டங்களுக்கு சிறந்த வேகம் உத்தரவாதம் அளிக்கப்படுகிறது. தேடல் அளவுருக்கள் மற்றும் தேர்ந்தெடுக்கப்பட்ட பொருள்களை அப்படியே வைத்திருக்கும் போது பகுதி மாற்றங்களைச் செய்யலாம், முழு கட்டத்தையும் மீண்டும் ஏற்ற வேண்டிய அவசியத்தைச் சேமிக்கிறது. இணைப்பதன் மூலம் அதிக திரவ மற்றும் ஊடாடும் கட்ட அனுபவம் அடையப்படுகிறது சர்வர் பக்க லாஜிக்குடன், பயனர்களின் செயல்பாடுகளுக்கு அவர்களின் பணிப்பாய்வுகளில் தலையிடாமல் மாறும் வகையில் மாற்றியமைக்க இணையதளத்தை செயல்படுத்துகிறது.
- பின்னூட்டத்திற்குப் பிறகு நான் எப்படி தேடல் அளவுகோலைப் பராமரிப்பது?
- தேடல் உள்ளீட்டை சேமித்து வைப்பதன் மூலம் தேடல் அளவுகோல்களை போஸ்ட்பேக்குகளுக்கு இடையில் பாதுகாக்க முடியும் அல்லது .
- இணையதளம் புதுப்பிக்கப்படும்போது, எனது தேர்வுகளை கிரிட்டில் பராமரிக்க முடியுமா?
- ஆம், ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி, பக்கம் மீண்டும் ஏற்றப்படும்போது, தேர்ந்தெடுத்த உருப்படி ஐடிகளை மீண்டும் பயன்படுத்தவும், அவற்றைச் சேமித்து வைக்கவும் அல்லது .
- கட்டம் உருப்படிகளைத் தேர்ந்தெடுக்கும்போது, பக்கத்தை முழுமையாக மறுஏற்றம் செய்வதைத் தடுக்க வழி உள்ளதா?
- பகுதியளவு பக்க புதுப்பிப்புகளுக்கு, பயன்படுத்தவும் கட்டம் முழுவதுமாக மீண்டும் ஏற்றப்படுவதைத் தவிர்க்கவும் மற்றும் தேடல் அளவுருக்களைப் பாதுகாக்கவும்.
- வரிசைப்படுத்துதல் மற்றும் பேஜிங் தேர்வுகளை போஸ்ட்பேக்குகளுக்கு இடையே பாதுகாக்க முடியுமா?
- ஆம், பணியமர்த்தவும் ; மாற்றாக, பயன்படுத்தவும் அல்லது தி நிலைமையை பராமரிக்க சொத்து.
- கிரிட்டில் உருப்படி தேர்வு மற்றும் தேடல் நிலைத்தன்மையை ஒன்றாக இணைக்கவா?
- ஆம், தேடல் அளவுகோல் மற்றும் தேர்ந்தெடுக்கப்பட்ட உருப்படிகளை பக்கம் மீண்டும் ஏற்றும்போது அவற்றை மீண்டும் பயன்படுத்த JavaScript ஐப் பயன்படுத்தலாம். .
ASP.NET கட்டங்களில் பயனர் அனுபவத்தை மேம்படுத்த, உருப்படிகள் தேர்ந்தெடுக்கப்பட்டவுடன் தேடல் அளவுகோல்களை வைத்திருக்க வேண்டும். வாடிக்கையாளர் பக்க மற்றும் சர்வர் பக்க உத்திகள் பயனர்கள் தங்கள் தேடல் உள்ளீட்டை போஸ்ட்பேக்கிங்கின் போது பராமரிக்க உத்தரவாதம் அளிக்கின்றன. இது மிகவும் தடையற்ற மற்றும் பயனர் நட்பு இடைமுகத்தை விளைவிக்கிறது.
தேடல் உள்ளீடு மற்றும் தேர்ந்தெடுக்கப்பட்ட உருப்படிகளைப் பாதுகாத்தல் தக்கவைத்தல் அல்லது சேமிப்பு, நோக்கம். இது எரிச்சலைக் குறைக்க வேண்டும். இந்த நுட்பங்களைப் பயன்படுத்துவதன் மூலம், உங்கள் கட்டம் சார்ந்த பயன்பாடுகளின் மாறும் மற்றும் பயனர் நட்பு தன்மையை நீங்கள் பராமரிக்கலாம், அதே நேரத்தில் ஒட்டுமொத்த பயன்பாட்டினை மேம்படுத்தலாம்.
- பற்றிய விரிவான தகவல்கள் மற்றும் போஸ்ட்பேக்குகளுக்கு இடையில் தரவை எவ்வாறு பாதுகாக்கிறது என்பது இதிலிருந்து பெறப்பட்டது மைக்ரோசாப்டின் அதிகாரப்பூர்வ ஆவணம் .
- தி ஜாவாஸ்கிரிப்ட் தேடல் செயல்பாட்டில் பயன்படுத்தப்படும் ஒருங்கிணைப்பு இதிலிருந்து குறிப்பிடப்பட்டது DataTables அதிகாரப்பூர்வ ஆவணங்கள் .
- பயன்பாடு ஜாவாஸ்கிரிப்டில் கிளையன்ட் தரவைச் சேமிப்பதற்கான எடுத்துக்காட்டுகளைப் பயன்படுத்தி ஆராயப்பட்டது MDN வெப் டாக்ஸ் .
- செயல்படுத்துவதற்கான வழிகாட்டுதல் கிரிட் நிலையைப் பராமரிக்கும் போது பக்கத்தை மீண்டும் ஏற்றுவதைத் தடுக்க, இலிருந்து சேகரிக்கப்பட்டது W3Schools AJAX பயிற்சி .