0

我正在尝试在 ASP.NET MVC 中创建一个留言板。我有两个部分视图，一个显示消息（这是递归的，并且还将显示所有子...消息），一个显示提交新消息的表单。当一条消息被发布时，我希望表单通过 ajax 提交，并返回部分视图以显示一条消息（刚刚发布的消息）。

这是显示表单的部分视图 (NewMessage)

@model Intranet.Entities.ForumRepository.Message

<div id="@Html.Raw("formbox" + Model.ParentID)">

@using (Ajax.BeginForm("NewMessage", new AjaxOptions { UpdateTargetId = "formbox" + Model.ParentID })) {    
    @Html.TextAreaFor(m => m.Text, new { @class = "responsebox" })
    @Html.HiddenFor(m => m.ParentID)
    <br /><input type="submit" value="Save Comment" class="savebutton" />
}

</div>

及其提交方法

[HttpPost]
public ActionResult NewMessage(ForumRepository.Message message) {
    if (ModelState.IsValid) {

        RouteData.Values.Add("Responses", message);
        //message.SaveMessage();

        return PartialView("DisplayMessage", message);
    } else {
        return PartialView(message);
    }

}

当我尝试提交表单时，表单视图不会被 DisplayMessage 视图替换。它一直显示表格。在调试模式下运行表明正在调用后端代码。

我相当确定这与 ajax 代码用于重新显示的 div 位于 NewMessage 视图内（它不能替换自己的容器）这一事实有关，但我不知道如何设置它这样它就可以工作了。

根据要求，这是一些呈现的 HTML

<div id="formbox0">

<form action="/EventList/NewMessage/Q6UJ9A00T49L" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#formbox0" id="form0" method="post"><textarea class="responsebox" cols="20" data-val="true" data-val-required="The Text field is required." id="Text" name="Text" rows="2">
</textarea><input data-val="true" data-val-number="The field ParentID must be a number." data-val-required="The ParentID field is required." id="ParentID" name="ParentID" type="hidden" value="0" />    <br /><input type="submit" value="Save Comment" class="savebutton" />
</form>
</div>
4

1 回答 1

3

我更喜欢避免使用 AjaxBeginForm 方法，并且喜欢编写手写和干净的jQuery 代码。

我为容器 div 提供了一个 css 类（commentItem），以便稍后我可以在我的 jQuery 选择器中使用它。

@model Intranet.Entities.ForumRepository.Message

<h3> Enter your comment</h3>
<div id="formbox@Model.ParentID" class="commentItem">   
  @using(Html.BeginForm())
  {
     @Html.TextAreaFor(m => m.Text, new { @class = "responsebox" })
     @Html.HiddenFor(m => m.ParentID)
     <input type="submit" value="Save Comment" class="savebutton" />
  }     
</div>
<script type="text/javascript">
  $(function(){
    $(".savebutton").click(function(e){
       var item=$(this);
       e.preventDefault();

       $.post("@Url.Action("NewMessage","EventList")",
                         item.closest("form").serialize(),function(data){

                   item.closest("div.commentItem").html(data);

       });

    });

  });

</script>

此代码将使用从您的 Action 方法接收到的内容替换现有表单（或容器 div 内的任何内容）。

于 2012-08-01T19:37:53.983 回答