[Solved] Popup Form not submitting

[Steve]

I have a grid that opens a Telerik Window from a custom command column in a Telerik Grid. Everything works as it should and the windows control are loaded when the window opens. The only problem is I am unable to get the window to submit on the submit button click. I am new to all this MVC, JavaScript and JQuery stuff so I am sure it is something I am doing or not doing.  Can someone look at the razor view code and tell me what I am not doing correctly.

@(Html.Telerik().Grid<Purchase>()
    .Name("GridPurchases")
    .Columns(columns =>
    {
        columns.Bound(o => o.OrderNumber ).Format( Html.ActionLink( "{0}", "DetailsIncident", "SupportTrac", new { area = "Support", id = "{0}" }, null ).ToHtmlString() ).Encoded( false ).Width( 100 );
        columns.Bound(o => o.Description).Width(200);
        columns.Bound(o => o.OrderDate).Format("{0:MM/dd/yyyy}").Width(120);
        columns.Bound(o => o.SubscriptionExpiration ).Format( "{0:MM/dd/yyyy}" ).Width( 120 );
        columns.Command( commands => commands
                .Custom( "viewKeys" )
                .Text( "Key" )
                .DataRouteValues( route => route.Add( o => o.OrderID ).RouteKey( "orderID" ) )
                .Ajax( true )
                .Action( "ViewSoftwareKeys", "SupportTrac", new { area = "Support" } ) )
                .HtmlAttributes( new { style = "text-align: center" } )
                .Width( 150 );
    })
    .ClientEvents( events => events.OnComplete( "onComplete" ) )
    .DataBinding( dataBinding => dataBinding.Ajax().Select( "GetUserPurchases", "SupportTrac", new { area = "Support" } ) )
    .Pageable()
    .Sortable()
    .Scrollable()
    .Groupable()
    .Filterable()
)
@(Html.Telerik().Window()
    .Name("Keys")
    .Visible(false)
    .Title("Software Keys")
    .Modal(true)
    .Width(700)
    .Height(300)
    .Content(@<text>
                @using (Html.BeginForm("EmailSoftwareKey", "SupportTrac", new { area = "Support" }, FormMethod.Post, new { id = "email-key-form" })){
                    <div id="key-details">
                        <img />
                        <label for="version">Version:</label>
                        @Html.TextBox( "version" )
                        <label for="email">Registered E-mail:</label>
                        @Html.TextBox( "email" )
                        <label for="unlockkey">Unlock Key:</label>
                        @Html.TextBox( "unlockkey" )
                        <div class="form-actions">
                            <button type="submit" id="form-submit-button" class="t-button t-state-default" onclick="alert('Hello out there!')";>Email Unlock Key</button>
                        </div>
                    </div>
                }

                <script type="text/javascript">
                    $("#email-key-form").submit(function(e) {

                        alert('Handler for .submit() called.');

                        var data = $(this).serialize();

                        $.post(this.action, data, function(){

                            $("#email-key-form").closest(".t-window").data("tWindow").close();

                        });

                        e.preventDefault();

                    });
                </script>
            </text>
     )
 )

<script type="text/javascript">
    function onComplete(e) {
        if (e.name == "viewKeys") {
            var keysWindow = $("#Keys").data("tWindow");
            var keys = e.response.keys;
            $("#key-details")
                .find("img")
                .attr("src", "@Url.Content("~/Content/images/products/")" + keys[0].DefaultImageFile)
                .end()
            $("#version").val(keys[0].InstallFileVersion)
            $("#email").val(keys[0].RegisteredEmail)
            $("#unlockkey").val(keys[0].UnlockKey)
            keysWindow.center().open();
        }
    }
</script>

