AjaxHelper を利用した作成・更新フォーム(ダイアログで表示)

AjaxHelper を利用した作成・更新フォーム(サーバー側検証エラーの表示)」までで作成した入力・編集ウィンドウを jQuery を利用してダイアログ化します。やることは「ASP.NET MVC と jQuery で新規登録ダイアログと編集ダイアログ」で行ったことと概ね同じですけど、新規登録と編集のダイアログで表示するフォームを部分ビューの呼び出しで入手する必要があります。そのため、Javascript からリンクのクリック操作を行い、サーバーから部分ビューを入手します。

動かしてみた画面は、こんな感じです(編集でメールアドレスの重複エラーになった画面)。画面自体は「ASP.NET MVC と jQuery で新規登録ダイアログと編集ダイアログ」のものと変わりません 😛

メールアドレス重複エラーを通知しているダイアログ

これもモデルに変更は、ありません。コントローラーにも変更は、ありません。

_Layout.cshtml にスタイルシートの追加領域を入れ込みます。

<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    @RenderSection("styles", required:false)
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    @RenderSection("scripts", required:false)
</head>

 

ListContacts.cshtml は、こんな感じです。

@model IDictionary<int, string>

@{
    ViewBag.Title = "ListContacts";
}

@section styles {
<link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="Stylesheet" type="text/css" />
}

@section scripts {
<script src="@Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
<script type="text/javascript">
    function createContact() {
        $("#createLink a").click();
        showDialog("#editForm", "新規作成", "作成");
    }

    function editContact(key) {
        $("#edit" + key + " a").click();
        showDialog("#editForm", "連絡先編集", "更新");
    }

    function getContact(key) {
        $("#get" + key + " a").click();
        $("#editForm").dialog({
            title: "詳細表示",
            width: 550,
            height: 400,
            modal: true,
            buttons: {
                "閉じる": function () {
                    $(this).dialog("close");
                }
            },
            close: function () {
                $(this).dialog("destroy");
            }
        });
    }

    function showDialog(selector, titleText, buttonText) {
        var buttons = {};
        buttons[buttonText] = function () {
            $(selector + " form").submit();
            if ($(selector + " form").valid()) {
                $(this).dialog("close");
            }
        };
        buttons["キャンセル"] = function () {
            $(this).dialog("close");
        }
        $(selector).dialog({
            title: titleText,
            width: 550,
            height: 415,
            modal: true,
            buttons: buttons,
            close: function () {
                $(this).dialog("destroy");
            }
        });
    }
</script>
}

<h2>@ViewBag.Title</h2>

<a href="#" onclick="createContact()">追加</a>

<table>
    <tr>
        <th>名前</th>
        <th></th>
    </tr>
@foreach (var item in Model)
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Value)
        </td>
        <td>
            <a href="#" onclick="getContact(@item.Key)">詳細</a> |
            <span id="@("get" + item.Key)" style="display:none;">
                @Ajax.ActionLink("詳細", "GetContact", new { id = @item.Key },
                    new AjaxOptions() { UpdateTargetId = "editForm" }) |
            </span>
            <a href="#" onclick="editContact(@item.Key)">編集</a>
            <span id="@("edit" + item.Key)" style="display:none;">
                @Ajax.ActionLink("編集", "EditContact", new { id = @item.Key },
                    new AjaxOptions() { UpdateTargetId = "editForm" })
            </span>
        </td>
    </tr>
}
</table>

<div>
    @Html.ActionLink("戻る", "Index")
</div>

<div id="editForm">
</div>
<div id="createLink" style="display:none;">
@Ajax.ActionLink("追加", "CreateContact", new AjaxOptions() { UpdateTargetId = "editForm" })
</div>
@if (TempData["model"] != null)
{
    <div id="errForm" style="display:none;">
    <div style="color:Red;margin-top:1em">@Html.Encode(TempData["errMsg"])</div>
    @Html.Action("EditContact")
    </div>
    var errModel = (TestAjaxPartialForm001.Models.DataModel)TempData["model"];
    <script type="text/javascript">
    <!--
        function setForm(actionName, id, name, email, phone) {
            var fieldTitle = "編集画面";
            if (actionName == "CreateContact") {
                fieldTitle = "追加画面";
            }
            $("#errForm form")
                .attr("action", "/Home/" + actionName + "/" + id)
                .find("legend").text(fieldTitle)
                .end()
                .find("input[id=Id]").val(id)
                .end()
                .find("input[id=Name]").val(name)
                .end()
                .find("input[id=Email]").val(email)
                .end()
                .find("input[id=Phone]").val(phone);
        }

        $(function () {
            var errData = $("#errData");
            setForm(errData.find("div[class=actionName]").text(), errData.find("div[class=id]").text(),
                errData.find("div[class=name]").text(), errData.find("div[class=email]").text(),
                errData.find("div[class=phone]").text());
            if (errData.find("div[class=actionName]").text() == "CreateContact")
                showDialog("#errForm", "新規作成", "作成");
            else
                showDialog("#errForm", "連絡先編集", "更新");
        });
    //-->
    </script>
    <div id="errData" style="display:none;">
        <div class="actionName">@Html.Encode(TempData["actionName"])</div>
        <div class="id">@Html.Encode(errModel.Id)</div>
        <div class="name">@Html.Encode(errModel.Name)</div>
        <div class="email">@Html.Encode(errModel.Email)</div>
        <div class="phone">@Html.Encode(errModel.Phone)</div>
    </div>
}

明細行のリンクに JavaScript の呼び出しをセットして、もともとあった Ajax.ActionLink で生成されるリンクは非表示にして、JavaScript からリンクのクリックイベントを発生させています。

CreateContact.cshtml, EditContact.cshtml, GetContact.cshtml の3つの部分ビューは、ボタンと「画面を閉じる」のリンクを削除します。

 

こんな感じで、ダイアログ表示を行う画面ができました。

なお、あくまで感触を掴むために書いたものなので、エラー・ハンドリングを省いています。もし参考にされる方がいらしたら、ちゃんとエラー処理をしてください 😉

何か気がついたこととかあったら、指摘していただけると嬉しいです 🙂


AjaxHelper を利用した作成・更新フォーム(ダイアログで表示)」への1件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です