11

パーティーのリストを表示するビューがあります。すべてのパーティに ActionLink があります。

@Html.ActionLink("Edit", "Edit", new { id = 234 })

私のアクション リンクは編集アクションに移動し、エディター ビューをレンダリングします。

主なアイデアは、ActionLink をクリックすると、jQuery ダイアログ ボックスがエディター ビューで表示され、ビュー内の編集内容がデータベースに保存されることです。

私の問題は、jQuery ダイアログでビューを開く方法がわからないことです。では、jQuery ダイアログでビューを開くにはどうすればよいでしょうか。

ActionLink を使用せずに同じことが実現できれば、それも役に立ちます。

4

3 に答える 3

26

アクションが全体ビューではなく部分ビューを返すようにしてから、 のドキュメントを読み、jQuery UI dialog最後に必要なコードを記述することができます。

アンカーにクラスを与えることから始めます。

@Html.ActionLink("Edit", "Edit", null, new { id = 234 }, new { @class = "modal" })

ダイアログのプレースホルダーを定義します。

<div id="my-dialog"></div>

コントローラー アクションが部分的なビューを返すことを確認します。

public ActionResult Edit(int id)
{ 
    MyViewModel model = ...
    return PartialView(model);    
}

そして最後にJavaScriptを書いてライブにします：

<script type="text/javascript">
    $(function () {
        $('#my-dialog').dialog({
            autoOpen: false,
            width: 400,
            resizable: false,
            modal: true
        });

        $('.modal').click(function() {
            $('#my-dialog').load(this.href, function() {
                $(this).dialog('open');
            });
            return false;
        });
    });
</script>

言うまでもなく、jquery の後に jQuery ui スクリプトと必要なスタイルシートを含める必要があります。

于 2013-07-12T10:54:32.260 に答える
1

このように簡単にできます

formatter: function (cellvalue, options, rowObject) {
                    var x = '@Html.ActionLink("Col", "Index", "Lists", new { id = "listvalid" }, new { @style = "color:black;font-weight:bold;" })';
                    return x.replace("listvalid", rowObject.list_key).replace("Col", rowObject.list_name);
                }, sortable: true, align: 'left', width: 200, editable: true
于 2015-05-08T12:17:32.777 に答える
0

いじり回す必要はありません。次のようなことを試してください。

@Html.ActionLink("Open Dialog", null, null, null, 
      new { data_role = "button", data_inline = true, data_rel = "dialog", 
            data_transition = "pop", href="#dialogId" })

ここで重要なのはhref属性です。

また、次のように、目的のページにダイアログを追加できることにも注意してください。

@section dialogPages {
    &lt;div data-role="page" id="dialogId"&gt;
        &lt;div data-role="header"&gt;
        &lt;/div&gt;
        &lt;div data-role="content"&gt;
       &lt;/div&gt;
        &lt;div data-role="footer"&gt;
       &lt;/div&gt;
    &lt;/div&gt;
}

そして、_Layout.cshtml に以下を含めます。

@if (IsSectionDefined("dialogPages"))
{
    @RenderSection("dialogPages")
}

私のために働きます:)

于 2013-12-12T12:10:01.980 に答える