ASP.NET MVC rendu vue partielle avec jQuery ajax

J'ai un contrôleur de l'action qui rend une vue partielle:

public ActionResult Details(int id)
{
    DetailsViewModel model = 
        ModelBuilder.GetDetailsViewModel(id, _repository);
    return PartialView("Details", model);
}

et je suis le chargement du contenu retourné dans un élément dynamique comme suit:

$container = appendContainer(); //adds a div to the dom with the correct id
$container.load("MyController/Details", function(response, status, xhr) {
    if (status != "success") {
        $(container).html('an error has occured');
    }
});

donc cela crée un div, et charge ensuite le contenu renvoyé en div.

Je veux modifier un peu pour que le div conteneur n'est créé que si l'appel
le contrôleur est couronnée de succès.

Donc:

  1. jQuery appelle le contrôleur d'action
  2. contrôleur retourne PartialView, ou null si l'Id n'est pas trouvé
  3. Si PartialView est retourné, le conteneur est créé et chargé avec le contenu retourné.
  4. Si le contrôleur ne trouve pas l'Id, le contenu est créé et une alerte est affichée.

Je vous en serais reconnaissant toute pointeurs sur comment je pourrais mieux réaliser cela.

InformationsquelleAutor fearofawhackplanet | 2010-09-06
  1. 11

    Tous load n'est de retour HTML à partir d'un serveur, alors pourquoi ne pas simplement ajouter à temporaire de la div et puis obtenir le code HTML de succès?

    var $dummy = $("<div>");
$dummy.load("MyController/Details", function(response, status, xhr) {
    var $container = appendContainer();
    if (status != "success") {
        $container.html('an error has occured');
    }
    else
    {
        $container.html($dummy.html());
    }
    $dummy.remove();
});

    Mise à JOUR:

    Si vous vous attendez à une exception alors vous devez manipuler. Si vous êtes essentiellement en permettant l'erreur se produit juste pour avoir status != "success" alors que c'est une grave odeur de code. Vous devez attraper l'erreur et revenir un autre PartialView.

    public ActionResult Details(int id)
{
    try
    {
        DetailsViewModel model = 
            ModelBuilder.GetDetailsViewModel(id, _repository);
        return PartialView("Details", model);
    }
    catch (SomeException ex)
    {
        return PartialView("Error", ex.Message);
    }
}

    Alors vous êtes assurés de toujours obtenir un code HTML valide la réponse et si vous ne le faites pas, alors votre erreur de base an error occured entreront en jeu.

    • Mes réservations avec ça c'est que je suis essentiellement à l'aide d'une exception non interceptée à mon avis, afin de retourner une valeur null / pas trouvé d'état à l'INTERFACE utilisateur. Je préfère retourner une valeur null à partir de mon contrôleur si l'élément n'est pas trouvé, mais je ne pouvais pas voir un moyen d'obtenir cette approche pour travailler avec. Semble juste un peu une odeur de code pour moi.
    • Mise à jour de ma réponse.
    InformationsquelleAutor djdd87
  2. 12

    dans votre cas, je voudrais utiliser $.ajax au lieu de .load()
    vous donne plus de contrôle sur le flux + se sent plus propre 

    $.ajax({
url: "MyController/Details",
   type: "GET",
   success: function (response, status, xhr)
   {
      var jqContainer = appendContainer();
      jqContainer.html(response);
   },
   error:function(XMLHttpRequest, textStatus, errorThrown)
   {
     //show the error somewhere - but this is a bad solution
   }
});

    concernant l'état de l'erreur - je déteste aussi en s'appuyant sur les exceptions moche et inefficace,
    vous avez plusieurs façons de le gérer:

    1. retour seulement JSON à partir de votre point de vue et de lier les données renvoyées à l'aide de gabarits en solution, de cette façon, vous pouvez retourner un objet d'erreur avec un message d'erreur spécifique et de gérer toutes les erreurs de la même manière(pense que c'est la meilleure solution).
    2. retour a 204 succès le code d'état-pas de réponse qui est comme retourner à la valeur null à partir de votre action - ensuite, vérifiez le code d'état, et pop-up le message d'erreur.
    3. retour de un 278 succès le code d'état(pas un vrai code d'état, mais est compte pour le succès et permet également d'envoyer des données) - ici, vous pouvez envoyer un objet json avec le message d'erreur qui tou peut analyser et de semer un joli message d'erreur (vu ce 278 solution ici SI il y a quelque temps).
    4. retour d'un point de vue différent de l'erreur - mais alors vous devez l'insérer dans le conteneur ou un mannequin conteneur pour vérifier si il y a une erreur si vous voulez prendre plus d'actions.

    dans mon code j'utilise $(document).ajaxSend(..) à l'échelle mondiale cocher toutes les réponses Ajax pour 278 code et afficher les messages d'erreur si il y en a une, ou appeler l'origine accroché succès fonction.

    Pour retourner l'erreur de l'action-je utiliser le résultat suivant

        public class AjaxErrorWithDetailsResult : JsonResult
    {
    public object ErrorResult { get; set; }

    public AjaxErrorWithDetailsResult(object errorResult)
    {
        this.ErrorResult = errorResult;
    }


    public override void ExecuteResult(ControllerContext context)
    {
        if (context == null)
        {
            throw new ArgumentNullException("context");
        }
        this.Data = ErrorResult;
        context.HttpContext.Response.StatusCode = 278;
        base.ExecuteResult(context);
    }
}

    où ErrorResult peut être un anonyme, un objet ou un objet qui implémente une interface avec une propriété de ErrorMessage afin que vous sachiez ce qu'il faut rechercher lors de la JS

    • Je suis d'accord avec vous! L' $ajax avoir plus de contrôle sur le flux.
    InformationsquelleAutor Avi Pinto