0

データテーブル内のユーザーのリストを表示するデータテーブル Web ページがあります。ユーザーページには、新しいユーザーを作成するボタンがあります。これをクリックすると、ユーザーが新しいユーザーの詳細を入力するためのモーダル jQuery ダイアログ ボックスが起動します。ダイアログ ボックスを閉じるだけの [キャンセル] ボタンと、クリックするとコントローラーの DoSaveUser メソッドを呼び出す [ユーザーの保存] ボタンがあります。デバッグから、ユーザーが保存されたと言ってユーザーの作成が成功した場合、最後に PartialView に戻る DoSaveUser メソッドに入ることがわかります。ただし、詳細を入力したダイアログは成功メッセージに置き換えられません-ユーザーが作成されているにもかかわらず-つまり-保存ボタンを押した後-ダイアログをキャンセルして元のユーザーページを更新すると、データテーブルが表示されます新しいユーザーで更新されました。

UserList ページのコード (ダイアログには forename 以外にも多くのフィールドがありますが、質問のコードを少なくするためにそれらを削除しました)。したがって、CreateUser ボタンをクリックすると、newUserDialog が起動されます。

<div id="newUserDialog">

@using (Html.BeginForm("DoSaveUser", "MyController", FormMethod.Post, new { id = "saveForm" }))
{

     <div id="resultContainer">
        <table class="ui-widget-content" style="width: 565px; margin-top: 10px;">
            <tr>
                <td style="width: 100px;">
                </td>
                <td class="label">
                    Forename :
                </td>
                <td class="value">
                    @Html.TextBoxFor(model => model.Forename, new { style = "width:150px" })
                </td>
            </tr>
        </table>
        <div class="ui-widget-content Rounded" style="width: 565px; margin-top: 10px; text-align: center;">
            <input id="Cancel" type="button" class="dialog-button" value="Cancel" style="margin: 5px" />
            <input id="DoSaveUser" type="submit" class="dialog-button" value="Save User" style="margin: 5px" />
        </div>
    </div>
}

クリックされたダイアログでユーザーを保存するための Javascript コード - フォームを送信します。

$(function () {
    $('#saveForm').submit(function () {

        var formData = $("#saveForm").serializeArray();

        $.ajax({
            url: this.action,
            type: this.method,
            data: formData,
            dataType: "json",
            success: function (result) {
                $('#resultContainer').html(result);
            }
        });
        return false;
    });
});

コントローラーの DoSaveUser メソッドで、ブレークポイントを設定してヒットし、対応するフィールドに正しく送信されているすべての値を確認できます。DB に保存すると、これが返されます。

return PartialView("UserSuccess", model);

そして、これがcshtmlに含まれるビューのすべてです。私が望んでいたのは、すべてのテキストボックスフィールドとラベルを含む結果コンテナDivであり、User Createdに正常に置き換えられたことに注意してください。そして、このページで OK が必要になります。これをクリックすると、ダイアログ ボックスが閉じられ、UserList ページが更新され、新しいユーザーで更新されたデータテーブルが表示されます。ただし、保存をクリックすると、テキストボックスは Div にとどまり、Div は変更されませんが、ダイアログをキャンセルしてページを更新すると、新しいユーザーで更新されたデータテーブルが表示されます。足りないものはありますか？(注 - jquery.unobtrusive-ajax.js を _Layout ページに追加しました)

@model MyProject.Models.UserModel
@{
    ViewBag.Title = "UserSuccess";
}
 <div id="resultContainer">
User Created Successfully
</div>
4

2 に答える 2

0

最初のhtmlに#resultContainerdivが含まれていることを確認しますか？あなたがしない場合

$('#resultContainer').html(result);

行は何にも一致しません。一方、そうすると、ネストされた#resultContainerdivが重複して発生しますが、これもエラーです（idは一意である必要があります）。

divそれを行う正しい方法は、元のhtmlに空を追加することです。

<div id="resultContainer"></div>

そして、あなたのビューで は、div内に入るコンテンツだけを出力します。

@model MyProject.Models.UserModel
@{
    ViewBag.Title = "UserSuccess";
}
User Created Successfully
于 2013-01-12T15:37:57.787 に答える
0

私はあなたがしていることはASP.NETMVCアプリケーションでダイアログと部分ビューを使用する良い方法ではないと言わなければなりません。アイデアを示すための簡単なコードをいくつか紹介します。

list.cshtmlがユーザーページのリストであり、edit.cshtmlがに編集フォームがある部分ビューである場合。

リストページ：

$(".grid-row .edit").click(function(){
    editUser($(this).attr("data-id"));
});
function editUser(id){
  var $dialog=$("#dialogEditUser");
  if($dialog.length == 0){
    $dialog=$("<div id='dialogEditUser'>").appendTo("body");
  }
  $dialog.dialog({
    ...
    open:function(){
        $dialog.load("/user/edit/"+id, function(){
            //todo: handle form events
        });
      }
  });
  $dialog.dialog("open");
}

次のように、静的メソッドでダイアログを開く機能を作成することもできます。

MvcSolution.Dialog = function (id, title, options) {
  var $dialog = $("#" + id);
  if ($dialog.length == 0) {
    $dialog = $("<div id='" + id + "' class='dialog' title='" + title + "'></div>").appendTo("body");
  }
  $dialog.dialog(options);
  $dialog.dialog("open");
};

MVCに適したc＃およびjsフレームワークはここにあります

于 2013-01-12T16:00:07.973 に答える