PartialView with a form in a kendo window

Question

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)

Answer 1

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