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) Закрыть диалоговое окно
Даже открыт для этого по-другому.