Utilizzando Razor con Visual Basic

Costruire un sito Web utilizzando MVC 3 e il motore di visualizzazione Razor.

Nella mia comunità di sviluppatori locali, la popolarità del Model-View-Controller piattaforma di sviluppo Web di Microsoft è chiaramente in aumento, soprattutto a partire dalla versione 3 - con il motore di visualizzazione Razor - è stato rilasciato lo scorso gennaio, e di ASP.NET MVC strumenti di aggiornamento è stato rilasciato nel mese di aprile.

Alcuni esempi:

• Nella recente Giornata di Lansing. Evento NET, la MVC 3 presentazione è stata più popolari della giornata, con il 70 per cento dei partecipanti in un affollato in piedi-stanza-soltanto sessione.
• Una società di consulenza di Microsoft Access sta sviluppando il suo primo Microsoft. NET Web in MVC 3, attratti dalla vista codice HTML pulito e nitido sintassi del motore di visualizzazione Razor.
• L'interno è di un grande gruppo multinazionale azienda ha impostato MVC 3 come standard per le applicazioni web.

Credo che questi sono un microcosmo del forte interesse per MVC motore 3 Razor vista in tutto il pieno. NET comunità dev web.

Una delle frustrazioni prima volta dagli sviluppatori Visual Basic che cercheranno di adottare MVC 3 è che la maggior parte degli esempi sono presentati in C #, e le differenze linguistiche possono rendere l'utilizzo degli esempi difficili.Questo articolo illustra un Visual Basic MVC 3 Vista Razor sito Web del motore con le caratteristiche che sono tipiche di un'applicazione completa.

I dimostrare Create, Read, Update, Delete (CRUD) le operazioni su un SQL Compact 3,5 database utilizzando LINQ to SQL. La tabella del database viene aggiornato con viste separate seguendo le impalcature generati dai modelli di Visual Studio. MvcMailer è adattato per lavorare con Visual Basic per inviare e-mail, con il corpo del messaggio HTML preparato con la potenza del motore di visualizzazione Razor. La sicurezza è applicata in base all'appartenenza dell'utente in ruoli di sicurezza, sia limitando l'accesso alle azioni di controllo particolari e fornendo contenuto alternativo in vista HTML basato su ruoli di protezione.

Questo articolo non vuole essere una completa introduzione al MVC 3 concetti, ma piuttosto un esempio di come preparare un Visual Basic MVC 3 Vista Razor sito Web del motore con caratteristiche comunemente richiesti. Download del codice contiene una completamente funzionale di Visual Basic MVC 3 Vista Razor sito Web del motore. Consigli e trucchi per i controller e le viste sono condivisi.

La pagina ufficiale MSDN Library documentazione per MVC 3 è qui . MSDN Download codice può essere trovato qui .

Crea un 3 Progetto Razor MVC con un database
Per prima cosa, assicurarsi di avere l'ambiente adeguato sviluppo MVC per 3. Avrete bisogno di Visual Studio 2010 o Visual Web Developer 2010 Express. Installare l'aprile 2011 MVC 3 Update Tools. Ottenere ciò che vi serve qui . Creare una nuova soluzione e scegliere il 3 ASP.NET MVC Web Application, applicazioni Internet (autenticazione basata su form) e vista del motore Razor con HTML5 markup semantico. Immediatamente eseguire l'applicazione, fare clic su Accedi e registrarsi come nuovo utente per creare il database ASPNETDB.MDF nella cartella del progetto Web App_Data.

Questo articolo utilizza Microsoft fornito esempio di SQL Server Compact Edition (SSCE) versione 3.5 del database Northwind.sdf, normalmente installato in C: \ Programmi \ Microsoft SQL Server Compact Edition \ v3.5 \ Samples. Per semplicità, LINQ to SQL sarà utilizzato per accedere al database. Un file batch è incluso nel download del codice per dimostrare come generare il file di codice necessari DataContext con l'utilità SQLMetal. Questo file DataContext deve essere generato e incluso nella soluzione con un successo prima di costruire una qualsiasi delle classi di dati possono essere visti durante la generazione viste MVC. Come per ogni LINQ to SQL progetto, un riferimento a System.Data.Linq è necessaria nel progetto. SSCE 4.0 non è supportato da LINQ to SQL.

