Question

在我的MVC应用程序中，有一个视图（详细信息），所有注释都通过partialview（_Comment）列在其中，如下所示：

enter image description here

还有一个用于添加新注释的编辑器，我使用Ajax调用，然后我想通过使用一些参数（注释主体，日期，用户）重新调用partialview来在注释的底部显示新添加的注释）。

注意：为简洁起见，省略了不必要的代码。

PartialView：

@model Domain.Entities.Comment

@if (Model != null) { 
    @Html.Raw(string.Format("<div id='comments' class='issue-data-block'> {0} </div>",
    Model.Comment ))
}


@if (TempData["newComment "] != null)
{
    @Html.Raw(string.Format("<div id='comments' class='issue-data-block'> {0} </div>", TempData["newComment"] ))
}

查看：

@model IssueViewModel

@foreach (var com in Model.Comments)
{
    @Html.Partial("_Comment", com)
}



<script>
$(function () {

    $('form').submit(function (event) {
        event.preventDefault();
        kendo.ui.progress($("#kendo-loading"), true);

        $.ajax({
                type: "POST",
                url: "/Issue/CreateComment",
                cache: false,
                //Later I will retrieve these values dynamically
                data: {
                    id: "1",
                    comment : $('#comment.text').val()
                },

                //I have no idea about the parameter values below:
                dataType: "json",
                //contentType: "application/json; charset=utf-8",
                //processData: false,
                //contentType: false,
                traditional: true,

                complete: function () {
                    kendo.ui.progress($("#kendo-loading"), false);
                },
                success: function (response) {
                    if (response.success) {
                        //Here I want to recall the partialview by sending 
                        //some parameters returned from the Controller
                        // ???

                        @Html.Partial("_Comment", new ViewDataDictionary { { "Commment ", response.newComment } })

                     }
                },
                error: function (data) {
                    // $("#error_message").html(data);
                }
            }); //End of ajax call 
        });

控制器：

[HttpPost]
public ActionResult CreateComment([Bind(Exclude = null)] int id, string comment)
    {           
        Domain.Entities.Comment comment = new Domain.Entities.Comment ();
        comment .ActionBody = comment;
        comment .ActionTypeID = id;

        repository.SaveAction(action);
        return Json(new { success = true, newComment = commment });            
    }

虽然我尝试了很多不同的方法，即传递模型，字典，字符串，json等，但在此过程中我遇到了一些问题，并且无法正确完成：

1）我认为在创建新评论时无需将整个模型传递给控制器。而不是这个，我认为最好将它传递到字典中。你能提出什么更好的方法吗？

2）我想将新添加的评论附加到最后评论的底部。所以，我试图回想起关于Ajax成功的部分观点，但没有成功。是否通过向其发送新添加的评论来再次回忆部分视图？如果是这样我怎么能这样做？

Answer 1

下面是@Stephen Muecke精彩解决方案的工作和更新代码。 ı希望这对那些寻找这种解决方案或方法的人也有用。再次感谢@Stephen Muecke的帮助和聪明的解决方案:)请注意，为简洁起见，所有不必要的代码都被删除了。

查看：

@using (Html.BeginForm("CreateComment", "Issue", FormMethod.Post, new { id = "frmDetails" })) { <div id="comments"> @foreach (var action in Model.Actions) { //List each comment in Actions with the given format : @Html.Raw(string.Format("<div class='issue-data-block'><a href=''><strong>{0}</strong></a>| {1} <br /><p> {2} </p></div>", action.AuthorID, action.Created.ToString("dd/MM/yyyy - HH:mm"), action.ActionBody)) } </div> @*New comments first rendered on here before appending to the "comments" div above*@ <div id="template" class="hidden"> <div class="issue-data-block"></div> </div> <div class="pull-left"> @(Html.Kendo().Button().Name("btnComment")) </div> <div id="addComment" style="display: none; "> @(Html.Kendo().EditorFor(m => m.Action.ActionBody) .Name("CommentBody") ) @Html.ValidationMessageFor(m => m.Action.ActionBody) <br /> <div class="pull-left"> @(Html.Kendo().Button().Name("btnCancelComment")) @(Html.Kendo().Button().Name("btnAddComment")) </div> </div> } <script> var decodeEntities = (function () { // this prevents any overhead from creating the object each time var element = document.createElement('div'); function decodeHTMLEntities(str) { if (str && typeof str === 'string') { // strip script/html tags str = str.replace(/<script[^>]*>([\S\s]*?)<\/script>/gmi, ''); str = str.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gmi, ''); element.innerHTML = str; str = element.textContent; element.textContent = ''; } return str; } return decodeHTMLEntities; })(); //returns raw Html from given string function RawHtml(str) { return $('<div/>').html(str).text(); } $('#btnAddComment').click(function () { var url = '@Url.Action("AddComment")'; var issueId = '@Model.ID'; var commentBody = $("#CommentBody").val(); var token = $('[name=__RequestVerificationToken]').val(); var existingComments = $('#comments'); var comment = decodeEntities(commentBody); $.post(url, { comment: comment, IssueID: issueId, __RequestVerificationToken: token }, function (data) { if (!data.success) { return; } else if (data.success) { var newComment = $('#template').children('div').clone(); newComment.text(comment); var comm = "<div class='issue-data-block'><a href=''><strong>" + data.userId + "</strong></a>| " + data.created + " <br /><p> " + RawHtml(newComment) + " </p></div>"; existingComments.append(comm); //Clear Kendo Editor content var editor = $("#CommentBody").data("kendoEditor"); editor.value(''); } }).error(function (data) { // oops something went wrong }); }); </script>

<强>控制器：

[HttpPost, ValidateInput(false)] [ValidateAntiForgeryToken] public JsonResult AddComment(string comment, int IssueID) { if (!string.IsNullOrEmpty(comment)) { Action action = new Action(); action.ActionBody = comment; action.IssueID = IssueID; repository.SaveAction(action); return Json(new { success = true, userId = GetUser.Id, created = action.Created.ToString("dd/MM/yyyy - HH:mm") }); } return Json(new { success = false, message = "Error..." }, JsonRequestBehavior.AllowGet); }

在MVC中发布Ajax后无法更新Partialview

1 个答案: