8

ブートストラップを使用してMVC 4で実験していることで誰かが私を助けてくれることを願っています。

各行の編集および削除アクション アイコンと共にテーブル内のアイテムを表示する、厳密に型指定されたインデックス ビューがあります。

@model IEnumerable<Models.EquipmentClass>

....

@foreach (var item in Model)
{
<tbody>
    <tr>
        <td>
            @item.ClassId
        </td>
        <td>
            @item.ClassName
        </td>
        <td>
            <a href=@Url.Action("Edit", "EquipmentClass", new { id = item.ClassId })>
                <i class="icon-edit"></i>
            </a>
            <a href=@Url.Action("Delete", "EquipmentClass", new { id = item.ClassId })>
                <i class="icon-trash"></i>
            </a>
        </td>
    </tr>
</tbody>
} <!-- foreach -->

EquipmentClass コントローラは、id に基づいて、選択された項目の編集ビューを返します。すべてが素晴らしく、この時点で期待どおり

public ViewResult Edit(int id)
{
    return View(equipmentclassRepository.Find(id));
}

私が知りたいのは、ブートストラップ モーダル ダイアログで編集フォームを開く方法です。

テーブルの編集アクションを次のように置き換えて、ビューの下部にモーダル div を配置することもできますが、選択したアイテムの ID とモーダル セクションで使用する必要がある HTML ヘルパーを渡すにはどうすればよいですか?

<!-- replaced table action -->
<a class="btn pull-right" data-toggle="modal" href="#myModal" >Details</a>

....

<!-- modal div -->
<div class="modal hide fade in" id="myModal" )>
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        @Html.Partial("Edit")
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div>

アドバイスをいただければ幸いです。

4

2 に答える 2

13

私はあなたの問題に対する解決策を持っていると思います。MVC アプリケーションを希望どおりに動作させるには、提供したコードにいくつかの変更を加える必要があります。

1.アイテムを編集するためのモーダルを表すdivをレイアウト ページの下部に追加します。

<div id="editModalContainerID" class="modal hide fade" data-url='@Url.Action("Edit", "EquipmentClass")'> 
<div id="editModalBodyID"></div> 
</div>

このモーダルは、 EquipmentClassアイテムの編集を担当するコントローラー アクションに厳密に接続されていることに注意してください。

2.カスタム JavaScript にjQuery関数を追加します。

function showModal(modalContainerId, modalBodyId, id) {
    var url = $(modalContainerId).data('url');

    $.get(url, { id: id }, function (data) {
        $(modalBodyId).html(data);
        $(modalContainerId).modal('show');
    });
}

ご覧のとおり、この関数はidをパラメーターの 1 つとして受け取ります。一般に、その目的は、空のモーダル ボディを別の部分ビューに配置するものに置き換え、コンテナ全体をモーダル ページとして表示することです。

3.モーダル div を別の部分ビューに配置し、それをEditと呼びます (コントローラーのアクション名と同じにする必要があります)。Edit部分名を、 EditBody などのsth elseに変更する必要があります。

編集部分ビューは次のようになります。

@model EquipmentClass

<!-- modal div -->
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
</div>
<div class="modal-body">
    @Html.Partial("EditBody", Model)
</div>
<div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
</div>

4.前の手順で作成した部分ビューを返すようにコントローラー アクションを変更します。

public PartialViewResult Edit(int id)
{
    return PartialView(equipmentclassRepository.Find(id));
}

5. edit 'a' アンカーを変更して、作成したjQuery関数を呼び出すようにします。

@model IEnumerable<Models.EquipmentClass>

....

@foreach (var item in Model)
{
<tbody>
    <tr>
        <td>
            @item.ClassId
        </td>
        <td>
            @item.ClassName
        </td>
        <td>
            <a data-toggle="modal" onclick="showModal('#editModalContainerID', '#editModalBodyID', @item.ClassId)">
                <i class="icon-edit"></i>
            </a>
            <a href=@Url.Action("Delete", "EquipmentClass", new { id = item.ClassId })>
                <i class="icon-trash"></i>
            </a>
        </td>
    </tr>
</tbody>
} <!-- foreach -->

このようにして、編集アイコン付きの「a」アンカーがクリックされるたびに、showModal 関数 (関連 ID が渡される) が起動され、関連データを含むブートストラップ モーダルが表示されます。

それを行うためのより良い方法があると確信していますが、この方法は私にとってはうまくいきました:)

これが少し役立つことを願っています:)

于 2013-01-12T22:34:22.770 に答える
3

Przemoの回答は私にとってはうまくいきましたが、コードの最初のブロックを

<div id="editModalContainerID" class="modal hide fade" data-url='@Url.Action("Edit", "EquipmentClass")'> 
<div id="editModalBodyID"></div> 
</div>

に

<div id="editModalContainerID" class="modal fade" data-url='@Url.Action("Edit", "EquipmentClass")'> 
<div id="editModalBodyID"></div> 
</div>

editModalContainerID から「フェード」クラスを削除したことに注意してください。そうしないと、部分ビューが読み込まれません。これが同じ問題を抱えている他の人に役立つことを願っています。

于 2014-01-05T03:23:01.760 に答える