在剑道窗口中带有表单的 PartialView [英] PartialView with a form in a kendo window

问题描述

在我的项目中，我需要在 Kendo windows 中放置一些表单.这些形式是另一个局部视图.我用它来加载局部视图:

@(Html.Kendo().Window().Name("editPasswordPopUp").可见(假).模态(真).宽度(600).高度(500).位置(设置=>settings.Top(70).Left(200)).Title("编辑密码").Content("正在加载用户信息...").LoadContentFrom("EditPassword", "Member").iframe(真).可调整大小().Draggable())

PartialView 的动作:

public ActionResult EditPassword(){返回 PartialView();}[HttpPost][验证AntiForgeryToken]公共 ActionResult EditPassword(EditPasswordViewModel viewModel){[...]return RedirectToAction("Profile", "Member", new {id = viewModel.Id});[...]}

这是我的 PartialView :

@model Devoteam.CustomerPortal.ViewModels.EditPasswordViewModel@{ViewBag.Title = "编辑";布局 = 空；}@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 class="buttons"><input type="submit" value="Confirm" class="big-button"/><input type="submit" value="Cancel" class="big-button"/>

}

当我单击按钮打开 Kendo 窗口时，局部视图正确加载到其中.当我提交表单时，该操作被正确调用.这是我的问题:当控制器完成其工作时，我调用 RedirectToAction 来重定向用户.但是页面是在 Kendo 窗口而不是主窗口中加载的.有什么办法可以关闭剑道窗口吗?

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

先谢谢你.(对不起，我的英语不好，这不是我的母语)

解决方案

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

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

2. 如果您需要在窗口关闭后刷新父级，并且我在您的问题中没有看到足够的代码来首先从您的主表单启动您的窗口>，但您会将那里的事件绑定到您的 KendoWindow关闭":

   <script type="text/Javascript">功能编辑密码(){var url = '@Url.Action("EditPassword", "Password")?viewModel=' + '@Model';var win = ('#editPasswordPopUp').data('kendoWindow').bind("close", function(e) {//你放在这里的任何东西都会在你的 PartialView 之后运行window.top.location.reload();//在 Kendo 窗口关闭时重新加载父级});赢.刷新(网址)；赢.打开()；赢.中心()；}

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

4. 对于关闭表单的取消按钮，您会做同样的事情.将其设为 type="button" 而不是 type="submit"，放入 onclick 以转到关闭窗口的函数使用同一行:parent.$('#editPasswordPopUp').data('kendoWindow').close();.

In my project, I need to put some forms in Kendo windows. These forms are in another partial view. I use this to load the partial view :

@(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()
      )

The actions of the PartialView :

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

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

And here is my 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>
}

When I click on the button to open the Kendo window, the partial view load correctly in it. When I submit my form, the action is correctly called. Here is my problem: When the controller has done its job, I call a RedirectToAction to redirect the user. But the page is loaded in the Kendo window instead of the main window. Is there any solution to close the Kendo window?

Second question: How to close the Kendo window when pressing the cancel button?

Thank you in advance. (Sorry for my poor English, this is not my native language)

解决方案

Instead of closing the window/redirecting automatically after the submit from the PartialView's server-side controller code, you can do this as part of the submit routine in the JavaScript.

1. Instead of a return RedirectToAction("Profile", "Member", new { id: viewModel.Id } in your PartialView, just do return null.

2. If you need to refresh the parent after the window closes, and this is where I don't see enough code in your question to launch your window in the first place from your main form, but you would bind an event there to your KendoWindow "close":

   <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. If you then want the window to automatically close and refresh the parent after submission, you need a custom function doing the submit(), instead of using the input type="submit" that you have. This way you could, as Dante suggested, add the window close event into your 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. For the cancel button to close the form, you would do the same thing. Make it a type="button" instead of type="submit", put in an onclick to go to a function that closes the window using that same line: parent.$('#editPasswordPopUp').data('kendoWindow').close();.

这篇关于在剑道窗口中带有表单的 PartialView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！