Les résultats de JSON invitant la boîte de dialogue "Enregistrer sous" dans le navigateur au lieu d'être traités. ASP.NET MVC

Question

Je sais que cela a été un problème pour d'autres, mais je n'ai pas encore trouvé quelque chose qui résout mon problème.

J'ai une vue partielle qui est affichée dans une visionneuse (colorbox). C'est une forme simple. Je veux que le formulaire soumette et renvoie un peu de données. Les données seront utilisées pour appeler les fonctions suivantes, et je veux que la DIV principale soit juste mise à jour avec un message "succès". Voici le code complet de la vue partielle:

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

<script type="text/javascript"> 
    $('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 = "Success"; }, 
      failure: function() { document.getElementById('main1').innerHTML = "Failure"; } 
     }) 
    }); 
    </script> 

    <% using (Html.BeginForm(null, null, FormMethod.Post, new { id = "propcatform", name = "propcatform" })) 
     {%> 
     <div id="main1"> 
     <fieldset> 
      <legend>Fields</legend> 
      <p> 
       <label for="CatTitle">Category Title:</label> 
       <%= Html.TextBox("CatTitle") %> 
       <%= Html.ValidationMessage("CatTitle", "*") %> 
      </p> 
      <p> 
       <input type="submit" value="Create" /> 
      </p> 
     </fieldset> 
     </div> 

    <% } %> 

Voici mon code de contrôleur. Le code fonctionne, en ce qu'il ajoute avec succès les données de formulaire à la table/base de données. À quoi devrait ressembler ma ligne "retour"?

[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 = "Category successfully created!" }); 
     } 

Actuellement, je ne suis pas utiliser aucun des données de résultat dans mon code de vue partielle (même si je référencent dans mon paramètre « succès »). J'essaie juste de le faire fonctionner (et ne pas m'inciter à enregistrer les résultats).

Merci.

Answer 1

Généralement, vous ne retournerez pas Json au navigateur de l'utilisateur directement via un formulaire de soumission normal. C'est un excellent moyen de transmettre les informations que vous envisagez de digérer en interne (comme vous le décrivez), mais en faisant ce que vous montrez ci-dessus, vous cracherez des données JSON à l'utilisateur qui ressemble ... Javscript - ce n'est pas un HTML valide comment le navigateur est configuré, il peut apparaître une boîte de dialogue "Enregistrer sous".

Dans votre exemple, vous pouvez essayer d'avoir l'action par défaut consiste à renvoyer Créer vue et avoir un contrôle comme celui-ci:

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

... et changer votre type de retour de fonction ActionResult.

Cela garantira que la charge initiale de la page affiche la vue réelle. Ajax appelle à la même page (de boutons de la page) renverra uniquement les données JSON que vous êtes intéressé par

MISE À JOUR:.

Si l'action doit afficher la même page, sauf pour la mise à jour Contenu Json, je recommande de ne pas utiliser un bouton Envoyer. Utilisez simplement un bouton de saisie normal et liez l'action de clic à votre appel jQuery.ajax. Les données seront reçues de l'action Create/POST et seront remplies selon la clause success: dans l'appel Ajax.

Answer 2

J'ai eu le même problème et cela a fonctionné pour moi:

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

créer un nouvel objet Explicitement JsonResult, définissez le ContentType et retour qui, au lieu d'utiliser la méthode Json.

Answer 3

Utilisez Firefox + Firebug.