Nota: Entity Framework (EF) 4.1 con l'API DbContext e dispongono di codice prima potrebbe finalmente fornire una valida alternativa a LINQ to SQL, quando l'esigenza di eliminare e ricreare il database su qualsiasi modifica dello schema è stato risolto. Vedi post del blog di Scott Hanselman per ulteriori informazioni.

CRUD e dettagli per i clienti
L'impalcatura di default MVC presuppone che le funzioni CRUD verranno trattati da diverse pagine web, guidato da una pagina di elenco di dati. Aggiungere una scheda di menu cliente modificando il file _Layout.vbhtml per includere questa linea come un nuovo elemento del tag <nav>:

<li> @ Html.ActionLink ("Cliente", "Indice", "Cliente") </ li>

E 'più facile per creare il primo controller, e quindi creare le viste necessarie cliccando col tasto destro il nome dell'azione del controller e scegliendo la visualizzazione Aggiungi ... opzione. Creare un controller di clienti con vuoti di lettura / scrittura azioni. Fare clic destro l'indice visualizzare e creare una vista Index, fortemente tipizzato alla tabella Clienti con i Razor (VBHTML) motore di visualizzazione e il modello Lista patibolo. Allo stesso modo creare viste fortemente tipizzate per ciascuna delle azioni di controllo ancora con il loro modello corrispondente patibolo - per esempio, Dettagli vista con dettagli patibolo e così via. La struttura essenziale di un motore di Visual Basic vista Razor è mostrato in Listato 1 con un singolo campo attuate.

Per impostazione predefinita, Visto ha generato non mostrano un riepilogo degli errori. Per consentire agli utenti di vedere chiaramente eventuali messaggi di errore generato, change@Html.ValidationSummary (True) to@Html.Validation-Summary (False) nella vista.

Ora aggiungere LINQ to SQL codice per fornire i dati da visualizzare i punti di vista, e per elaborare i dati ricevuti dal osservazioni su submit. Il modello di controllo assume che la chiave della tabella sarebbe stata una identità di semi interi, ma nella tabella Northwind clienti, il campo CustomerID è una stringa. Di conseguenza, cambiare tutte le occorrenze di "id come intero" a "id come stringa" nel controller del cliente e aggiungere un campo CustomerID dati alle opinioni Creare e modificare dopo la </ legend> tag come segue:

<div class="editor-label">
  @ Html.LabelFor (funzione (modello) model.CustomerID)
</ Div>
<div class="editor-field">
  @ Html.EditorFor (funzione (modello) model.CustomerID)
  @ Html.ValidationMessageFor (funzione (modello) model.CustomerID)
</ Div>

In qualsiasi controller tipici, diverse azioni hanno sia una versione HttpGet e una versione HttpPost. Il codice per l'azione Modifica illustra lo schema di fornire dati sul HttpGet ed elaborare i dati sul HttpPost, come mostrato nel Listato 2 .Vedere il download del codice per i metodi di azione rimanenti. Off Option Strict è necessario per usare il late-binding dinamico ViewBag oggetto. Se si preferisce lasciare Option Strict On, il metodo Viewdata può essere utilizzato.

Ogni vista ha bisogno di un modo per mostrare gli errori dal controller. Luogo Razor motore codice vista simile a Listato 3 nella parte superiore di ogni vista.

Trucchi e consigli per i controller
Il modello passò alla vista dovrebbe rappresentare il record di dati centrale o record in fase di elaborazione dalla vista.Secondaria di sola visualizzazione informazioni, come le informazioni sugli indirizzi legati da la chiave nel modello, dovrebbe essere passato alla vista dal Viewbag o oggetti Viewdata.

