Esporta (0) Stampa
Espandi tutto
Il presente articolo è stato tradotto manualmente. Passare il puntatore sulle frasi nell'articolo per visualizzare il testo originale.
Traduzione
Originale

Procedura dettagliata: utilizzo di helper basati su modelli per visualizzare i dati in ASP.NET MVC

Gli helper basati su modelli consentono di compilare automaticamente l'interfaccia utente in base a un modello di dati contrassegnato con attributi definiti nello spazio dei nomi System.ComponentModel.DataAnnotations. Ad esempio, una proprietà del modello di dati può essere contrassegnata con l'attributo DataTypeAttribute per specificare che la proprietà rappresenta una data. Anziché utilizzare il rendering predefinito che consiste nel visualizzare il valore della proprietà come stringa di data e ora, un helper basato su modelli è quindi in grado eseguire automaticamente il rendering del valore della proprietà come data tramite un controllo progettato per le date.

In questa procedura dettagliata si modificherà il controller Home di un'applicazione ASP.NET MVC per visualizzare la tabella Products del database AdventureWorksLT2008. Tramite la corrispondenza dei tipi (talvolta definita scaffolding dei dati) compilata negli helper basati su modelli di MVC 2 ASP.NET, si genereranno inoltre le visualizzazioni che eseguono automaticamente il rendering dell'interfaccia utente appropriata per i dati del modello.

Come complemento a questo argomento è disponibile un progetto di Visual Studio con codice sorgente che è possibile scaricare.

Per completare questa procedura dettagliata è necessario:

  • Microsoft Visual Studio 2008 Service Pack 1 o Visual Web Developer 2008 Express Edition Service Pack 1.

  • Framework di MVC 2 ASP.NET. Se è stato installato Visual Studio 2010, ASP.NET MVC 2 è già presente sul computer. Per scaricare la versione più recente del framework, vedere la pagina dei download VMC ASP.NET.

  • Database di esempio AdventureWorksLT_2008. Per informazioni su come scaricare e installare il database di esempio di SQL Server, vedere Microsoft SQL Server Product Samples: Database (informazioni in lingua inglese) nel sito Web CodePlex. Assicurarsi di installare la versione del database di esempio appropriata per la versione di SQL Server in esecuzione (Microsoft SQL Server 2005 o Microsoft SQL Server 2008).

    NotaNota:

    In questa procedura dettagliata si presuppone che il progetto MVC creato disponga di MvcTmpHlprs. Tutti gli spazi dei nomi utilizzati nella procedura dettagliata corrispondono a MvcTmpHlprs. Se è stato creato un progetto con un nome diverso, sarà necessario modificare lo spazio dei nomi del codice di esempio nello spazio dei nomi del progetto.

Nella procedura dettagliata si presuppone inoltre che l'utente abbia familiarità con MVC. Per ulteriori informazioni, vedere ASP.NET Model View Controller.

In questa procedura dettagliata viene utilizzato un modello EDM (Entity Data Model) creato in base al database di esempio AdventureWorksLT_2008. Il primo passaggio della procedura dettagliata prevede la creazione di un nuovo progetto MVC 2 e l'aggiunta di un modello EDM del database di esempio AdventureWorksLT_2008.

