2016-08-02 6 views
0

Ich poste und zu versuchen, mit den neuen Daten eine Teilansicht neu laden Ajax wie folgt aus:-Controller Rückkehr PartialView gesamte Ansicht überschreiben

Index.cshtml

<div id="left-column"> 
    @Html.Partial("~/Views/Project/_ProjectList.cshtml", Model.ProjectList) 
</div> 

~/Ansichten/Projekt/_ProjectList.cshtml

@using (Ajax.BeginForm("Create", "Project", new AjaxOptions 
{ 
    HttpMethod = "POST", 
    UpdateTargetId = "left-column" 
})) 
{ 
    <h3>Create a new project</h3> 
    <div class="form-group"> 
     <label for="new-project-name">Name</label> 
     <input type="text" class="form-control" id="new-project-name" name="Name" placeholder="Example" /> 
    </div> 

    <button type="submit" class="btn btn-primary">Create Project</button> 
    <a href="#" id="create-project-cancel" rel="modal:close">Cancel</a> 
} 

Dann ist mein Controller den PartialView nach einigen zurück db Arbeit:

[HttpPost] 
public PartialViewResult Create(Project newProject) 
{ 
    db.Projects.Add(newProject); 
    db.SaveChanges(); 

    var projectList = db.ProjectLists.SingleOrDefault(pl => pl.Id == 1); 

    return PartialView("~/Views/Project/_ProjectList.cshtml", projectList); 
} 

Ich würde die _ProjectList Teilansicht erwarten in den # laden linke Spalte-Element mit dem neuen Projektliste übergeben durch den Controller, sondern die gesamte Ansicht wird überschrieben, so dass der gesamte Körper die neue HTML-Quelle im Grunde wie folgt aussieht:

<body> 
    <!-- all the stuff from the _ProjectList partial --> 
</body> 

Es ist erwähnenswert, dass nach der Teilansicht zurückkehrt, wird die URL liest/Projekt/erstellen, das würde ich nicht erwarten.

Ich habe jquery-validate und jquery-validate-unauffällig enthalten, und die Konsole zeigt keine Fehler, so dass das nicht das Problem sein sollte.

Irgendeine Idee was ist los?

+1

http://StackOverflow.com/a/15282510/1907 - jQuery Version Problem w/unauffällig? –

+0

Ja, ich benutze jQuery 3.1.0, sieht also aus wie unauffällig, wird nicht funktionieren. – jrsowles

Antwort

0

Benjy hat es in einem Kommentar oben. Es war ein Problem mit der jQuery-Version. Ich benutze 3.1.0 und jquery.unobtrusive-ajax funktioniert nicht mehr mit jQuery Version 1.9.

1

Bei der Verwendung von Ajax.BeginForm Hilfsmethode, um Ajax Formular Buchung zu tun, müssen Sie auch die jquery.unobtrusive-ajax.js Datei enthalten. Diese Datei enthält den Code zum Behandeln des Click-Ereignisses für die Schaltfläche "Senden" und sendet das Formular asynchron, anstatt die normale Formularübertragung durchzuführen.

Wenn Sie diese Datei nicht einschließen, wird das Senden des Formulars normal sein. Meine Vermutung ist, dass Sie diese Datei verpasst haben und daher die ajaxified form submit-Erfahrung vermissen.

So stellen Sie sicher, dass Sie diese Datei nach jQuery

@Scripts.Render("~/bundles/jquery") 
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script> 

Here ist der Link NuGet Seite zu laden, wenn Sie diese Datei über nuget Paket-Manager hinzufügen möchten.

Verwandte Themen