Question

我是asp .net mvc3的新手。我正在尝试创建一个简单的博客评论部分。

我有一个CommentsViewModel

public class CommentsViewModel
{
    public CommentModel NewComment { get; set; }
    public IList<CommentModel> CommentsList { get; set; }
}

相应的视图就像

<div id="CommentsArea">
@Html.Partial("CommentsList", Model.CommentsList)
</div>
@using (Ajax.BeginForm("Create",
                   "Comment",
                   new { id = Model.NewComment.detailsId, comment = Model.NewComment },
                   new AjaxOptions { UpdateTargetId = "CommentsArea" ,
                                     HttpMethod = "Post",
                                     InsertionMode = InsertionMode.Replace}))
{
<div class="display-label">Add Comment</div>
<div class="display-field">
    @Html.EditorFor(model => Model.NewComment.Body)
</div>
<input type="submit" value="Post" />
}

现在，当用户输入“发布”按钮时，我希望使用新注释列表更新“CommentsArea”，并使用空文本清除表单值。

这是Post方法：

[HttpPost]
    public ActionResult Create(int id, CommentModel newcomment)
    {
        var newsItem = m_db.NewsList.Single(news => news.Id == id);
        if (!string.IsNullOrWhiteSpace(newcomment.Body))
        {
                newcomment.detailsId = id;
                newsItem.Comments.Add(newcomment);
                m_db.SaveChanges();
        }

        return PartialView("CommentsList", newsItem.Comments);
    }

现在，当用户点击“发布”按钮时，列表会正确更新，但表格值未清除。即如果我发表评论“新评论”，评论列表会更新“新评论”，但该文本仍保留在表格的编辑框内。

如何清除该文字？

Answer 1

只需在表单提交成功时调用js函数。

@using (Ajax.BeginForm("Create",
                   "Comment",
                   new { id = Model.NewComment.detailsId, comment = Model.NewComment },
                   new AjaxOptions { OnSuccess="ClearInput", HttpMethod = "Post",}))

在js函数上再次创建视图

function ClearInput(){
      //call action for render create view
      $.ajax({})
}

mvc3如何清除提交的表单值

1 个答案: