部分视图与剑道窗口中的表单

Question

在我的项目中,我需要在Kendo窗口中放置一些表单.这些形式在另一部分视图中.我用它来加载局部视图:

@(Html.Kendo().Window()
      .Name("editPasswordPopUp")
      .Visible(false)
     .Modal(true)
     .Width(600)
     .Height(500)
    .Position(settings =>
            settings.Top(70).Left(200))
      .Title("Edit your password")
      .Content("loading user info...")
     .LoadContentFrom("EditPassword", "Member")
      .Iframe(true)
      .Resizable()
      .Draggable()
      )

PartialView的动作:

public ActionResult EditPassword()
{
   return PartialView();
}

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult EditPassword(EditPasswordViewModel viewModel)
{
   [...]
   return RedirectToAction("Profile", "Member", new {id = viewModel.Id});
   [...]
}

这是我的PartialView:

@model Devoteam.CustomerPortal.ViewModels.EditPasswordViewModel
@{
ViewBag.Title = "Edit";
Layout = null;
}

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/kendo")

@using (Html.BeginForm())
{
  @Html.AntiForgeryToken()
  @Html.Partial("_GenericMessage")

  <div id="messageError">
    @Html.ValidationSummary()
  </div>
  // FIELDS
  <div class="buttons">
    <input type="submit" value="Confirm" class="big-button" />
    <input type="submit" value="Cancel" class="big-button" />
  </div>
}

当我单击按钮打开Kendo窗口时,部分视图正确加载到其中.当我提交表单时,操作被正确调用.这是我的问题:当控制器完成其工作时,我调用RedirectToAction来重定向用户.但页面加载在Kendo窗口而不是主窗口中.关闭Kendo窗口有什么解决方案吗？

第二个问题:按取消按钮时如何关闭Kendo窗口？

先感谢您.(抱歉我的英语不好,这不是我的母语)

Answer 1

您可以将其作为 JavaScript 中提交例程的一部分来执行此操作，而不是在从 PartialView 的服务器端控制器代码提交后自动关闭窗口/重定向。

1. 而不是return RedirectToAction("Profile", "Member", new { id: viewModel.Id }在您的 PartialView 中，只需执行return null.

2. 如果您需要在窗口关闭后刷新父级，并且这是我在您的问题中没有看到足够的代码来首先从主窗体启动窗口的地方，但您可以将一个事件绑定到您的 KendoWindow ”关闭”：

   <input type="button" value="Edit Password" onclick="editPassword()" />
   
   <script type="text/Javascript">
       function editPassword() {
           var url = '@Url.Action("EditPassword", "Password")?viewModel=' + '@Model';
           var win = ('#editPasswordPopUp').data('kendoWindow').bind("close", function(e) {
               // Whatever you put here will run after your PartialView
               window.top.location.reload();  // reloads parent onclose of Kendo window
           });
           win.refresh(url);
           win.open();
           win.center();
       }
   </script>
   

3. 如果您希望窗口在提交后自动关闭并刷新父窗口，则需要一个自定义函数来执行submit()，而不是使用input type="submit"您拥有的 。这样，您就可以按照 Dante 的建议，将窗口关闭事件添加到 PartialView 中：

   <input type="button" value="Confirm" class="big-button" onclick="formSubmit() />
   
   <script type="text/Javascript">
       function formSubmit() {
           $('form').submit();
           parent.$('#editPasswordPopUp').data('kendoWindow').close();
       }
   </script>
   

4. 对于关闭表单的取消按钮，您可以执行相同的操作。将其设为 atype="button"而不是type="submit"，放入 anonclick来转到使用同一行关闭窗口的函数： parent.$('#editPasswordPopUp').data('kendoWindow').close();。