Ajax Form inside a Template

[Aaron]

Hello,

I have a template that am using to show a popup for Grid view. The popup is used to show a list of values that are related to that specific records. In the template I need to be able to post data back to server and close the form without refreshing the whole page.

In the code below if I using Html.BeginForm in the template everything works fine, however the whole page gets a refresh when I click the Save button in the template. So I tried to change it to Ajax.BeginForm in hopes of haveing a partial postback and not refresh the whole page when form is submitted. The second approach result an error in the Java script indicating Invalid Template. I appreciate if you provide some insight.

//Error in Javascript here
var detailsTemplate = kendo.template($("#template").html());

 Here is the Template code:

<script type="text/x-kendo-template" id="template">
@using (Ajax.BeginForm("ModifyRoleForUser", "Account", new { name = "rolesForm" }, new AjaxOptions() { UpdateTargetId = "template", HttpMethod = "POST" }))
{    
    <div id="details-container">
        <input type="hidden" name="UserName" value="#=UserName#" />
        <h3>#= FirstName # #= LastName #</h3>
        <em>Status: #= UserStatusName #</em>
     @(Html.Kendo().MultiSelect()
     .Name("msRoles")
     .Placeholder("Select Role...")
     .Events(e => e.DataBound("onRolesMultiSelectDataBound"))
     .BindTo(ViewBag.RolesList)
     .ToClientTemplate()
     )
    </div>
    <p>
        <input type="submit" value="Save" />
    </p>
}
</script>

[Daniel]

Hello,

The Ajax.BeignForm helper will render an unescaped "#" character for the UpdateTargetId which will break the template parsing. You could add the form HTML instead of using the helper and escape the character in order to avoid the problem:

<script type="text/x-kendo-template" id="template">
<form action="@Url.Action("ModifyRoleForUser", "Account", new { name = "rolesForm" })" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="\#template" id="form0" method="post">
    <div id="details-container">
        <input type="hidden" name="UserName" value="#=UserName#" />
        <h3>#= FirstName # #= LastName #</h3>
        <em>Status: #= UserStatusName #</em>
        @(Html.Kendo().MultiSelect()
         .Name("msRoles")
         .Placeholder("Select Role...")
         .Events(e => e.DataBound("onRolesMultiSelectDataBound"))
         .BindTo(ViewBag.RolesList)
         .ToClientTemplate()
        )
    </div>
    <p>
        <input type="submit" value="Save" />
    </p>
</form>
</script>

Regards,
Daniel
Telerik