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

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

只需执行return RedirectToAction("Profile", "Member", new { id: viewModel.Id }，而不是PartialView中的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();。

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

1 个答案: