Umbraco BlogComment創建Ajax

Question

您好我試圖發布我的博客評論功能的工作原理。 但整個網站在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>

SurfaceController：

 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並將其發回。 當您從服務器獲得200（ok）返回時，僅POST數據並在javascript中更新您的布局。

為此，請使用UmbracoApiController 。 這是一個WebApi控制器，允許您發送回json（或xml）序列化數據。

有關UmbracoApiController的更多信息，請參閱文檔 。