Per visualizzare l'articolo in inglese, selezionare la casella di controllo Inglese. È possibile anche visualizzare il testo inglese in una finestra popup posizionando il puntatore del mouse sopra il testo.
Traduzione
Inglese

Procedura dettagliata: aggiunta di script AJAX

AJAX ASP.NET consente a un'applicazione Web di recuperare dati dal server in modo asincrono e di aggiornare parti della pagina esistente, migliorando in tal modo l'esperienza utente e la risposta dell'applicazione Web.

Nella procedura dettagliata viene illustrato come iniziare ad aggiungere funzionalità AJAX ASP.NET a un'applicazione MVC ASP.NET.

Come complemento a questo argomento è disponibile un progetto di Visual Studio con codice sorgente: Download.

Per completare questa procedura dettagliata è necessario:

  • Microsoft Visual Studio 2008. Per questa procedura dettagliata non è possibile utilizzare Microsoft Visual Web Developer Express Edition.

  • Framework di ASP.NET MVC 2. 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.

Per iniziare, si creerà un nuovo progetto MVC ASP.NET. Per rendere più semplice la procedura dettagliata, non si creerà il progetto di test che è possibile creare per i progetti MVC ASP.NET. Per ulteriori informazioni su come creare un progetto di test MVC, vedere Walkthrough: Creating a Basic MVC Project with Unit Tests in Visual Studio.

Per creare un nuovo progetto MVC

  1. Scegliere Nuovo progetto dal menu File.

  2. In Tipi progetto nella finestra di dialogo Nuovo progetto espandere Visual Basic o Visual C#, quindi fare clic su Web.

  3. In Modelli Visual Studio installati selezionare Progetto applicazione Web MVC ASP.NET.

  4. Nella casella Nome digitare MvcAjaxApplication.

  5. Nella casella Percorso immettere il nome della cartella di progetto.

  6. Selezionare Crea directory per soluzione.

  7. Fare clic su OK.

  8. Nella finestra di dialogo Crea progetto unit test selezionare No, non creare progetto unit test.

    NotaNota:

    Se si utilizza Visual Studio 2008 Standard, la finestra di dialogo Crea progetto di unit test non viene visualizzata. Al contrario, il nuovo progetto di applicazione MVC viene generato senza un progetto di test.

  9. Fare clic su OK.

    Verrà generato il nuovo progetto di applicazione MVC.

Il supporto per le funzionalità client di AJAX ASP.NET è incluso in due librerie di script: MicrosoftAjax.js e MicrosoftMvcAjax.js. La versione finale e la versione di debug di questi script si trovano nella cartella Script del progetto. Prima di poter accedere a queste librerie negli script client, è necessario aggiungere i riferimenti per le librerie alle visualizzazioni MVC nel progetto corrente.

Per fare riferimento alle librerie di script AJAX ASP.NET

  1. In Esplora soluzioni espandere la cartella Views, quindi espandere la cartella Shared.

  2. Fare doppio clic sul file Site.Master per aprirlo.

  3. Aggiungere il markup seguente alla fine dell'elemento head:

    
        <script src="<%= Url.Content("~/Scripts/MicrosoftAjax.debug.js") %>" 
    		type="text/javascript"></script>  
        <script src="<%= Url.Content("~/Scripts/MicrosoftMvcAjax.debug.js") %>" 
    		type="text/javascript"></script>
    
    
    

    In alternativa, è possibile aggiungere automaticamente il codice trascinando questi file da Esplora soluzioni sulla visualizzazione Site.Master.

Si aggiungeranno quindi due metodi di azione che potranno essere chiamati in modo asincrono da script client. Il metodo GetStatus restituisce uno stato di "OK" e l'ora corrente. Il metodo UpdateForm riceve input da un form HTML e restituisce un messaggio che include l'ora corrente.

Per aggiungere i metodi di azione alla classe HomeController

  1. In Esplora soluzioni espandere la cartella Controllers, quindi fare doppio clic sulla classe HomeController per aprirla.

  2. Dopo il metodo About aggiungere il codice seguente.

    
    public string GetStatus()
    {
        return "Status OK at " + DateTime.Now.ToLongTimeString();
    }
    
    public string UpdateForm(string textBox1)
    {
        if (textBox1 != "Enter text")
        {
            return "You entered: \"" + textBox1.ToString() + "\" at " +
                DateTime.Now.ToLongTimeString();
        }
    
        return String.Empty;
    }
    
    
    

Si sostituirà infine il contenuto della pagina Index.aspx, che viene aggiunta automaticamente al progetto di Visual Studio per MVC ASP.NET. Nella nuova pagina Index.aspx vengono visualizzati l'ora in cui è stato eseguito il rendering della pagina, un messaggio di stato che presenta un collegamento per l'aggiornamento asincrono del messaggio e un form per l'invio di una stringa di testo.

Per ridefinire la pagina Index

  1. In Esplora soluzioni espandere la cartella Views, quindi espandere la cartella Home e aprire la visualizzazione Index.

  2. Sostituire il contenuto del controllo Content con il markup seguente:

    
    <h2><%= Html.Encode(ViewData["Message"]) %></h2>
    <p>
        Page Rendered: <%= DateTime.Now.ToLongTimeString() %>
    </p>
    <span id="status">No Status</span>
    <br />   
    <%= Ajax.ActionLink("Update Status", "GetStatus", new AjaxOptions{UpdateTargetId="status" }) %>
    <br /><br />
    <% using(Ajax.BeginForm("UpdateForm", new AjaxOptions{UpdateTargetId="textEntered"})) { %>
      <%= Html.TextBox("textBox1","Enter text")%>  
      <input type="submit" value="Submit"/><br />
      <span id="textEntered">Nothing Entered</span>
    <% } %>
    
    
    

    Nell'esempio viene creato un collegamento asincrono mediante la chiamata del metodo Ajax.ActionLink. Questo metodo dispone di diversi override e in questo esempio accetta tre parametri. Il primo parametro è costituito dal testo per il collegamento, il secondo parametro dal metodo di azione MVC da chiamare e il terzo parametro da un oggetto AjaxOptions che definisce lo scopo previsto della chiamata. In questo caso, il codice aggiornerà l'elemento DOM il cui ID corrisponde a status.

    Il form viene definito tramite il metodo Ajax.Form che dispone di diversi override e che in questo esempio accetta due parametri. Il primo parametro è costituito dal metodo di azione da chiamare e il secondo parametro da un altro oggetto AjaxOptions il quale specifica che è necessario aggiornare l'elemento DOM il cui ID è textEntered.

È ora possibile eseguire l'applicazione e verificarne il funzionamento.

Per eseguire l'applicazione MVC

  1. Premere CTRL+F5.

    Verrà visualizzata l'ora in cui è stato eseguito il rendering della pagina.

  2. Fare clic sul collegamento Stato aggiornamento.

    Il messaggio di stato verrà aggiornato con l'ora dell'aggiornamento. Si noti che viene aggiornato solo il messaggio di stato.

  3. Immettere il testo nella casella di testo, quindi fare clic su Invia.

    In un messaggio verrà visualizzato il testo immesso e l'ora dell'immissione. Si noti di nuovo che è stato elaborato solo il form.

Aggiunte alla community

AGGIUNGI
Mostra: