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.