MVC 4 Ajax.BeginForm presentare - provoca piena postback

Question

progetto MVC4 Internet

sto usando Ajax.BeginForm di fare un postback con la convalida e il postback dell'intera pagina piuttosto che solo l'UpdateTargetID. Ho visto altri post su SO e non ho trovato la risposta. Ho creato un nuovo progetto Internet MVC4 solo per i test (VS 2012 è stato aggiornato con 'ASP.NET e Web Tools 2012.2').

Ecco il mio codice

controller

public ActionResult Index() 
{ 
    var vM = _db.Students.FirstOrDefault(); return View(vM); 
} 

[HttpPost] 
[ValidateAntiForgeryToken] 
public ActionResult Index(Student vM) 
{ 
    if (ModelState.IsValid) 
    { //code if Model valid 
    return Json(new { url = Url.Action("About", "Controller") }); 
    } 
    ModelState.AddModelError(string.Empty, "AJAX Post"); 
    return PartialView("Index", vM); 
} 

View

@model AJAX_Test.Models.Student 
@{ ViewBag.Title = "Student"; } 
<script src="~/Scripts/jquery-1.8.2.js"></script> 
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script> 
<script type="text/javascript"> var onSuccess = function (result) 
{ 
    if (result.url) { window.location.href = result.url; } 
} 
    // when server returns JSON object containing an url property redirect the browser </script> 
<h1>@ViewBag.Title</h1> 
<div id="IDXForm"> 
@using (Ajax.BeginForm("Index", new AjaxOptions() { UpdateTargetId = "IDXForm", OnSuccess = "onSuccess", HttpMethod = "Post" })) 
{ 
    @Html.AntiForgeryToken() @Html.ValidationSummary(true) 
    <span>@Html.EditorFor(m => m.FirstName) @Model.EnrollmentDate.ToShortDateString()</span> <input type="submit" value="Submit" />     
} 
</div> 

La visualizzazione iniziale è:

Dopo Submittal:

Il codice sorgente per il corpo dopo la presentazione:

 <div id="body"> 

      <section class="content-wrapper main-content clear-fix"> 

<script src="/Scripts/jquery-1.8.2.js"></script> 
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script> 
<script type="text/javascript"> var onSuccess = function (result) { if (result.url) { window.location.href = result.url; } } 
    // when server returns JSON object containing an url property redirect the browser </script> 
<h1>Student</h1> 
<div id="IDXForm"> 
<form action="/" data-ajax="true" data-ajax-method="Post" data-ajax-mode="replace" data-ajax-success="onSuccess" data-ajax-update="#IDXForm" id="form0" method="post"><input name="__RequestVerificationToken" type="hidden" value="vkCszJu-fKT6zUr5ys2StOTPF6a9pZdj5k1MyaAZKo8MPweS53dUuni0C9B17NjL_GVydHa7-jI1H0F9HrYEdKxeCWq9mCeER3ebaZYLxIs1" /><span><input class="text-box single-line" id="FirstName" name="FirstName" type="text" value="Carson" /> 9/1/2005</span> <input type="submit" value="Submit" />                          
</form></div> 

chiunque può vedere ciò che è sbagliato con il mio codice?

Grazie.

Answer 1

Il contenuto di UpdateTargetID deve essere in una vista parziale e tale vista parziale deve essere chiamata dall'azione Post del controller. Darin mi ha risposto tramite e-mail (grazie Darin).Devi usare una vista parziale. Ho provato ad aggiornare la sua risposta due volte e i moderatori non l'hanno fatto o hanno fornito una spiegazione del perché così sto postando la mia risposta per gli altri.

_MyForm Vista:

@model AJAX_Test.Models.Student 

@using (Ajax.BeginForm("Index", new AjaxOptions { UpdateTargetId = "IDXForm", OnSuccess = "onSuccess" })) 
{ 
    @Html.AntiForgeryToken() 
    @Html.ValidationSummary(true) 
    <span> 
     @Html.EditorFor(m => m.FirstName)    @Model.EnrollmentDate.ToShortDateString() 
    </span> 
    <input type="submit" value="Submit" />                          
} 