Forme sviluppatori Web possono essere comodo utilizzare sessione HTTP per memorizzare informazioni che devono persistere tra i pali. MVC introduce TempData, che fa uso di sessione, ma solo fino alla richiesta successiva. Ciò può causare problemi se una chiamata AJAX è fatta tra i posti, come quella chiamata chiaro TempData. Se avete bisogno di mantenere i dati al di là della durata della vita TempData, sentitevi liberi di utilizzare sessione - ma essere sicuri di cancellarlo quando hai finito.

L'(entità) metodo TryUpdateModel riempie ogni proprietà nel soggetto con corrispondente proprietà della collezione modulo. Più complesse visualizzazioni possono essere supportati con l'uso TryUpdateModel in un HttpPost metodo con più entità. Per esempio, se una vista Creare l'utente può inserire sia cliente e sull'ordine, il HttpPost dovrebbe contenere:

TryUpdateModel (cliente)
TryUpdateModel (ordine)

Il controller del cliente accede al database direttamente, il che rende il controller di unità di test più difficile. Per il test di migliore qualità, possibilità di modificare il controllore di chiamare i metodi del servizio database definito da una interfaccia in modo che l'interfaccia può essere implementata da finto metodi di calcestruzzo durante il test di unità.

Utilizzo delle viste 
Le viste sono tradotti in formati HTML standard del motore di visualizzazione Razor, quindi le regole di pagine Web e le funzionalità sono ancora validi. Tutti i campi che devono comparire nella collezione HttpPost modulo deve essere contenuta nell'ambito di applicazione tag form, anche se solo un campo di tipo input nascosti. Le viste possono e spesso contengono jQuery per fornire l'automazione interfaccia utente, la convalida o chiamate AJAX per il controller per convalida in tempo reale. Cercate di mantenere la logica all'interno della vista più semplice possibile per unit testing più facile.

Le viste possono essere modificati, salvati e aggiornati per vedere i cambiamenti, mentre l'applicazione rimane in esecuzione. Visualizza sorgente pagina e Firebug sono ancora strumenti molto utili per risolvere i problemi con vista. Si noti che Listato 3 mostra che il codice HTML all'interno di un blocco di codice @ - deve essere preceduto dal simbolo @.

Le opinioni prodotta dal patibolo sono funzionali, ma chiaramente non è attraente. The@Html.EditorFor helper è l'impostazione predefinita per i campi di immissione del testo, ma non permette di stile CSS all'interno del tag. Se volete lo stile del tag nella visualizzazione, utilizzare helper the@Html.TextBoxFor invece. Un esempio di stile è:

@ Html.TextBoxFor (funzione (modello) model.Phone, 
  Con la nuova {. Style = 
    "Colore: rosso; border-width: spessore";})

Risorse del sito correttamente riferimento come immagini e script può essere difficile quando lo sviluppo e la produzione hanno diversi URL di base. Il costrutto Url.Content risolve questo problema. Per esempio:

href = "@ Url.Content (" ~ / Content / Site.css ")"

Vista parziale sono utili per implementare elementi usati nelle viste multiple. Vista parziale condividono lo stesso modello della vista in cui compaiono. Il nuovo Html.Raw helper fornisce un modo semplice di visualizzare non codificata

Per un'implementazione di Visual Basic, creare una cartella di nome Vista MailerBase di tenere tutte le e-mail viste da utilizzare con MvcMailer. Utilizzare l'oggetto Session - piuttosto che il modello o oggetti ViewBag - per passare informazioni alla vista MvcMailer. Per utilizzare il metodo Send di estensione, comprende un'istruzione Imports per lo spazio dei nomi Mvc.Mailer nel controller.

