2

これは私の最初のブートストラップ/jQuery アプリケーションです。

個人の複数の住所を表示するアプリがあり、各住所は [編集] ボタンで編集できます。

「編集」をクリックしてから、ajax にスクリプトを呼び出してデータベースからその特定のデータをロードし、それを twitter モーダル ウィンドウに配置する方法がわかりません。

編集ボタンのコードは次のとおりです。

a class="btn btn-small open-EditAddress" data-toggle="modal" data-id="#custom.addr_id#"         href="##edit_address_modal"><i class="icon-pencil"></i> Edit</a>

各編集ボタンは を渡しますAddr_id。これにより、編集用にデータが入力された twitter モーダル ウィンドウがトリガーされます。

モーダル編集を起動しましたが、更新のために外部データをモーダルにロードするために次に何をすべきかわかりません。

http://i.imgur.com/5ig3k.jpg

http://i.imgur.com/Oi98S.jpg

jQueryで外部データを呼び出してモーダルにロードするのを手伝ってくれる人はいますか?

4

1 に答える 1

1

Editクリックしたときにモーダルの表示がトリガーされないように、リンクを次のように更新します。

<a class="btn btn-small open-EditAddress" data-id="#custom.addr_id#" href="/ControllerName/ActionNameToGetAddressInfo/[locationId]" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#ModalEditAddress"><i class="icon-pencil"></i> Edit</a>

フォームをロードした後、JQuery を介して個別にトリガーするため、これを行いたくありません。また、これらすべての追加のデータ属性にも注意してください。これらは、ajax 呼び出しを有効にして、モーダル div に必要な情報を入力します。

ページのどこかにモーダル要素が必要です:

<div id="ModalEditAddress" class="modal hide fade">
</div>

次のアクションへの ajax 呼び出しが取り込まれるため、空です。

public ActionResult ActionNameToGetAddressInfo(int id) // locationId
{
    var model = [get all the address information from DB or however you get it];
    return View("~/Views/[ControllerName]/_EditAddress.cshtml", model);
}

ここにあなたの部分的なビューがあります_EditAddress.cshtml:

    @using(Ajax.BeginForm("[ActionNameToSaveAddress]","[ControllerName]", new AjaxOptions{...}))
    {
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3>Edit Address</h3>
        </div>
        <div class="modal-body">
            [all the form related inputs]
        </div>
        <div class="modal-footer">
            <input type="submit" value="Save Address" />
        </div>
    }
    <script type="text/javascript">
        $('#ModalEditAddress').modal('show');
    </script>

これまでのところ、編集リンクをクリックすると、Ajax 呼び出しアクションがトリガーされ、その結果がwithActionNameToGetAddressInfoに入れられます。これが発生すると、部分ビューの一番下でスクリプトが実行され、モーダルが表示されます。divid="ModalEditAddress"

アドレスを保存する別のアクションと、保存時にモーダルを非表示にする JQuery を作成する必要があります。

これはすべて疑似コードであるため、動作させるには何らかの調整が必要になる場合があります。

于 2012-12-13T21:59:48.157 に答える