Umbraco 博客评论创建 Ajax

Question

你好，我正在尝试 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
    }
}

Answer 1

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

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

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

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

Umbraco 博客评论创建 Ajax

Umbraco BlogComment Create Ajax

ajax

comments

umbraco

umbraco-blog

surface-controller