Per dimostrare, una e-mail link è stato aggiunto alla visualizzazione a griglia Clienti Index. Esso mostra una vista con i dettagli di quel cliente e una zona di testo per inserire di posta elettronica personalizzato corpo del testo. Questo è inviato al controller, che utilizza MvcMailer e il motore di Razor CustomerEmail per formattare il corpo dell'e-mail. Esso comprende un piè di pagina di default con le informazioni di contatto dal database e le richieste di tutti gli aggiornamenti alle informazioni di contatto.

Nonostante gli oggetti Session debolmente tipizzati passati alla vista, il seguente codice di vista Razor motore può essere utilizzata per consentire che i dati siano accessibili in vista, fortemente tipizzato con IntelliSense completo (vedereListato 5 per il controller piena MvcMailer e l'esempio di vista):

@ Codice
  Layout = Url.Content ("~ / Vista / Shared / _EmailLayout.vbhtml")
  Dim emailInfo = CType (Session ("emailInfo"), MVC3RazorVB.CustomerEmail)
  Cliente dim = CType (Session ("cliente"), MVC3RazorVB.Customers)
Fine Codice
Welcome@customer.ContactName al nostro sito web!

Applicare protezione basata sui ruoli
Qualsiasi sito Web che non far rispettare la sicurezza è una demo, non una applicazione; capire come far rispettare la sicurezza è essenziale. L'utente deve accedere al sito, in base all'appartenenza a determinati ruoli, l'accesso degli utenti è potenzialmente limitato. Di sicurezza possono essere applicate a livello di controllo, al controller metodo livello o con la logica condizionale all'interno del metodo di controllo e / o la vista.

Una tecnica comune è quella di creare viste multiple in base al ruolo di accesso - per esempio, il metodo stesso controller può restituire la vista "Customer_Read" per un utente di reparto, ma la vista "Customer_Edit" per un utente amministratore o clericale. In alternativa, Razor script di motore di visualizzazione può essere utilizzato per disabilitare alcune funzioni all'interno di un'unica visualizzazione.

Di sola lettura viste possono essere rapidamente create dalla piena vista Modifica, cambiando tutte le occorrenze della helper EditorFor per l'helper DisplayFor, rimuovendo ogni pulsanti di aggiornamento e disabilitazione elenchi a discesa, aggiungendo l'attributo disabled con una dichiarazione simile alla seguente:

@ Html.DropDownListFor (funzione (modello) model.CustomerID, 
  CType (ViewBag.IDs, List (Of SelectListItem)), 
  "Uno Selezionare", New Con {. Disabili = "disabili"})

Per dimostrare la sicurezza, più utenti e ruoli sono stati creati con lo strumento di amministrazione Web, accessibile dal "martello mondo" icona nella parte superiore del pannello di Esplora soluzioni. Ci sono tre dati di accesso definiti per il sito. Pubblico utente non ha accesso a causa della mancanza di appartenenza a qualsiasi ruolo. Clericale utente ha modificare e accedere ai dati dei clienti attraverso l'appartenenza nei ruoli clericali e dei dipendenti. Admin utente ha pieno accesso CRUD per l'appartenenza alla amministrazione e dei ruoli dei dipendenti.

Per garantire che solo i membri del ruolo dipendente può accedere al sito Web, creare una classe ControllerBase.vb, come qui mostrato (assicurarsi tutti i controller tranne il AccountController ereditare da essa, la AccountController deve essere un controller non garantiti modo che gli utenti non autenticati possono eseguire i suoi metodi per accedere):

<Authorize(Roles:="employee")>
Public Class ControllerBase
  Eredita System.Web.Mvc.Controller
 Protected Sub New ()
 End Sub
End Class

L'indice del cliente () azione visualizza una lista di tutti i clienti, con il ActionLinks colonna a destra contenente come modificare, e-mail, i dettagli e cancellare. La vista codice Razor motore per visualizzare questi collegamenti solo per l'utente appropriato è mostrato in Listato 6 . Si noti inoltre che il link per creare un nuovo cliente è limitato agli utenti admin solo.

Limitare la visualizzazione di ActionLinks non è sufficiente a garantire l'applicazione, per le azioni possono essere eseguite direttamente tramite l'URL, ad esempio "/ cliente / Elimina / ALKFI". Ogni metodo di controllo deve il suo stesso attributo <Authorize> di limitare l'esecuzione dei ruoli appropriati. Se un utente tenta di eseguire direttamente l'azione non autorizzata tramite il suo URL, l'utente verrà reindirizzato alla pagina di login. Per esempio:

'GET: / clienti / Crea
<Authorize(Roles:="admin")>
Funzione Create () As ActionResult
  Ritorno View ()
End Function

Per impostazione predefinita, il metodo TryUpdateModel tenta di aggiornare tutte le proprietà di corrispondenza pubblica tra il FormCollection e il modello. Si tratta di un potenziale problema di sicurezza, in quanto può permettere proprietà del modello non intenzionale di essere aggiornato da un posto forma modificata. Per questo motivo, si consiglia di utilizzare un overload del TryUpdateModel che prende una whitelist (proprietà incluso) o blacklist (proprietà esclusa) per garantire solo le proprietà destinate vengono aggiornati. Per esempio, un posto azione Modifica modulo intende aggiornare solo il nome e il titolo contatto dovrebbe apparire come segue:

ContactNameTitle dim () As String = {"ContactName", "ContactTitle"}
TryUpdateModel (cliente, includeProperties: = ContactNameTitle)

Bus in viaggio Razor
sono destinati questo articolo e download del codice per fornire una base per l'uso di ASP.NET MVC motore 3 Razor vista per lo sviluppatore Visual Basic. Anche se ho cercato di illustrare i punti principali all'interno del testo, un attento riesame del download del codice è fortemente consigliato al fine di ottenere il massimo beneficio.

Trovo il MVC 3 Vista Razor motore piattaforma di sviluppo Web molto elegante e piacevole da lavorare a. Mi piacerebbe vedere molti più sviluppatori di Visual Basic adottare MVC motore 3 Razor vista come la tecnologia di sviluppo Web predefinito, e mi auguro che questo articolo fa più accessibile per coloro ostacolato dalla mancanza di documentazione ed esempi. Infine, vorrei ringraziare Matt VanNuys di Duel Container Corp. per la sua assistenza a spiegare alcuni dei punti più delicati del motore 3 Razor vista MVC.

 HTML quando il contenuto è noto per essere sicuri.

L'aiutante Html.DropDownListFor rende facile per visualizzare un elenco di opzioni con un valore specifico selezionato, tipicamente da una chiave associata nel modello. Per visualizzare un elenco a discesa di tutti i nomi di società dalla nostra tabella Customers con il "Birra Split Rail & Ale" società pre-selezionati, utilizzare il codice di controllo mostrato nelListato 4 .

Invio di e-mail
Una delle comuni applicazioni Web compiti è necessario eseguire l'invio di e-mail, spesso per avvisare i clienti o gli utenti di determinati eventi.

L'open source MvcMailer è molto utile, in quanto consente la piena potenza del motore di visualizzazione rasoio da utilizzare per creare il corpo HTML di una e-mail. Mentre MvcMailer è progettato per i progetti C #, può essere utilizzato in Visual Basic con qualche piccola modifica, in base alla versione 8 maggio 2011,. MvcMailer supporta il reindirizzamento dei messaggi di posta elettronica a una cartella e un'interfaccia basata vista aiuto test.

Installare MvcMailer NuGet utilizzando il comando "install-pacchetto MvcMailer". Questo aggiunge una sezione <mailSettings> al web.config con due tag <SMTP>, per specificare le impostazioni per l'invio di e-mail (default) o specificare una directory di prelievo in cui sono scritti e-mail piuttosto che inviato. Commentare il metodo web.config non si desidera utilizzare.

Corso Visual Studio - Corsi Visual Studio
Corso .Net- Corso Dot.Net - Corso Vb.net
Corso C# - Corso PHP - Corso Joomla