asp.net mvc si d'autre ne fonctionne pas en vue

Question

Ceci est ma partie du Code de la vue appelée index

<div class="box-body"> 
        @{ Html.RenderAction("_BlogsGrid",new {country=""});} 
    </div> 
    ... 
    ... 
<script> 
    $("#SelectedCountry").change(function() { 
     var selectedCountry = $(this).val(); 
     $.ajax({ 
      url: '@Url.Action("_BlogsGrid","Blog")' + '?country=' + selectedCountry, 
      sucess: function(xhr, data) { 
       console.log('sucess'); 
      }, 
      error: function (err) { 
       console.log(err); 
      } 

    }); 
    }); 
</script> 

Voici le code d'action du contrôleur

public ActionResult _BlogsGrid(string country) 
{ 
    var blogs = _blogService.GetBlogWithCountryName(country).ToList(); 
    var blogsList = BlogMapper.ToBlogIndex(blogs); 
    return PartialView(blogsList); 
} 

et voici _BlogsGrid vue

@model Blog.BlogsList 
<div class="pull-right"> 
    @Html.DropDownListFor(m => m.SelectedCountry, new SelectList(Model.CountriesList), "Select a country", new { @class = "form-control" }) 
</div> 
<br /> 
<br /> 
@if (Model.Blogs.Count == 0) 
{ 
    <div class="box-group"> 
     <h4>Sorry we couldn't find any blog related to the country you asked for.</h4> 
     @Html.DisplayText("Hello world!") 
    </div> 
} 
else 
{ 
    <div class="box-group" id="accordion"> 
     @foreach (var blog in Model.Blogs) 
     { 
      @*Some code*@ 
     } 
    </div> 
} 

chose est quand je le charge la première fois everythi ng fonctionne très bien, la méthode des contrôleurs est touché et tous les blogs se charge c'est ainsi le point de vue semble

mais quand je sélectionne un pays dans la liste déroulante et il n'y a pas de blogs correspondant à ce pays

il frappe la condition if (mettre un point d'arrêt dans la vue je vérifie si la condition est exécutée ou sinon la condition est en cours d'exécution, et passe par if condition) dans la vue (qui est une vue partielle) mais le contenu de " si "n'est pas chargé dans le navigateur. Je reçois toujours le même contenu qu'avant. Une idée de pourquoi mon contenu n'est pas mis à jour?

Mise à jour:

<div id="grid" class="box-body"> 
         @{ Html.RenderAction("_BlogsGrid",new {country=""});} 
</div> 

<script> 
    $("#SelectedCountry").change(function() { 
     var selectedCountry = $(this).val(); 

     $.ajax({ 
      url: '@Url.Action("_BlogsGrid","Blog")' + '?country=' + selectedCountry, 
      sucess: function (data) { 
       $('#grid').html(data); 
      }, 
      error: function (err) { 
       console.log(err); 
      } 

    }); 
    }); 
</script> 

en réponse du navigateur

Mais encore mon div n'est pas mise à jour.

Answer 1

Comme d'autres ont suggéré, vous n'êtes pas mettre à jour votre div contenu. De cette façon, vous ne remarquez pas de changement lorsque l'appel AJAX est terminé.

Pour faciliter les choses, en plus de .ajax(), jQuery fournit la méthode .load(), qui a automatiquement alimenté le contenu retourné dans les éléments correspondants. Donc, votre javascript pourrait ressembler à:

<script> 
    $("#SelectedCountry").change(function() { 
     var selectedCountry = $(this).val(); 
     $("div.box-body").load('@Url.Action("_BlogsGrid","Blog")', 'country=' + selectedCountry); 
    }); 
</script> 

Answer 2

Lorsque la page est créée, Razor remplace tous les @ par leur valeur pour générer la page entière HTML. C'est pourquoi en mode débogage, votre @Html.DisplayText est atteint.

Cependant, lorsque vous chargez la page, le if est pris en compte, et si la condition est fausse, vous ne voyez pas le code HTML interne.

Pour mettre à jour votre DOM, vous devez utiliser le paramètre data de l'appel ajax success. Ce paramètre est automatiquement défini par le retour de votre méthode _BlogsGrid.

Vous pouvez le voir en modifiant votre rappel success. Notez que le paramètre data doit être le premier paramètre

sucess: function(data) { 
    console.log(data); 
}, 

Answer 3

Vous n'êtes pas mettre à jour les données après la charge initiale. Votre appel ajax renvoie le contenu html de votre vue partielle. Vous devrez le mettre à jour manuellement sur le DOM. Donnez à votre conteneur div un id.

<div id="blogs-grid" class="box-body"> 
    @{ Html.RenderAction("_BlogsGrid",new {country=""});} 
</div> 

Et puis dans votre rappel ajax succès:

sucess: function(data) { 
    $('#blogs-grid').html(data); 
}, 

Maintenant, quel que soit le contenu de votre ajax retourné sera lié à la blogs-grid div

Answer 4

Votre fonction ajax succès ne fait rien avec la réponse du serveur. Il suffit d'imprimer le succès dans la console du navigateur.

Vous devez utiliser la réponse du serveur sur la fonction de réussite et remplacer le contenu atual de la page par le nouveau contenu.

Votre réponse html est le premier argument de la fonction de succès. Vous pouvez regarder jquery documentantion pour une meilleure undertanding (http://api.jquery.com/jquery.ajax/)

Pour remplacer le contenu de votre page la fonction de réussite devrait être comme ça:

sucess: function(data) { 
      $("div.box-body").html(data); 
      console.log('sucess'); 
     },