Aggiornamento visualizzazione con modifiche del modello tramite Ajax Post - MVC3

Question

Sto tentando di utilizzare una chiamata Ajax (credo) per aggiornare il valore del mio modello e quindi avere il nuovo valore riflesso nella vista. Sto solo usando questo a scopo di test per il momento.

Ecco il riepilogo:

MODELLO

public class MyModel 
{ 
    public int Integer { get; set; } 
    public string Str { get; set; } 
} 

CONTROLLER

public ActionResult Index() 
    { 
     var m = new MyModel(); 
     return View("Test1", m); 
    } 

    [HttpPost] 
    public ActionResult ChangeTheValue(MyModel model) 
    { 
     var m = new MyModel(); 
     m.Str = model.Str; 
     m.Str = m.Str + " Changed! "; 
     m.Integer++; 

     return View("Test1", m); 

    } 

VISTA

@model Test_Telerik_MVC.Models.MyModel 
@using Test_Telerik_MVC.Models 
@{ 
    ViewBag.Title = "Test1"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 
<h2> 
    Test1</h2> 
@if (false) 
{ 
    <script src="~/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script> 
    <script src="~/Scripts/jquery-ui.min.js" type="text/javascript"></script> 
} 
<h2> 
    ViewPage1 
</h2> 

<div> 
    <input type="button" onclick="changeButtonClicked()" id="changeButton" value="Click Me!" /> 
    <input type="text" value="@Model.Str" class="txt" id="str" name="Str"/> 
    <div></div> 
</div> 

<script type="text/javascript"> 

    function changeButtonClicked() { 
     var url = '@Url.Action("ChangeTheValue", "Test1")'; 
     var data = '@Model'; 
     $.post(url, data, function (view) { 
      $("#Str").value = '@Model.Str'; 
     }); 
    } 

</script> 

Fondamentalmente la vista esegue il rendering di un pulsante con una casella di testo. Il mio unico scopo è semplicemente visualizzare il valore del mio modello (proprietà Str) nella casella di testo.

Ho provato varie combinazioni della funzione changeButtonClicked() senza alcun risultato. Test1 è il nome del mio controller. Quello che non capisco è quando eseguo il debug, l'azione del controller si attiva e imposta correttamente i miei valori. Se metto un breakpoint nella sezione "@ Model.Str" del tag di input, mi mostra che il mio @ Model.Str è uguale a Changed! che è corretto. Tuttavia, non appena la mia funzione di successo si attiva in javascript, il valore ritorna al suo valore originale.

Posso farlo funzionare cambiando il tipo di input da inviare e avvolgendolo in una sezione @ Html.BeginForm() ma mi chiedo se/come farlo in questo modo? O è un Submit l'unico modo per realizzarlo?

Grazie

Answer 1

La prima cosa al jQuery il modo corretto di impostare un valore di un ingresso è quello di utilizzare

$("#Str").val(@Model.Str); 

successiva vedremo il controller, nel risultato azione Posta sei restituendo l'intera vista nella chiamata ajax. Ciò significa che tutti gli html, i riferimenti di script e javascript verranno restituiti nella richiesta di jquery. Poiché tutto ciò che si sta tentando di aggiornare è il valore dell'input di nome str, vorrei semplicemente restituire quel valore come json e nient'altro.

[HttpPost] 
public ActionResult ChangeTheValue(MyModel model) 
{ 
    var m = new MyModel(); 
    m.Str = model.Str; 
    m.Str = m.Str + " Changed! "; 
    m.Integer++; 

    return Json(m.Str); 

} 

Successivo porrei gli input html in un modo da poter avere jquery serializzare il vostro modello per voi e poi si può modificare il codice postale jquery essere:

function changeButtonClicked() { 
    var url = '@Url.Action("ChangeTheValue", "Test1")'; 
    $.post(url, $('form').serialize(), function (view) { 
     $("#Str").val(view); 
    }); 
} 

Tutto il serialize sta facendo sta codificando gli input nel tuo modulo in una stringa e se tutto è stato nominato correttamente, aps.net lo legherà al tuo modello.

Se è necessario che il percorso gestisca sia le chiamate ajax sia le richieste complete, è possibile utilizzare la funzione IsAjaxRequest di asp.net per verificare la richiesta e restituire risultati diversi a seconda che la richiesta sia ajax o meno. Si potrebbe fare qualcosa di simile nel controller:

[HttpPost] 
public ActionResult ChangeTheValue(MyModel model) 
{ 
    var m = new MyModel(); 
    m.Str = model.Str; 
    m.Str = m.Str + " Changed! "; 
    m.Integer++; 

    if (Request.IsAjaxRequest) { 
     return Json(m.Str); 
    } 
    else { 
     return View("Test1", m); 
    } 
} 

Nella ActionResult sopra si sta facendo quello che hai fatto prima, ma ora stanno testando il tipo di richiesta e se è ajax si restituire un risultato JSON del valore di stringa. Se la richiesta non proveniva da una chiamata ajax, la vista completa (html, script, ecc.) Viene restituita per essere visualizzata nel browser.

Spero che questo ti aiuti ed è quello che stavi cercando.