2013-05-08 141 views
0

我一直在尝试向我的mvc网站添加一些Ajax功能,但是,我遇到了有关页面刷新的问题。我在我的主页侧边栏上创建了一个rss视图,它允许用户使用下拉列表选择他们想要查看哪些rss供稿。最初我在mvc中使用html.begin表单选项,但是,我认为这将是一个非常酷的功能,可以刷新rss馈送器,而不是刷新整个页面。我实现了ajax.begin表单,但整个页面仍然清爽。Ajax.BeginForm刷新MVC中的整个页面

这是我的视图内的代码:

<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> 

当用户选择从下拉菜单中选择一个进料类型,并且点击提交按钮,所述进料应更新到所选择的选项。

在_layout查看下捆绑装入:

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

任何帮助将是巨大的。

回答

0

我使用Ajax调用jQuery的这个

$('#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); 
     } 
    }); 
}); 

然后把你的feedList div的内容中的局部视图和控制器上

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

希望这有助于。

0

您是否尝试将InsertionMode成员初始化为AjaxOptions对象初始值设定项?

你还必须包括 'jquery.unobtrusive-ajax.js',使Ajax.BeginForm工作作为回答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" /> 
}