モーダルのHTML構造

BootstrapのモーダルをASP.NETコントロールと連携させるには、ボタンにカスタムデータ属性を設定し、JavaScriptでその値を取得してフォームに反映します。

<button id="btnAdd" type="button" class="btn btn-primary" data-toggle="modal" data-target="#editModal">
    新規追加
</button>

<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editModalLabel">入力フォーム</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label for="modalId" class="form-label">ID</label>
                    <asp:TextBox ID="modalId" runat="server" CssClass="form-control" Style="display:none" />
                </div>
                <div class="mb-3">
                    <label for="modalName" class="form-label">氏名</label>
                    <asp:TextBox ID="modalName" runat="server" CssClass="form-control" />
                </div>
                <div class="mb-3">
                    <label for="modalWeightType" class="form-label">重量単位</label>
                    <asp:DropDownList ID="modalWeightType" runat="server" CssClass="form-control" AutoPostBack="false" />
                </div>
                <div class="mb-3">
                    <label for="modalApprover" class="form-label">承認者</label>
                    <asp:DropDownList ID="modalApprover" runat="server" CssClass="form-control" AutoPostBack="false" />
                </div>
                <div class="mb-3">
                    <label for="modalTotal" class="form-label">合計数量</label>
                    <asp:TextBox ID="modalTotal" runat="server" CssClass="form-control" />
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">キャンセル</button>
                <asp:Button ID="btnSave" runat="server" Text="保存" CssClass="btn btn-success" OnClick="btnSave_Click" />
            </div>
        </div>
    </div>
</div>

データバインド用ボタン

GridViewやRepeater内でモーダルを開くボタンには、data-属性でサーバー側のデータを埋め込みます。

<asp:LinkButton ID="lnkEdit" runat="server" 
    CssClass="btn btn-sm btn-warning" 
    Text="編集" 
    data-toggle="modal" 
    data-target="#editModal"
    data-id='<%# Container.DataItem("id") %>'
    data-name='<%# Container.DataItem("bran_enter_name") %>'
    data-total='<%# Container.DataItem("bran_sum_number") %>'
    data-weighttype='<%# Container.DataItem("bran_weight_type_id") %>'
    data-approver='<%# Container.DataItem("approver_id") %>'>
</asp:LinkButton>

JavaScriptによる値の自動設定

モーダルが表示される直前に、show.bs.modalイベントをフックして、ボタンのカスタム属性から値を取得し、対応するコントロールに設定します。

<script>
$(document).ready(function () {
    $('#editModal').on('show.bs.modal', function (event) {
        const button = $(event.relatedTarget);
        const modal = $(this);

        // モーダルタイトルを更新
        modal.find('.modal-title').text('入力情報の編集');

        // カスタムデータ属性から値を取得してフォームに設定
        modal.find('#modalId').val(button.data('id'));
        modal.find('#modalName').val(button.data('name'));
        modal.find('#modalTotal').val(button.data('total'));
        modal.find('#modalWeightType').val(button.data('weighttype'));
        modal.find('#modalApprover').val(button.data('approver'));
    });
});
</script>

サーバーサイドでの処理

保存ボタンのOnClickイベントでは、モーダル内のTextBoxやDropDownListの値をそのまま取得してDBに保存します。UpdatePanelは不要です。モーダルはクライアントサイドで操作されるため、ページ全体のリフレッシュは発生しません。