Help with Handling Form Submission in Popup Window

[Bob]

Hello all,

I am relatively new to the Kendo UI suite, so I need some assistance in an application I'm working on.  I'm using Visual Studio 2010, MVC3.  I will do my best to explain my situation and the problem I'm trying to solve.

I'm trying to handle the login process for my application using a popup window that is raised by a link in the main browser window.  On my main screen, I have an Html.ActionLink that opens the view for the logon page (screen shot #1).  This is a simple view with one link.  The logon view contains the definition for the Kendo window, so the username/password entry screen is then presented as a modal popup (attached screenshot #2).  When the logon link on the main page is clicked, the Kendo window opens as a popup without any issues, and I can enter the user and password.   If the entered user and password is correct, the popup closes and the controller code redirects the user to the application's main menu of options in the browser window, as expected.  The problem arises when the user/password fails validation, because the popup window still closes, and the resulting "invalid login" message is displayed in the main browser window.  I'm trying to keep the popup open after the submission, and display the error within the popup, so the user can try again (simulated in screen shot #3).

All of the logic for the Kendo window definition exists in the logon view, not the main view.  Also, I'm not sure which pieces of code to post in helping to clarify this, but I will gladly do so if it helps me to resolve the problem.  So, in a nutshell, how do I keep my logon popup window open and have it receive the results of an invalid user/password submission, rather than have it close and the results sent to the main browser window.

Thanks in advance,
Bob

[Daniel]

Hello Bob,

Could provide the code you are using for the Window view and the logon action controller so I can check the exact setup? Basically if the Window is visible on initialization and the same view is used when the entered values are not valid, the Window should stay opened and the error message should be shown as expected.

Regards,
Daniel
Telerik

[Bob]

Daniel,

Thanks for your help.  I've attached a zip file containing my code.  It has four files:

• -MainWindowCode.cshtml : This is the view for the main window that invokes the logon window popup.
• LogOnPanel.cshtml : The view that is loaded as the content of the Kendo window popup.
  
• AccountController.cs : The controller handling the actions.
  
• FailedLogonResult.png : This is the result of an invalid logon.  Response is directed back to main browser window, rather than Kendo window.

[Daniel]

Hello again Bob,

The Window should be added to the LogOnPanel view in order for it to be shown again when the values are not valid. For example:

Please @Html.ActionLink("log on", "LogOnPanel","Account") to access the system.

@model OEWebConfigurator.Models.LogOnModel

@{
    ViewBag.Title = "Authorization";
}

@{Html.Kendo().Window()
    .Name("LogOnPanel")
    .Title("Logon")
    .Actions(actions => actions.Close())
    .Content(@<text>
           @using (Html.BeginForm())
            {
                <table class="custom-noborder">
                    <tr>
                        <td>
                            <fieldset class="LogonWindowFieldSet">
                                <div class="editor-label">
                                    @Html.LabelFor(m => m.UserName)
                                </div>
                                <div class="editor-field focus">
                                    @Html.TextBoxFor(m => m.UserName, new { style = "editor-field focus", @maxlength = "20" })
                                </div>

                                <div class="editor-label">
                                    @Html.LabelFor(m => m.Password)
                                </div>
                                <div class="editor-field">
                                    @Html.PasswordFor(m => m.Password)
                                </div>

                                <div>
                                <br />
                                </div>
                                <input type="submit" id="LogonSubmitButton" value="Log On" class="k-button" />
                            </fieldset>
                                <div class="editor-label" style="height:15px">
                                    @Html.LogOnValidationSummary("Invalid user name or password.")
                                </div>
                        </td>
                    </tr>
                </table>
            }
     </text>)
    .Modal(true)
    .Height(275)
    .Width(285)
    .Scrollable(false)
    .Render();
}

Regards,
Daniel
Telerik