Ajax.BeginForm rafraîchissant toute la page dans MVC

Question

J'ai essayé d'ajouter des fonctionnalités Ajax à mon site mvc, cependant, je rencontre un problème concernant l'actualisation de la page. J'ai créé une vue rss sur la barre latérale de ma page d'accueil, qui permet à l'utilisateur de sélectionner le flux rss qu'il souhaite afficher à l'aide d'une liste déroulante. Au début, j'utilisais l'option de formulaire html.begin dans mvc, cependant, j'ai décidé que ce serait une fonctionnalité intéressante d'avoir l'actualisation du feeder rss, plutôt que d'avoir l'actualisation complète de la page. J'ai implémenté le formulaire ajax.begin, mais la page entière est toujours rafraîchissante.

Voici le code à l'intérieur de mon point de vue:

<div class="rss_feed"> 
    <h3>RSS Feed</h3> 

    @using (Ajax.BeginForm("Index", "Home", 
     new AjaxOptions 
     { 
      HttpMethod = "post", 
      UpdateTargetId = "feedList" 
     })) 
    { 
     @Html.DropDownListFor(x => x.SelectedFeedOption, Model.FeedOptions) 
     <input type="submit" value="Submit" /> 
    } 

    <div id="feedList"> 
     @foreach (var feed in Model.Articles) 
     { 
      <div class="feed"> 
       <h3><a href="@feed.Url">@feed.Title</a></h3> 
       <p>@feed.Body</p> 
       <p><i>Posted @DateTime.Now.Subtract(@feed.PublishDate).Hours hour ago</i></p> 
      </div> 
     } 
    </div> 
</div> 

Lorsque l'utilisateur sélectionne un type d'alimentation dans le menu déroulant, et clique sur le bouton d'envoi, l'alimentation doit mettre à jour l'option sélectionnée.

Dans la _Layout afficher le paquet suivant est chargé:

@Scripts.Render("~/bundles/jquery") 

Toute aide serait grande.

Answer 1

J'utilise un appel ajax jquery dans cette

$('#SelectedFeedOption').change(function() { 
    $.ajax({ 
     url: "@(Url.Action("Action", "Controller"))", 
     type: "POST", 
     cache: false, 
     async: true, 
     data: { data: $('#SelectedFeedOption').val() }, 
     success: function (result) { 
      $(".feedList").html(result); 
     } 
    }); 
}); 

Ensuite, placez le contenu de votre feedList div dans une vue partielle et sur votre contrôleur

public PartialViewResult FeedList(string data){ 
    Model model = (get search result); 
    return PartialView("_feedList", model); 
} 

Espérons que cela aide.

Answer 2

Avez-vous essayé d'initialiser le membre InsertionMode dans l'initialiseur d'objet AjaxOptions?

Vous devez aussi inclure 'jquery.unobtrusive-ajax.js' pour faire Ajax.BeginForm travailler comme une réponse here

@using (Ajax.BeginForm("Index", "Home", null, 
    new AjaxOptions 
    { 
     HttpMethod = "post", 
     InsertionMode = InsertionMode.Replace,    
     UpdateTargetId = "feedList" 
    }); 
{ 
    @Html.DropDownListFor(x => x.SelectedFeedOption, Model.FeedOptions) 
    <input type="submit" value="Submit" /> 
}