Ajax.BeginForm在MVC中刷新整個頁面

Question

我一直在嘗試向我的mvc網站添加一些Ajax功能，但是，我遇到了有關頁面刷新的問題。 我在主頁側邊欄上創建了一個rss視圖，該視圖允許用戶使用下拉列表選擇他們要查看的rss feed。 最初，我在mvc中使用html.begin form選項，但是，我認為刷新rss feeder而不是刷新整個頁面將是一個很酷的功能。 我實現了ajax.begin表單，但整個頁面仍然令人耳目一新。

這是我視圖中的代碼：

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

任何幫助都會很棒。

Answer 1

我為此在jquery中使用ajax調用

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

希望這會有所幫助。

Answer 2

您是否嘗試將InsertionMode成員初始化為AjaxOptions對象初始化程序？

您還必須包含“ jquery.unobtrusive-ajax.js”以使Ajax.BeginForm能夠按此處的回答工作

 @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" /> 
}