Per creare un progetto MVC con un modello di database AdventureWorks

  1. Creare un nuovo progetto MVC 2 con il nome MvcTmpHlprs.

  2. In Esplora soluzioni fare clic con il pulsante destro del mouse sulla cartella App_Data, quindi scegliere Aggiungi e fare clic su Elemento esistente.

    Verrà visualizzata la finestra di dialogo Aggiungi elemento esistente.

  3. Passare alla cartella che contiene il file AdventureWorksLT2008_Data.mdf, selezionare il file AdventureWorksLT2008_Data.mdf, quindi fare clic su Aggiungi.

    NotaNota:

    È possibile copiare il file AdventureWorksLT2008_Data.mdf dal download fornito per questa procedura dettagliata.

  4. In Esplora soluzioni fare clic con il pulsante destro del mouse sul progetto MvcTmpHlprs, scegliere Aggiungi, quindi fare clic su Nuovo elemento.

    Verrà visualizzata la finestra di dialogo Aggiungi nuovo elemento.

  5. In Modelli installati fare clic su ADO.NET Entity Data Model.

  6. Nella casella Nome accettare il nome di modello predefinito Model1.edmx.

  7. Fare clic su Aggiungi.

    Verrà visualizzata la finestra Procedura guidata Entity Data Model.

  8. Fare clic su Genera da database.

  9. In Specificare la connessione dati che deve essere utilizzata dall'applicazione per connettersi al database selezionare AdventureWorksLT2008_Data.mdf nell'elenco.

  10. Verificare che la casella di controllo Salva impostazioni stringa di connessione entity in Web.Config come sia selezionata. È possibile lasciare il nome della stringa di connessione predefinito.

  11. Scegliere Avanti.

    Nella procedura guidata viene visualizzata una pagina in cui è possibile specificare quali oggetti di database includere nel proprio modello.

  12. Selezionare il nodo Tabelle per selezionare tutte le tabelle dal database. È possibile lasciare lo spazio dei nomi del modello predefinito.

  13. Fare clic su Fine.

    Verrà visualizzato ADO.NET Entity Data Model Designer. Chiudere la finestra di progettazione.

Il passaggio successivo della procedura dettagliata prevede la modifica del controller Home per visualizzare i dati della tabella Products.

Per creare una visualizzazione elenco per la visualizzazione di campi dati

  1. Aprire la classe HomeController nell'editor.

  2. Immediatamente sotto la dichiarazione di classe aggiungere la riga seguente al controller Home, in modo che sia possibile accedere al database AdventureWorksLT2008.

    AdventureWorksLT2008Entities _db = 
        new AdventureWorksLT2008Entities ();
    

    Dim _db As AdventureWorksLT2008Entities = _
        New AdventureWorksLT2008Entities   
    
  3. Sostituire il contenuto del metodo Index della classe HomeController con la riga seguente per visualizzare i prodotti del database AdventureWorksLT2008.

    var dn = _db.Product
        .Where(c => c.ProductID < 715);
    return View(dn);
    

    Dim dn = _db.Product _
        .Where(Function(c) c.ProductID < 715)
    Return View(dn) 
    

    La clausola Where limita la pagina di indice a un sottoinsieme delle righe presenti nella tabella Products.

  4. Eliminare il file Views\Home\Index.aspx.

  5. Fare clic con il pulsante destro del mouse all'interno del metodo di azione Index, quindi scegliere Aggiungi visualizzazione.

    Verrà visualizzata la finestra di dialogo Aggiungi visualizzazione.

    mvc_AddViewDialog
  6. Selezionare la casella di controllo Crea visualizzazione fortemente tipizzata.

  7. Nell'elenco Classe dati visualizzazione selezionare la classe Product.

    Il nome della classe di prodotto completo includerà uno spazio dei nomi, ad esempio MvcTmpHlprs.Models.Product.

  8. Nell'elenco Visualizza contenuto selezionare Elenco.

    La creazione di una visualizzazione elenco determina l'aggiunta automatica del tipo IEnumerable al valore di attributo Inherits per la pagina.

  9. Accettare i valori predefiniti per le altre caselle di testo e caselle di controllo.

  10. Fare clic su Aggiungi.

    Per il controller Home verrà creata una visualizzazione denominata Index.

  11. Nel file Views\Home\Index.aspx sostituire tutto tranne la direttiva @ Page con il markup seguente:

    <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
      MVC Product Index Sample
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
      <h2>Index using  Html.DisplayFor</h2>
        <table>
          <tr>
            <th> Product ID </th>
            <th>Name</th>
            <th>Color</th>
            <th>Std. Cost</th>
            <th>List Price</th>
            <th>Size</th>
            <th>Weight</th>
            <th>Sell Start Date</th>
            <th>Sell End Date</th>
            <th>Discontinued Date </th>
          </tr>
          <% foreach (var item in Model) { %>    
          <tr>
            <td> <%= Html.DisplayFor(c => item.ProductID) %> </td>
            <td> <%= Html.DisplayFor(c => item.Name)%> </td>
            <td> <%= Html.DisplayFor(c => item.Color) %></td>
            <td> <%= Html.DisplayFor(c => item.StandardCost)%> </td>
            <td> <%= Html.DisplayFor(c => item.ListPrice)%> </td>
            <td> <%= Html.DisplayFor(c => item.Size) %></td>
            <td> <%= Html.DisplayFor(c => item.Weight) %> </td>
            <td> <%= Html.DisplayFor(c => item.SellStartDate, 
                "Date") %> </td>
            <td> <%= Html.DisplayFor(c => item.SellEndDate) %></td>
            <td> <%= Html.DisplayFor(c => item.DiscontinuedDate)%></td>
          </tr>
    
          <% } %>
      </table>
    </asp:Content>
    

    <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
      MVC Product Index Sample
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
      <h2>Index using  Html.DisplayFor</h2>
        <table>
          <tr>
                <th> Product ID </th>
                <th>Name</th>
                <th>Color</th>
                <th>Std. Cost</th>
                <th>List Price</th>
                <th>Size</th>
                <th>Weight</th>
                <th>Sell Start Date </th>
                <th>Sell End Date</th>
                <th>Discontinued Date </th>
          </tr>
          <% For Each item In Model%>
          <tr>
            <td> <%=Html.DisplayFor(Function(c) item.ProductID)%> </td>
            <td> <%= Html.DisplayFor(Function(c) item.Name)%> </td>
            <td> <%= Html.DisplayFor(Function(c) item.Color) %></td>
            <td> <%= Html.DisplayFor(Function(c) item.StandardCost)%> </td>
            <td> <%= Html.DisplayFor(Function(c) item.ListPrice)%> </td>
            <td> <%= Html.DisplayFor(Function(c) item.Size) %></td>
            <td> <%= Html.DisplayFor(Function(c) item.Weight) %> </td>
            <td> <%=Html.DisplayFor(Function(c) item.SellStartDate, _
              "Date")%> 
          </td>
            <td> <%= Html.DisplayFor(Function(c) item.SellEndDate) %></td>
            <td> <%= Html.DisplayFor(Function(c) item.DiscontinuedDate)%></td>
          </tr>
        <% Next%>
      </table>
    </asp:Content> 
    
    
    NotaNota:

    È necessario utilizzare lo spazio dei nomi corretto nell'attributo Inherits della direttiva della pagina. Una classe Products fortemente tipizzata deve essere di tipo IEnumerable.

  12. Premere CTRL+F5 per eseguire l'applicazione.

    Verrà visualizzata una tabella di dati di prodotto. Nei tre campi DateTime (Sell Start Date, Sell End Date e Discontinued Date) verranno visualizzati data e ora.

