Ajax Form inside a Template

2 posts, 1 answers
  1. Aaron
    Aaron avatar
    14 posts
    Member since:
    Jan 2012

    Posted 16 Jul 2013 Link to this post

    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>
  2. Answer
    Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 18 Jul 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
Back to Top