Json-Ergebnisse fordern den "Speichern unter" -Dialog im Browser an, anstatt verarbeitet zu werden. ASP.NET MVC

Question

Ich weiß, dass dies ein Problem für andere war, aber ich habe noch nichts gefunden, das mein Problem löst.

Ich habe eine teilweise Ansicht, die in einem Lightbox (Colorbox) angezeigt wird. Es handelt sich um ein einfaches Formular. Ich möchte, dass das Formular übermittelt wird und ein wenig Daten zurückgibt. Die Daten werden für den Aufruf nachfolgender Funktionen verwendet, und ich möchte einfach, dass das Haupt-DIV mit einer "Erfolgsmeldung" aktualisiert wird. Hier ist der vollständige Code der Teilansicht:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>

    $('propcatform').submit(function(e) {
        e.preventDefault();

        $.ajax({
            type: "POST",
            url:  $(this).attr("action"),
            data: $(this).serialize(),
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function(data) { document.getElementById('main1').innerHTML = "Erfolg"; },
            failure: function() { document.getElementById('main1').innerHTML = "Fehler"; }
        })
    });

    <% using (Html.BeginForm(null, null, FormMethod.Post, new { id = "propcatform", name = "propcatform" }))
       {%>

            Felder

                Kategorie-Titel:
                <%= Html.TextBox("CatTitle") %>
                <%= Html.ValidationMessage("CatTitle", "*") %>

    <% } %>

Hier ist mein Controller-Code. Der Code funktioniert, in dem er die Formulardaten erfolgreich zur Tabelle/Datenbank hinzufügt. Wie sollte meine "return"-Zeile aussehen?

[AcceptVerbs(HttpVerbs.Post)]
        public JsonResult Create(Category propcat)
        {

            Category resultcat = new Category();
            _db.Categories.InsertOnSubmit(propcat);
            _db.SubmitChanges();
            resultcat = propcat;
            return Json(new { CatID = resultcat.CatID, CatTitle = resultcat.CatTitle, message = "Kategorie erfolgreich erstellt!" });
        }

Aktuell verwende ich tatsächlich keine der Ergebnisdaten in meinem Partial View-Code (obwohl ich sie in meinem "success"-Parameter referenziere). Ich versuche nur, dass es funktioniert (und mich nicht auffordert, die Ergebnisse zu speichern).

Danke.

Answer 1

Typischerweise geben Sie Json nicht direkt über ein normales Formular an den Browser des Benutzers zurück. Es ist eine großartige Möglichkeit, Informationen weiterzugeben, die Sie intern verarbeiten möchten (wie Sie es beschreiben), aber das, was Sie oben zeigen, gibt Json-Daten an den Benutzer zurück, die einfach aussehen wie.... JavaScript - es ist kein gültiges HTML und je nach Konfiguration des Browsers kann ein "Speichern unter" Dialogfeld angezeigt werden.

In Ihrem Beispiel könnten Sie versuchen, die Standardaktion so zu setzen, dass die Ansicht "Create" zurückgegeben wird, und so eine Prüfung vornehmen:

if (Request.IsAjaxRequest())
{
  return Json(.......);
}
else
{
  return View(....);
}

...und ändern Sie den Rückgabetyp Ihrer Funktion zu ActionResult.

Dadurch wird sichergestellt, dass beim initialen Laden der Seite die eigentliche Ansicht angezeigt wird. Ajax-Aufrufe zur selben Seite (von Schaltflächen auf der Seite) geben nur die Json-Daten zurück, an denen Sie interessiert sind.

UPDATE:

Wenn die Aktion dieselbe Seite anzeigen soll, außer für den aktualisierten Json-Inhalt, würde ich empfehlen, keine "Submit"-Schaltfläche zu verwenden. Verwenden Sie einfach eine normale Eingabeschaltfläche und binden Sie die Klick-Aktion an Ihren jQuery.ajax Aufruf. Die Daten werden von der Create/POST-Aktion empfangen und gemäß der success:-Klausel im Ajax-Aufruf aktualisiert.

Answer 2

Ich hatte dasselbe Problem und das hat für mich funktioniert:

return new JsonResult
{
  ContentType = "text/html",
  Data = new { foo = 1, bar = "Etwas" }
};

Erstellen Sie explizit ein neues JsonResult-Objekt, legen Sie den ContentType fest und geben Sie das zurück, anstatt die Json-Methode zu verwenden.

Answer 3

Verwenden Sie Firefox + Firebug.