Ajax forms in PanelBar item content

2 posts, 0 answers
  1. Zach
    Zach avatar
    1 posts
    Member since:
    Aug 2013

    Posted 22 Aug 2013 Link to this post

    Hi,

    I'm noticing a weird issue when I try to use "@using (Ajax.BeginForm(...)) { }" within Items' Contents. All of the form elements that end up inside of each PanelBar item are all being rendered outside of the PanelBar (placed right before the rendered PanelBar's ul element). For example, this code:

    @(Html.Kendo().PanelBar()
        .Name("accordion")
        .Items(bar =>
            {
                bar.Add().Text("One")
                    .Content(@<div>
                               @using (Ajax.BeginForm("OneSuccess", "Custom", new AjaxOptions {UpdateTargetId = "resultOne"}))
                                {
                                    @Html.DemoPartial("Partial")
                                    <div id="resultOne"></div>
                                }
                            </div>);
                bar.Add().Text("Two")
                    .Content(@<div>
                               @using (Ajax.BeginForm("TwoSuccess", "Custom", new AjaxOptions {UpdateTargetId = "resultTwo"}))
                                {
                                    @Html.DemoPartial("Partial")
                                    <div id="resultOne"></div>
                                }
                            </div>);
                bar.Add().Text("Three")
                    .Content(@<div>
                               @using (Ajax.BeginForm("OneSuccess", "Custom", new AjaxOptions {UpdateTargetId = "resultThree"}))
                                {
                                    @Html.DemoPartial("Partial")
                                    <div id="resultThree"></div>
                                }
                            </div>);
             }))
    Results in:
    <form ...></form>
    <form ...></form>
    <form ...></form>
    <ul class="k-widget k-panelbar k-reset k-header" id="accordion" data-role="panelbar" tabindex="0" role="menu">
    ... No forms in here ...
    </ul>

    Is there something incorrect about how I'm setting up the PanelBar or is there a workaround I can use to get the functionality I need?

    Thanks,
    Zach







  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 26 Aug 2013 Link to this post

    Hello Zach,

    It is because of the order the Razor @() operator outputs the markup. To make it work change the PanelBar rendering from:

    @(Html.Kendo().PanelBar()
     ....
    )
    to
    @{Html.Kendo().PanelBar()
     
     
    .Render();}


    Regards,
    Petur Subev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top