[Solved] Submitting a Window?

[Prakash]

Is it possible to submit a window to a Controller Action? I am trying to show some dropdown items within Window. Upon user selecting an item, there should be a 'Save' button which should save the user preference and close the Window. What is the best way to achieve it?

[Derek Hunziker]

I was able to achieve this by pointing the window's content setting at another view. For example:

.Content(() =>
       { %>
    <iframe src="<%= Url.Action("AnotherAction") %>" style="width: 100%; height: 100%;" frameborder="0"></iframe>
    <% })

You can handle all of your logic in the separate view, including validation, form elements and a submit button. To close the window, you can call a javascript function in the calling view by using parent.MyJavaScriptFunction() from within the window itself.

[Paul Hoeffer]

Is this the only way?  It seems clunky and I'm wondering why the control doesn't work the way it should. 

[Alex Gyoshev]

If you have the following window declaration:

<%  Html.Telerik().Window()
        .Name("Window")
        .Title("Submit feedback")
        .Content(() => {%>
            <% using (Html.BeginForm("popupform", "window", FormMethod.Post, new { id = "feedback-form" }))
               { %>
                    <label for="name">Name:</label>
                    <%= Html.TextBox("name") %>
                    <label for="email">E-mail:</label>
                    <%= Html.TextBox("email") %>
                    <div class="form-actions">
                        <button type="submit" class="t-button t-state-default">Submit feedback!</button>
                    </div>
            <% } %>
        <%})
        .Width(400)
        .Draggable(true)
        .Modal(true)
        .Visible(false)
        .Render();
%>

 
You can attach a JavaScript handler to the submit button, which serializes the form and posts it through AJAX:

$('#feedback-form').submit(function(e) {
    var data = $(this).serialize();
    $.post(this.action, data, function(){
        $('#feedback-form').closest('.t-window').data('tWindow').close();
    });
    e.preventDefault();
});

This way, you'll have ajax submission and clean HTML.

All the best,
Alex Gyoshev
the Telerik team

[Paul Hoeffer]

How is this different from simply using

window.ajaxRequest(url);

in JS?

[T. Tsonev]

Hi Paul,

The window.ajaxRequest function will submit a GET request to the specified URL. It will not use POST to submit the form to the server.

I hope this helps.

Regards,
Tsvetomir Tsonev
the Telerik team

[Chris Williams]

Why wouldn't you just use an Ajax form instead of doing all of the manual work to hook the submit button and serialize the data?

<% using (Ajax.BeginForm(new AjaxOptions {UpdateTargetId = "SaveResult" }))
{
}
%>

[Alex Gyoshev]

Hello Chris,

Whatever works. Personally, I'd stick to the $.post because it doesn't require two more JS files to be loaded (Microsoft.Ajax.js and MicrosoftMvc.Ajax.js). If they are already loaded, the AJAX form will require less code to get going.

Regards,
Alex Gyoshev
the Telerik team

[Cory Deppen]

What would the 'popupform' action method return in this case?

[Chad DeHart]

As Cory Deppen asked, does anyone know what the proper return would be for the popupform action method?  It works with a RedirectToAction, but it doesn't seem right.

[Alex Gyoshev]

Depends on whether you want to communicate with the server, i.e. whether you want the controller to return a result that you'll interpret on the client. I assume that you mean the scenario where you don't want any content returned (otherwise you can return a PartialView / JsonResult). When you want no content to be returned, the proper way to do it is to return a 204 HTTP status code (No Content). In MVC3, there's a HttpStatusCodeResult that you can return -- see this StackOverflow thread for more info.

Best wishes,
Alex Gyoshev
the Telerik team

[Robert]

Hi Alex,

This was very helpful. I have a slightly different scenario in that after the form is submitted, I need to refresh a "Detail" grid in a Master/Detail setup. I was going to use Ajax.BeginForm until I came across your advice here and was planning on using this function:

function onSuccess(e) {
    var grid = $("#Components_" + e).data("tGrid");

    grid.ajaxRequest();
};

How would I refresh a a specific detail grid if I am using the attach/serialize method?

Thanks