0

ASP.NET MVC でメッセージ ボードを作成しようとしています。1 つはメッセージを表示するため (これは再帰的で、すべての子メッセージも表示されます)、もう 1 つはフォームを表示して新しいメッセージを送信します。メッセージが投稿されたら、フォームを 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メソッドを避け、手書きのCleanjQueryコードを書くのが好きです。

後でjQueryセレクターで使用できるように、コンテナーdivにcssクラス（commentItem）を指定しています。

@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>

このコードは、既存のフォーム（またはコンテナーdiv内のすべて）をActionメソッドから受け取ったコンテンツに置き換えます。

于 2012-08-01T19:37:53.983 に答える