Sono felice di dire che oggi pubblichiamo il nostro primo articolo su ASP.NET. In questo screencast, ti mostrerò come implementare una semplice funzionalità di ricerca nel tuo sito web personale. Analizzeremo molte delle nuove funzionalità di ASP.NET 3.5, come LINQ e molti dei controlli AJAX forniti con Visual Studio / Web Developer.
* Fare clic sull'icona a schermo intero per massimizzare il video.
Dichiarazione di missione
Svilupperemo una semplice funzionalità di ricerca per il nostro sito. Creeremo un sito bare bones che contiene una singola casella di testo e un pulsante. Quando si fa clic sul pulsante, scriveremo un codice LINQ che recupererà le informazioni applicabili dal nostro database e le visualizzerà sulla pagina. Inoltre, consentiremo il post-back delle pagine parziali utilizzando il pannello di aggiornamento e i controlli di aggiornamento.
Cosa hai bisogno di sapere
In questo screencast, assumerò che tu abbia una certa conoscenza del framework. Quindi, anche se spiegherò tutto al meglio delle mie capacità, mi aspetterò che tu sappia alcune cose. Se sei un principiante completo, lascia un commento e lavoreremo per ottenere un articolo "From Scratch" pubblicato a breve nel prossimo futuro.
Passaggio 1: creazione del database
Creerò un database "Blog". Per semplicità, aggiungerò solo alcune colonne: "BlogId", "BlogTitle", "BlogContents". In una situazione reale, dovresti aggiungere cose come "BlogAutore", "BlogFeaturedImage", "CommentsId", ecc.. Dopo aver riempito queste colonne con alcuni contenuti senza senso, siamo pronti a costruire il nostro webform.
Passaggio 2: il controllo Listview
La cosa meravigliosa del controllo listview è che ti permette di mantenere il controllo al 100% sul tuo markup. Invece di dover trattare con i tavoli, posso specificare tutto ciò che mi piace.
LayoutTemplate: Questo modello funge da involucro per ogni oggetto. Ad esempio, se ogni elemento era all'interno di un tag "li", è possibile aggiungere un tag "ul" nel modello di layout come "wrap".
ItemTemplate: Questo descriverà il layout per ogni elemento nel database. Se, ad esempio, abbiamo 10 voci del blog nel database, ci saranno successivamente 10 voci.
All'interno del modello dell'articolo, ho specificato che il controllo listview dovrebbe visualizzare solo un collegamento ipertestuale. Questo collegamento ipertestuale avrà il suo attributo di testo uguale a qualunque sia il valore nel database per la riga associata. Sto anche andando a impostare la proprietà NavigateUrl (l'href) su una nuova pagina. Questa pagina entry.aspx servirà come modello per ogni voce. Specificheremo quale voce deve essere visualizzata tramite la querystring. (Maggiori informazioni su questo nello screencast.)
Passaggio 3: LINQ
LINQ è un modello di programmazione che consente di accedere a molte diverse forme di dati utilizzando la stessa sintassi. Con LINQ to SQL, consente un modo fortemente tipizzato di comunicare con il proprio database relazionale. Immagina di poter utilizzare la stessa query per accedere a XML, oggetti, database relazionali, API, ecc. È un modello incredibile ed è facilmente la mia nuova caratteristica preferita in ASP.NET 3.5.
Piuttosto che incorporare codice SQL direttamente nel tuo codice dietro ai file, ora puoi trattare ogni colonna nelle tabelle del tuo database come qualsiasi altro oggetto. Questo si ottiene creando una classe LINQ to SQL. Questa classe crea automaticamente gli oggetti del database per te.
Protetto Sub btnSubmit_Click (ByVal sender Come oggetto, ByVal e As System.EventArgs) Gestisce btnSubmit.Click Dim db As New BlogDBDataContext () Dim q = Da b In db.Blogs _ Dove b.BlogContents.Contains (txtSearch.Text.Trim ( )) Oppure _ b.BlogTitle.Contains (txtSearch.Text.Trim ()) _ Seleziona b lv.DataSource = q lv.DataBind () End Sub
Quando l'utente fa clic sul pulsante "Cerca", questo codice recupera solo le voci dal database che contengono il valore inserito nella casella di testo di ricerca. Questi valori saranno restituiti e memorizzati nella variabile "q". Quindi impostiamo l'origine dati del nostro controllo listview su "q" e lo catalogiamo.
Step 4: AJAXificare la nostra pagina
In questa semplice dimostrazione, non farà veramente la differenza se l'intera pagina sarà postata o meno. Tuttavia, in un sito di dimensioni medio-grandi, eseguire un intero postback può essere un problema. Stiamo andando a racchiudere il contenuto del nostro controllo listview all'interno di un pannello di aggiornamento per aggiornare solo queste informazioni specifiche.
Nota il tag "Trigger". Se il nostro pulsante è stato annidato all'interno del pannello di aggiornamento, il pannello di aggiornamento si aggiornava automaticamente quando si fa clic sul pulsante. Tuttavia, in questo caso, il nostro pulsante è esterno al pannello di aggiornamento. In questi casi, è necessario aggiungere un "ASyncPostBackTrigger" che punta al pulsante che attiverà il post del pannello di aggiornamento..
Passaggio 5: Feedback dell'utente
Quando si implementano aggiornamenti di pagina parziali, l'utente può a volte diventare perplesso. Può sembrare che la pagina non stia semplicemente rispondendo. Per compensare, aggiungeremo l'onnipresente "icona di caricamento" alla pagina. Ciò fornirà all'utente alcuni feedback per fargli sapere che la pagina è in effetti elaborata. Possiamo utilizzare il controllo "Avanzamento aggiornamento" per eseguire questa operazione.
All'interno del modello di avanzamento, ho aggiunto un tag immagine che contiene la mia icona di caricamento. Pertanto, mentre il pannello degli aggiornamenti si aggiorna, verrà visualizzata questa icona di caricamento. Al termine del post, l'icona scomparirà.
Hai finito
Anche se questo articolo si è mosso un po 'in fretta, lo screencast descrive ogni metodo passo dopo passo. Se hai altre domande, lascia un commento e faremo del nostro meglio per aiutarti. Quello che ho fornito oggi è un modo semplice per cercare il tuo sito. Tuttavia, in una situazione reale, molto probabilmente implementerai un metodo di ricerca più avanzato. Mi piacerebbe sentire i tuoi pensieri sui modi migliori per farlo.
Se desideri più tuts ASP.NET, essere ascoltato! Lascia un commento e dai la tua opinione. Questo quadro è troppo potente per ignorarlo. Digg it, SU it, DZone it! Grazie a tutti! Ciao ciao!
Iscriviti agli Screencast settimanali
Puoi aggiungere il nostro feed RSS ai tuoi podcast ITUNES effettuando le seguenti operazioni:
Una volta caricato ITUNES, fai clic su "Scheda Avanzate"
Share
Accentsconagua
