Question

我正在尝试在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>

Answer 1

我更喜欢避免使用AjaxBeginForm方法，而是喜欢编写手写和 Clean 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内的任何内容）。

在ASP.NET MVC中，如何通过ajax提交表单时返回不同的视图？

1 个答案: