Umbraco 博客评论创建 Ajax

Umbraco BlogComment Create Ajax

你好,我正在尝试 post 我的博客评论该功能有效。但是整个站点在 div 内刷新,我尝试在控制器中使用局部视图,但我不确定该怎么做,这里的任何人都可以指出我正确的方向,我希望 div 刷新ajax 请求不是整个站点介绍 div。

  <!-- Blog Comments -->
    <!-- Comments Form -->
    <div class="well">
        <h4>Leave a Comment:</h4>
        @if (Members.GetCurrentLoginStatus().IsLoggedIn)
        {
            using (Html.BeginUmbracoForm("CreateComment", "CommentSurface", FormMethod.Post, new { @id = "comment-form" }))
            {
                // use this where every display profile image is needed
                var user = User.Identity.Name;
                var imgUrl = Url.Content("~/media/profileimage/" + user.Replace(".", "") + ".png");

                <input name="CommentOwner" type="text" value="@Members.GetCurrentMember().Name" class="form-control hidden" readonly="readonly" />
                <input name="ownerid" type="text" value="@Members.GetCurrentMember().Id" class="form-control hidden" readonly="readonly" />
                <div class="form-group">
                    <textarea name="Message" rows="3" placeholder="Type your message here" class="form-control"></textarea>
                </div>
                <input name="profileimage" type="text" value="@imgUrl" class="hidden" readonly="readonly" />
                <button type="submit" class="btn btn-primary">Submit</button>
            }
        }
        else
        {
            <p> You are not logged in <a href="~/register">Register here</a></p>
        }
    </div>
    <hr>
    <!-- Posted Comments -->
    <div class="blog-comments">
        @Html.Partial("_BlogComments")
    </div>
    <!-- Comment -->
    @section scripts {
        <script>
            $(function () {
                // Find the form with id='well-form'
                $('#comment-form').submit(function () {
                    $.ajax({
                        url: this.action,
                        type: this.method,
                        data: $(this).serialize(),
                        success: function (data) {
                            $(".blog-comments").html(data);
                        },
                        error: function (result) {
                            alert('Comment was not successful!');
                        }
                    });
                    // return false to cancel the form post
                    // since javascript will perform it with ajax
                    return false;
                });
            });
        </script>
    }
</div>

表面控制器:

 public class CommentSurfaceController : SurfaceController
{
    [HttpPost, ValidateInput(false)]
    public ActionResult CreateComment(CommentViewModel model)
    //public PartialViewResult CreateComment(CommentViewModel model)
    {
        if (!ModelState.IsValid)
        {
            return CurrentUmbracoPage();
        }
        var contentService = Services.ContentService;
        var newContent = contentService.CreateContent(DateTime.Now.ToShortDateString() + " " + model.CommentOwner, UmbracoContext.PageId.Value, "BlogComment");
        newContent.SetValue("CommentOwner", model.CommentOwner);
        newContent.SetValue("Message", model.Message);
        newContent.SetValue("profileimage", model.profileimage);
        newContent.SetValue("ownerid", model.ownerid);
        //Change .Save if u want to allow the content before publish
        contentService.SaveAndPublishWithStatus(newContent);
        return RedirectToCurrentUmbracoPage();
        //return PartialView("BlogComments", model);
    }

    public ActionResult DeleteComment(int commentid)
    {
        var service = ApplicationContext.Current.Services.ContentService;
        var content = service.GetById(commentid);
        service.Delete(content);
        return RedirectToCurrentUmbracoPage();

    }
}

局部视图:

@foreach (var item in Model.Content.Children().OrderByDescending(m => m.CreateDate))
{
    <div class="media">
        <a class="pull-left" href="#">
            <img class="media-object" width="64" src="@item.GetPropertyValue("profileimage")" alt="profile image">
        </a>
        <div class="media-body">
            <h4 class="media-heading">
                @item.GetPropertyValue("CommentOwner")
                <small>@item.CreateDate</small>
            </h4>
            @item.GetPropertyValue("Message")
        </div>
        @item.Id
    </div>
    if (Members.GetCurrentLoginStatus().IsLoggedIn)
    {
        if (@Members.GetCurrentMember().Id.ToString() == item.GetPropertyValue("ownerid").ToString())
        {
            @Html.ActionLink("Delete", "DeleteComment", "CommentSurface", new { commentid = item.Id }, null)
        }
        else
        {
            @*<p> not ur comment</p>*@
        }
    }
    else
    {
       //blank cant delete comment if not logged in
    }
}

问题是,如果您不呈现完整的页面,UmbracoSurfaceController 将丢失其上下文。

如果您使用 ajax,则不应渲染出 html 和 post。当您从服务器返回 200(ok)时,仅 POST 数据并在 javascript 中更新您的布局。

为此,请使用 UmbracoApiController。这是一个 WebApi 控制器,允许您发回 json(或 xml)序列化数据。

有关 UmbracoApiController can be found in the documentation 的更多信息。