In questo passaggio si creerà un modello di data mediante il quale verrà eseguito il rendering di dati DateTime utilizzando solo la parte relativa alla data (l'ora non verrà visualizzata).

Per aggiungere un modello di data

  1. Nella cartella Views\Home creare una cartella DisplayTemplates.

  2. Nella cartella Views\Shared creare un'altra cartella DisplayTemplates.

    I modelli di visualizzazione inclusi nella cartella Views\Shared\DisplayTemplates verranno utilizzati da tutti i controller. I modelli di visualizzazione inclusi nella cartella Views\Home\DisplayTemplates verranno utilizzati dal controller Home. I modelli di visualizzazione che verranno utilizzati da più controller devono trovarsi nella cartella Views\Shared\DisplayTemplates. Se un modello con lo stesso nome è presente in entrambe le cartelle, verrà utilizzato il modello che si trova nella cartella Views\Home\DisplayTemplates.

  3. In Esplora soluzioni espandere la cartella Views, espandere la cartella Shared, quindi fare clic con il pulsante destro del mouse sulla cartella Views\Shared\DisplayTemplates.

  4. Fare clic su Aggiungi, quindi su Visualizzazione.

    Verrà visualizzata la finestra di dialogo Aggiungi visualizzazione

    Nella casella Nome visualizzazione digitare Date.

  5. Selezionare la casella di controllo Crea visualizzazione parziale (.ascx). Verificare che la casella di controllo Crea visualizzazione fortemente tipizzata non sia selezionata.

  6. Fare clic su Aggiungi.

    Verrà creato il controllo Views\Shared\DisplayTemplates\Date.ascx.

  7. Aggiungere il markup per la formattazione della proprietà come data (senza l'ora).

    Nell'esempio seguente viene illustrato il controllo Date.ascx completo. Il metodo String.Format viene utilizzato per formattare il valore della proprietà.

    <%@ Control Language="C#" 
      Inherits="System.Web.Mvc.ViewUserControl" %>
    <%= Html.Encode(String.Format("{0:d}", Model)) %> 
    

    <%@ Control Language="VB" 
      Inherits="System.Web.Mvc.ViewUserControl" %>
    <%= Html.Encode([String].Format("{0:d}", Model)) %>
    
  8. Premere CTRL+F5 per eseguire l'applicazione.

    Nella colonna SellStartDate verrà quindi visualizzata una data senza l'ora. Quando si esegue l'applicazione, il framework di MVC visualizza la pagina Index.aspx come visualizzazione predefinita. Nella riga seguente della pagina Index.aspx viene utilizzato l'overload del metodo di estensione Html.DisplayFor per specificare che il controllo Date.aspx deve essere utilizzato per eseguire il rendering della proprietà. La modifica del controllo Date.aspx consente di personalizzare la modalità di visualizzazione di un valore di data.

    <td> <%= Html.DisplayFor(Product=> item.SellStartDate,
        "Date") %> </td>
    

    <td> <%=Html.DisplayFor(Function(c) item.SellStartDate, _
        "Date")%> </td>
    

In questo passaggio si applicheranno attributi alla classe parziale del modello di dati in modo da specificare un modello per il rendering dei dati. Questa operazione determinerà la visualizzazione di date da parte del modello di MVC ASP.NET tramite l'helper del modello appena creato.

Per utilizzare gli attributi DataAnnotations per specificare la modalità di rendering dei dati

  1. Aggiungere una classe al progetto in modo che contenga le definizioni della classe parziale. Per ulteriori informazioni, vedere Procedura: convalidare i dati del modello utilizzando gli attributi DataAnnotations.

  2. Aggiungere al progetto un riferimento a System.ComponentModel.DataAnnotations.dll.

  3. Sostituire il contenuto del file della classe parziale appena creato con il codice seguente:

    using System.ComponentModel.DataAnnotations;
    namespace MvcTmpHlprs {
    
        [MetadataType(typeof(ProductMD))]
        public partial class Product {
            public class ProductMD {
                public object SellStartDate { get; set; }
                [UIHint("rbDate")]
                public object SellEndDate { get; set; }
                [DataType(DataType.Date)]
                public object DiscontinuedDate { get; set; }
                [ScaffoldColumn(false)]
                public object ModifiedDate { get; set; }
                [ScaffoldColumn(false)]
                public object rowguid { get; set; }
                [ScaffoldColumn(false)]
                public object ThumbnailPhotoFileName { get; set; }
            }
        }
    }
    

    Imports System.ComponentModel.DataAnnotations
    
    <MetadataType(GetType(ProductMD))> _
    Partial Public Class Product
    End Class
    
    Public Class ProductMD
    
        Private _SellStartDate As Object
        Public Property SellStartDate() As Object
            Get
                Return _SellStartDate
            End Get
            Set(ByVal value As Object)
                _SellStartDate = value
            End Set
        End Property
        Private _SellEndDate As Object
        <UIHint("rbDate")> _
        Public Property SellEndDate() As Object
            Get
                Return _SellEndDate
            End Get
            Set(ByVal value As Object)
                _SellEndDate = value
            End Set
        End Property
        Private _DiscontinuedDate As Object
        <DataType(DataType.Date)> _
        Public Property DiscontinuedDate() As Object
            Get
                Return _DiscontinuedDate
            End Get
            Set(ByVal value As Object)
                _DiscontinuedDate = value
            End Set
        End Property
        Private _ModifiedDate As Object
        <ScaffoldColumn(False)> _
        Public Property ModifiedDate() As Object
            Get
                Return _ModifiedDate
            End Get
            Set(ByVal value As Object)
                _ModifiedDate = value
            End Set
        End Property
        Private _rowguid As Object
        <ScaffoldColumn(False)> _
        Public Property rowguid() As Object
            Get
                Return _rowguid
            End Get
            Set(ByVal value As Object)
                _rowguid = value
            End Set
        End Property
        Private _ThumbnailPhotoFileName As Object
        <ScaffoldColumn(False)> _
        Public Property ThumbnailPhotoFileName() As Object
            Get
                Return _ThumbnailPhotoFileName
            End Get
            Set(ByVal value As Object)
                _ThumbnailPhotoFileName = value
            End Set
        End Property
    
    End Class 
    
  4. Salvare la classe.

  5. Premere CTRL+F5 per eseguire l'applicazione.

    Nella colonna Discontinued Date verrà quindi visualizzata una data senza l'ora. L'attributo DataTypeAttribute nella classe parziale Product utilizza l'enumerazione DataType per specificare che la proprietà DiscontinuedDate viene digitata come data. Quando una proprietà viene annotata con le informazioni sul tipo di dati, il framework di MVC esegue la ricerca di un modello con lo stesso nome.

In questo passaggio si creerà un modello di data che consente di visualizzare i dati DateTime come una stringa di colore rosso formattata in grassetto. L'attributo UIHintAttribute verrà applicato alla proprietà SellEndDate in modo da specificare che il rendering dei dati deve essere eseguito utilizzando un controllo data che include il markup per la visualizzazione della data come testo in grassetto di colore rosso. Il controllo data illustrato in questo passaggio verrà creato nella cartella Views\Home\DisplayTemplates e si applicherà solo al controller Home. Il controllo Views\Shared\DisplayTemplates\Date.ascx è condiviso da altri controller.

Nella sezione precedente della procedura dettagliata è stato utilizzato l'attributo DataTypeAttribute per specificare un modello da utilizzare per eseguire il rendering di un tipo di dati. L'attributo UIHintAttribute offre il vantaggio di consentire il passaggio di un numero arbitrario di coppie nome/valore al fine di specificare informazioni aggiuntive per il modello. Per ulteriori informazioni su come scrivere una classe UIHintAttribute personalizzata, vedere la voce relativa all'impostazione degli attributi dei tipi di carattere con UIHint nella classe parziale di entità nel blog di Rick Anderson.

Per utilizzare UIHint per la specifica di un modello per il rendering dei dati

  1. Copiare il controllo Views\Shared\DisplayTemplates\Date.ascx nella cartella Views\Home\DisplayTemplates.

  2. Rinominare il file Date.ascx in rbDate.ascx.

  3. Aprire il file Views\Home\DisplayTemplates\rbDate.ascx nell'editor.

  4. Modificare il markup per eseguire il rendering della proprietà come testo in grassetto di colore rosso.

    <span style="font-weight:bold;color:red;">
    <%= Html.Encode(String.Format("{0:d}", Model)) %>
    </span>
    

    <span style="font-weight:bold;color:red;">
    <%= Html.Encode([String].Format("{0:d}", Model)) %> 
    </span>
    
  5. Premere CTRL+F5 per eseguire l'applicazione.

    Nella colonna SellEndDate verrà quindi visualizzata la data come testo in grassetto di colore rosso. La proprietà SellEndDate viene annotata con l'attributo UIHintAttribute che specifica che il controllo rbDate deve essere utilizzato per eseguire il rendering della proprietà.

Nella procedura dettagliata sono stati forniti cenni preliminari sull'utilizzo di helper basati su modelli per la visualizzazione di dati in un'applicazione MVC.

Il progetto di esempio che è possibile scaricare include una pagina di modifica che utilizza l'helper basato su modelli Html.EditorFor. Tale helper basato su modelli determina la visualizzazione di controlli di modifica, ad esempio una casella di testo, che consentono agli utenti di immettere o modificare valori di proprietà. L'helper basato su modelli Html.EditorFor esegue inoltre il rendering della logica di convalida che applica i vincoli compilati nel modello di dati o che è possibile aggiungere come attributi System.ComponentModel.DataAnnotations a una classe parziale associata al modello di dati. Nell'illustrazione seguente vengono ad esempio illustrati gli errori di convalida visualizzati quando vengono violati i vincoli System.ComponentModel.DataAnnotations applicati nella classe parziale.

editTmplateErrors

Per ulteriori informazioni sull'utilizzo di helper basati su modelli, vedere la voce relativa all'utilizzo dei nuovi helper basati su modelli di MVC 2 nel blog di Rick Anderson.

Aggiunte alla community

AGGIUNGI
Mostra:
© 2014 Microsoft