使用jquery call

时间:2016-05-30 08:16:17

标签: jquery asp.net-mvc partial-views

我有一个部分视图,其中包含博客上发布的所有帖子。当一个新帖子出现时,会出现一个按钮,并通知用户已经创建了一个新按钮,他们可以点击该按钮,它应该刷新部分视图。

这是我的代码: 的 _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>

0 个答案:

没有答案