Vista principale:

<div id="IDXForm"> 
    @Html.Partial("_MyForm") 
</div> 

controller Messaggio Azione:

ModelState.AddModelError(string.Empty, "AJAX Post"); 
    return PartialView("_MyForm", vM); 

Answer 2

Un paio di cose che vengono in mente che potrebbero causare questo comportamento:

1. Nella tua domanda hai mostrato le registrazioni del pacco ma avete effettivamente incluso nella visualizzazione o Layout? Assicurarsi che nella vista o il layout è stato prima inserito jquery.js e poi jquery.unobtrusive-ajax.js (in questo ordine):

   @Scripts.Render("~/bundles/jquery") 
   @Scripts.Render("~/bundles/jqueryval") 
   

2. Lo script jquery.unobtrusive-ajax.js non è compatibile con jQuery 1.9 e più tardi perché si basa sulla .live() che è stata removed in jQuery 1.9. Quindi se per qualche motivo hai aggiornato la tua versione jQuery alla versione 1.9 o successiva che non funzionerà. Dovresti effettuare il downgrade.

3. Nel callback onSuccess si sta reindirizzando a un url se l'azione del controller restituisce un JSON. Hai verificato che questo non è il caso? Perché quando un reindirizzamento avviene utilizzando il window.location.href è abbastanza normale che si ottiene una pagina di ricarica completa e non un aggiornamento parziale

In tutti i casi d'uso di uno strumento di debug javascript per vedere cosa sta succedendo. Se si utilizza Firefox, è possibile utilizzare FireBug. Se utilizzi Google Chrome, puoi utilizzare la barra degli strumenti di Chrome Developer. Guarda la console per eventuali errori javascript che potresti avere. Guarda la scheda della rete per vedere se tutti i javascript sono stati caricati correttamente e non hai 404 errori. Scopri come eseguire il debug del codice javascript con uno strumento. Sarai sorpreso di quante informazioni sui potenziali problemi che potresti avere con il tuo codice che quegli strumenti ti forniranno.

Answer 3

uso: <script src="../Scripts/jquery.unobtrusive-ajax.js"></script>

Questo è ciò che rende JS Aja x lavoro.

Answer 4

Come minimo, avete bisogno di questi due include:

@Scripts.Render("~/bundles/jquery") 
@Scripts.Render("~/bundles/jqueryval") 

E se questo ancora non aiuta, il check-in web.config e assicurarsi che discreto è abilitato:

<add key="UnobtrusiveJavaScriptEnabled" value="true" /> 

E se che non ha ancora alcun effetto, assicurati che i file js discreti siano compatibili con la versione corrente di jQuery, qualunque versione di jQuery in uso, che può essere trovata in un URL sottostante:

http://www.nuget.org/packages?q=unobtrusive

Answer 5

Coppia di altre cose da notare.

1. jquery.unobtrusive-ajax.js ora supporta JQuery 1.9. Ho installato jquery.unobtrusive-ajax.js versione 3.0.0 e si sta lavorando con jQuery 1,9

2. Assicurarsi che tutti i Tages div sono chiusi correttamente, compreso la vista che contiene l'Ajax.BeginForm e la vista principale Inoltre, se hai @ Html.Raw() nella vista principale o all'interno della vista che contiene Ajax.BeginForm, fai attenzione anche a questo.

Postare qui per salvare un giorno di grattarsi la testa.

Answer 6

assicurarsi di avere il vostro bundle di configurazione include questo

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
        "~/Scripts/jquery.unobtrusive*", 
        "~/Scripts/jquery-{version}.js")); 

bundles.Add (nuova ScriptBundle ("~/fasci/jqueryval"). Include ( "~/Scripts/jquery.validate *"));