DevExpress Mvc PopupControl Рендеринг AjaxForm

По ссылке в существующем представлении я пытаюсь открыть модальное диалоговое окно, используя расширение HTML Express Devup PopupControl. С открытой формой она должна собирать данные и затем обрабатывать ответ, вызывая метод контроллера. Контроллер возвращает соответствующий частичный вид, который будет отображаться (в идеале) в AjaxForm.

Вот несколько версий кода, которые я пытался написать для достижения этой цели.

контроллер:

Частичное представление формы (_Form.cshtml):

@model MyModel
<div class="line">
    <div class="cell label">
        Name:
    </div>
    <div class="cell">
        @Model.Name
    </div>
</div>
<div class="line">
    <div class="cell label">
        Expiration Date:
    </div>
    <div class="cell">
        @Html.DevExpress().DateEdit(ViewEditorSettings.DateEditSettings("ExpirationDate", "",
    minDate: Model.EffectiveDate, errorDisplayMode: ErrorDisplayMode.ImageWithText, cssClass: "editor")
                    ).Bind(Model.ExpirationDate).GetHtml()
        @Html.ValidationMessageFor(model => model.ExpirationDate)
    </div>
</div>
<div class="line">
    <div class="cell"></div>
    <div class="cell">
        @Html.DevExpress().Button(
        settings =>
        {
            settings.Name = "btnSend";
            settings.ControlStyle.CssClass = "button";
            settings.Text = "Expire";
            settings.UseSubmitBehavior = true;
        }).GetHtml()
    </div>
    <div class="cell">
        @Html.DevExpress().Button(
        settings =>
        {
            settings.Name = "btnCancel";
            settings.ControlStyle.CssClass = "button";
            settings.Text = "Cancel";
            settings.UseSubmitBehavior = false;
            settings.ClientSideEvents.Click = "function(s, e) { ProcessExpireCancelResult(); }";
        }).GetHtml()
    </div>
</div>

Версия 1 пытается создать AjaxForm в PopupPartial (код ниже приводит к пустому PopupControl)

@Html.DevExpress().PopupControl(settings =>
{
    settings.Name = "expirationDialog";
    settings.CallbackRouteValues = new { Controller = "MyController", Action = "LoadExpirationDialog" };
    settings.LoadContentViaCallback = LoadContentViaCallback.OnFirstShow;

    settings.ClientSideEvents.BeginCallback = "ExpirationDialog_OnBeginCallback";

    settings.CloseAction = CloseAction.OuterMouseClick;
    settings.PopupHorizontalAlign = PopupHorizontalAlign.WindowCenter;
    settings.PopupVerticalAlign = PopupVerticalAlign.WindowCenter;
    settings.AllowDragging = false;
    settings.EnableHotTrack = true;
    settings.Height = Unit.Pixel(130);
    settings.Width = Unit.Pixel(400);

    settings.Modal = true;

    settings.HeaderText = "Item Expiration";

    settings.SetContent(() =>
    {
        @using (Ajax.BeginForm("Expire", "MyController",
        new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "expiration", InsertionMode = InsertionMode.Replace },
        new { id = "expirationForm", @class = "expirationForm" }))
        {
        <div id="expiration">
            @Html.Partial("_Form", Model)
        </div>
        }
    });
}).GetHtml()

Версия 2 с использованием HtmlForm: (форма отображается, но форматирование является неправильным, и нажатие кнопки отправки приводит к частичному представлению, которое выдает нулевое исключение, ссылающееся на модель)

@Html.DevExpress().PopupControl(settings =>
{
    settings.Name = "expirationDialog";
    settings.CallbackRouteValues = new { Controller = "MyController", Action = "LoadExpirationDialog" };
    settings.LoadContentViaCallback = LoadContentViaCallback.OnFirstShow;

    settings.ClientSideEvents.BeginCallback = "ExpirationDialog_OnBeginCallback";

    settings.CloseAction = CloseAction.OuterMouseClick;
    settings.PopupHorizontalAlign = PopupHorizontalAlign.WindowCenter;
    settings.PopupVerticalAlign = PopupVerticalAlign.WindowCenter;
    settings.AllowDragging = false;
    settings.EnableHotTrack = true;
    settings.Height = Unit.Pixel(130);
    settings.Width = Unit.Pixel(400);

    settings.Modal = true;

    settings.HeaderText = "Item Expiration";

    settings.SetContent(() =>
    {
        using (Html.BeginForm("Expire", "MyController", FormMethod.Post, new { id = "expirationForm", @class = "expirationForm" }))
        {

            ViewContext.Writer.Write("<div id=\"expiration\">");
            Html.RenderPartial("_Form", (MyModel)Model);
            ViewContext.Writer.Write("</div><b class=\"Clear\"></b>");
        }
    });
}).GetHtml()

Версия 3, оборачивающая AjaxForm в частичное представление:

@Html.DevExpress().PopupControl(settings =>
{
    settings.Name = "expirationDialog";
    settings.CallbackRouteValues = new { Controller = "MyController", Action = "LoadExpirationDialog" };
    settings.LoadContentViaCallback = LoadContentViaCallback.OnFirstShow;

    settings.ClientSideEvents.BeginCallback = "ExpirationDialog_OnBeginCallback";

    settings.CloseAction = CloseAction.OuterMouseClick;
    settings.PopupHorizontalAlign = PopupHorizontalAlign.WindowCenter;
    settings.PopupVerticalAlign = PopupVerticalAlign.WindowCenter;
    settings.AllowDragging = false;
    settings.EnableHotTrack = true;
    settings.Height = Unit.Pixel(130);
    settings.Width = Unit.Pixel(400);

    settings.Modal = true;

    settings.HeaderText = "Item Expiration";

    settings.SetContent(() =>
    {
        Html.RenderPartial("_Container");
    });
}).GetHtml()

С контейнером как:

@model MyModel

@using (Ajax.BeginForm("Expire", "MyController",
        new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "expiration", InsertionMode = InsertionMode.Replace },
        new { id = "expirationForm", @class = "expirationForm" }))
{
    <div id="expiration">
        @Html.Partial("_Form", Model)
    </div>
}

Методы контроллера немного не имеют значения, но для потомков: (я использую метод Javascript для заполнения параметров обратного вызова для всплывающего окна)

public ActionResult LoadExpirationDialog(int id)
        {
            var model = MyModelLoader.LoadById(id);
            return PartialView("_PopupPartialView", model);
        }

[HttpPost]
public ActionResult Expire(MyModel model)
        {
            if (!Request.IsAjaxRequest())
            { // Theme changing
                ModelState.Clear();
                // TODO:  Handle this scenario (not currently hit)
            }
            if (ModelState.IsValid)
            {
                MyModelContext.SaveModel(model);
                return PartialView("_ExpirationSuccess");
            }
            else
                // NOTE:  currently returning the popup control, but can changed based on appropriate behavior
                return PartialView("_PopupPartialView", model);
        }

Я ссылался на эти демонстрационные примеры DevExpress (примеры), но не могу заставить это работать должным образом для моей ситуации:

DevExpress MVC PopupControl Модальный режим

URL контента DevExpress MVC PopupControl

DevExpress MVC PopupControl Загрузка по требованию

Буду очень признателен за любые предложения о том, как сделать эту работу. По сути: 1) Показать диалоговое окно 2) Запрос на ввод 3) Настоящее подтверждение / подтверждение 4) Закрыть диалоговое окно

Даже открыт для этого по-другому.

0 ответов

Другие вопросы по тегам