在剑道窗口中带有表单的 PartialView

Posted 2023-05-07

【中文标题】在剑道窗口中带有表单的 PartialView

【英文标题】：PartialView with a form in a kendo window

【发布时间】：2015-04-07 11:53:50

【问题描述】：

在我的项目中，我需要在 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);
   [...]

这是我的部分视图：

@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 窗口而不是主窗口中加载的。有什么办法可以关闭剑道窗口吗？

第二个问题：按取消键时如何关闭剑道窗口？

提前谢谢你。 （对不起我的英语不好，这不是我的母语）

【问题讨论】：

您是否设法对该重定向进行排序？要关闭窗口，您可以执行 onclick="parent.jQuery('#windowName').data('kendoWindow').close();"

【参考方案1】：

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

在 PartialView 中不要使用 return RedirectToAction("Profile", "Member", new id: viewModel.Id ，只需使用 return null。

如果您需要在窗口关闭后刷新父级，而我在您的问题中没有看到足够的代码首先从您的 主窗体 启动您的窗口，但是你会在那里绑定一个事件到你的 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>

如果您希望窗口在提交后自动关闭并刷新父窗口，您需要一个自定义函数来执行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>

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