@section HeadContent {
    <style type="text/css">
        #email-key-form
        {
            padding: 0 1em 1em;
        }
        #key-details
        {
            padding: 10px;
            margin: 25px auto;
            width: 600px;
        }
        #key-details label
        {
            display: block;
            line-height: 25px;
            margin-top: 1em;
        }
        #key-details input
        {
            width: 370px;
        }
        #key-details img
        {
            float:left;
            margin: 0 10px 10px 0;
        }
        .form-actions
        {
            padding-top: 1em;
            overflow: hidden;
        }
        .form-actions button
        {
            float: right;
        }
        .example .t-group
        {
            border-width: 1px;
            border-style: solid;
            padding: 0 1em 1em;
        }
    </style>

I attached an onclick alert so I could tell if the button was clicking and it seems to work fine.
But the form is just not submitting. Any ideas would be much appreciated.

[Grant Drury-Green]

I'm facing a similar issue.
What I notice, is that in the rendered HTML, the form tag is being closed immedfiately after being opened, hence the submit button is being rendered outside of the form:

@(Html.Telerik().Window()
            .Name("Window")
            .Visible(false)
            .Modal(true)
            .Content(@<text>
@using (Html.BeginForm("RemoveTeamMember", "Members", new { id = Model.Id }, FormMethod.Post))
{
    <p>
        Are you sure you want to delete this member?</p>

    <button type="submit">
        Submit</button>

}
</text>)
)

renders as:

<form action="/Members/RemoveTeamMember/1" method="post">
</form>
<div class="t-widget t-window" id="Window" style="display: none">
    <div class="t-window-titlebar t-header">
         <span class="t-window-title">Window</span><div class="t-window-actions t-header">
            <a class="t-link" href=""><span class="t-icon t-close">Close</span></a></div>
    </div>
    <div class="t-window-content t-content" style="overflow: auto">
        <p>
            Are you sure you want to delete this member?</p>
        <button type="submit">
            Submit</button>
    </div>
</div>

[Steve]

Grant, you were absolutely correct about the form tag being closed as soon as it was created and all the code that should be inside that form tag is outside including the submit button explaining why the button is not submitting the form.  Maybe someone from Telerik will read this and tell us why the rendered HTML is rendering this way?

    <form action="/Support/SupportTrac/EmailSoftwareKey" id="email-key-form" method="post"></form>
    <div class="t-widget t-window" id="Keys" style="display:none">
        <div class="t-window-titlebar t-header"> <span class="t-window-title">Software Keys</span>
            <div class="t-window-actions t-header"><a class="t-link" href=""><span class="t-icon t-close">Close</span></a>
        </div>
    </div>
    <div class="t-window-content t-content" style="overflow:auto;width:700px;height:300px">
                    <div id="key-details">
                        <img />
                        <label for="version">Version:</label>
                        <input id="version" name="version" type="text" value="" />
                        <label for="email">Registered E-mail:</label>
                        <input id="email" name="email" type="text" value="" />
                        <label for="unlockkey">Unlock Key:</label>
                        <input id="unlockkey" name="unlockkey" type="text" value="" />
                        <div class="form-actions">
                            <button type="submit" id="form-submit-button" class="t-button t-state-default" onclick="alert('Hello out there!')";>Email Unlock Key</button>
                        </div>
                    </div>

                <script type="text/javascript">
                    $("#email-key-form").submit(function (e) {

                        alert('Handler for .submit() called.');

                        var data = $(this).serialize();

                        $.post(this.action, data, function () {

                            $("#email-key-form").closest(".t-window").data("tWindow").close();

                        });

                        e.preventDefault();

                    });
                </script>
    </div>
</div>

[Daniel]

Hello All,

You should use the Window's Render() method when it contains a form declared with using. For example:

@{Html.Telerik().Window()
        .Name("Window")
        .Content(@<text>
        @using (Html.BeginForm()
            {
                <input type="text" name="name"/>
                <input type="submit" name="name" value="Submit" />
            }
            </text>)
        .Render();
}

Otherwise the form will be written directly into the response.

Kind regards,
Daniel
the Telerik team

[USMAN]

Hi Friends,

I am having the Problem, the popup window didn't submit the form, i have followed the help on the top replies but I still have the problem..

My Code  is:

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <form id="form1" runat="server">

<h2>EmailSystem</h2>

<div id="EmailTemp">
    <br />

    <br />
    <br/></div>

<div align="center">

 <% Html.Telerik().Window()
           .Name("Window")
           .Title("Telerik Window for ASP.NET MVC")
           .Draggable(true)
           .Resizable(resizing => resizing
               .Enabled(true)
               .MinHeight(350)
               .MinWidth(300)
               .MaxHeight(350)
               .MaxWidth(500)
            )
           .Scrollable(false)
           .Modal(false)
           .Buttons(b => b.Maximize().Close())
           .Content(() =>
           {%>

            <% using (Html.BeginForm("SendEmail","User",FormMethod.Post)) { %>

    <fieldset>


                  <table class="style1">
        <tr>
            <td>
                From:</td>
            <td>
            <%=Html.TextBox("TextBox1") %>

            </td>
        </tr>
        <tr>
            <td>
                To:</td>
            <td>

            </td>
        </tr>
        <tr>
            <td>
                Subject:</td>
            <td>

            </td>
        </tr>
        <tr>
            <td>
                Body:</td>
            <td>

            </td>
        </tr>
        <tr>
            <td>
                 </td>
            <td>
             <button id="Submit" class="t-button t-button-icontext" type="submit"><span class="t-icon t-expand"></span>Send</button>


                <button id="Button1" class="t-button t-button-icontext" type="submit" onclick="location.href='<%: Url.Action("TelerikIndex", "User") %>'"><span class="t-icon t-expand"></span>Cancel</button>
            </td>
        </tr>

    </table>
          </fieldset>
<% } %>
           <%})
           .Width(300)
           .Height(350)
           .Render();
    %>
    </div>
    </form>
</asp:content>

Now can you please let me know,,, What is the bit I am missing here.

Thanks.

[Bill]

You also need to use the razor syntax with curly braces or the Render method will complain.  I dont think you can make it work with parenthesis.

You need to change this:
    @(Html.Telerik().Window()
     .
     .
     .
    )

to this

    @{Html.Telerik().Window() 
     .
     .
     .
    }