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

问题描述

在我的项目中，我需要在剑道窗口中放置一些表格.这些形式是另一个局部视图.我用它来加载局部视图:

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

PartialView的操作:

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});
   [...]
}

这是我的PartialView:

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>
}

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

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)

推荐答案

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

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. 代替PartialView中的return RedirectToAction("Profile", "Member", new { id: viewModel.Id }，只需执行return null.

2. 如果您需要在窗口关闭后刷新父窗口，而在这里，我的问题中没有足够的代码可以从主窗体中首先启动窗口，但是您可以将一个事件绑定到KendoWindow的关闭"位置:

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>

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

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>

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

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屋！