Откройте диалоговое окно jQuery при нажатии на Html.ActionLink + MVC4

У меня есть представление, которое показывает список сторон. каждая сторона имеет ActionLink.

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

Моя ссылка на действие переходит к действию редактирования и отображает вид редактора.

Основная идея заключается в том, что при щелчке ActionLink диалоговое окно jQuery должно появиться с представлением редактора, и любые изменения в представлении должны быть сохранены в базе данных.

Моя проблема: я не знаю, как открыть представление в диалоговом окне jQuery. Итак, как бы вы открыли представление в диалоговом окне jQuery?

Если такое же может быть достигнуто без использования ActionLink, это также полезно.

Ответы

Ответ 1

Возможно, ваше действие вернет частичный вид вместо полного представления, затем прочитайте документацию 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 ui script после jquery, а также необходимые таблицы стилей.

Ответ 2

вы можете сделать так, как это просто

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

Ответ 3

Вам не нужно делать все это, попробуйте что-то вроде:

@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")
}

Работает для меня:)