我有一个部分视图,其中包含博客上发布的所有帖子。当一个新帖子出现时,会出现一个按钮,并通知用户已经创建了一个新按钮,他们可以点击该按钮,它应该刷新部分视图。
这是我的代码: 的 _PartialFontPagePost.cshtml
@model IEnumerable<Live_Blog.Models.Post>
@using Live_Blog.Tools
@foreach (var Post in Model)
{
<div class="post-preview">
<a href="/Blog/@Post.Url">
<h2 class="post-title">
@Post.Title
</h2>
@if (Post.SmallTitle.Length > 0)
{
<h3 class="post-subtitle">
@Post.SmallTitle
</h3>
}
</a>
<p class="post-meta">Posted by <a href="#">@Post.PostedBy</a> on @Helper.FirstCharToUpper(Post.DateCreated.ToString("MMMM dd, yyyy"))</p>
</div>
<hr>
}
html页面和脚本的一部分
<div class="refreshContent">
@Html.Partial("_PartialFontPagePost", Model)
</div>
<script>
$('#Refresh').click(function () {
$('.refreshContent').load('@(Url.Action("Update_PartialFontPagePost", "Blog", null))');
})
</script>
BlogController中的功能
[HttpGet]
public ActionResult Update_PartialFontPagePost()
{
var post = db.Post.OrderByDescending(i => i.DateCreated);
return PartialView("_PartialFontPagePost", post.AsEnumerable());
}
我知道部分视图在加载页面时有效并显示正确的数据,但是当我单击Button时,它会将整个html侧“抛出”到refreshContent
div中。谁能告诉我我做错了什么?感谢
修改
@Satpal
点击按钮后,refreshContent
看起来像这样
<div class="refreshContent">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home - Blog</title>
<link href="/Content/bootstrap.min.css" rel="stylesheet" />
<link href="/Content/font-awesome.min.css" rel="stylesheet" />
<link href="/Content/clean-blog.css" rel="stylesheet" />
<link rel="stylesheet" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">
<link href="/Content/Editor.css" rel="stylesheet" />
... Basic it loads all the html of the entire page.
</div>