[英]Ajax.BeginForm refreshing the whole page in MVC
I've been trying to add some Ajax functionality to my mvc site, however, I run into a problem regarding page refreshing. 我一直在尝试向我的mvc网站添加一些Ajax功能,但是,我遇到了有关页面刷新的问题。 I've created an rss view on my homepage sidebar, which allows the user to select which rss feed they want to view using a drop down list. 我在主页侧边栏上创建了一个rss视图,该视图允许用户使用下拉列表选择他们要查看的rss feed。 Initially I was using the html.begin form option in mvc, however, I decided it would be a cool feature to have the rss feeder refresh, rather than having the whole page refresh. 最初,我在mvc中使用html.begin form选项,但是,我认为刷新rss feeder而不是刷新整个页面将是一个很酷的功能。 I implemented the ajax.begin form, but the whole page is still refreshing. 我实现了ajax.begin表单,但整个页面仍然令人耳目一新。
Here is the code inside my view: 这是我视图中的代码:
<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>
When the user selects a feed type from the drop down menu, and clicks the submit button, the feed should update to the selected option. 当用户从下拉菜单中选择一种供稿类型并单击“提交”按钮时,该供稿应更新为所选选项。
In the _Layout view the following bundle is loaded: 在_Layout视图中,以下捆绑包已加载:
@Scripts.Render("~/bundles/jquery")
Any help would be great. 任何帮助都会很棒。
I use an ajax call in jquery for this 我为此在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);
}
});
});
Then put the contents of your feedList div in a partial view and on your controller 然后将feedList div的内容放在局部视图中并放在控制器上
public PartialViewResult FeedList(string data){
Model model = (get search result);
return PartialView("_feedList", model);
}
Hopefully this helps. 希望这会有所帮助。
Did you try initializing the InsertionMode member into the AjaxOptions object initializer? 您是否尝试将InsertionMode成员初始化为AjaxOptions对象初始化程序?
You also have to include 'jquery.unobtrusive-ajax.js' to make Ajax.BeginForm to work as answered here 您还必须包含“ 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" />
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.