The right combination of MobileApplication and MVC forms

3 posts, 1 answers
  1. Bil
    Bil avatar
    27 posts
    Member since:
    Aug 2012

    Posted 05 Mar 2015 Link to this post

    Hi guys,

    I have an MVC app built using the MobileApplication wrapper. Everything is working fine but I'm struggling with incorporating a form that submits to the controller. Everything I've found says the MobileApplication wrapper turns your site into a SPA which is great so no postbacks. That means all of the forms have to be created using Ajax.BeginForm rather than Html.BeginForm. I can't seem the find the right combination of setting ServerNavigation(true|false) and building a form that works in my MobileViews.

    In my View I have the form defined as Content but looking at the markup it never actually created the <form> tag. Here's an example of one of my form markup:

    @(Html.Kendo().MobileView()
        .Title("Site Verification")
        .Name("outage-details-view")
        .Content(@<text>
            @using (Ajax.BeginForm("OutageDetails", "Outage", new AjaxOptions
            {
                HttpMethod = "POST"
            }))
            {
                @Html.ValidationSummary(true);
                @Html.AntiForgeryToken()
                <div class="form-group">
                    @Html.LabelFor(model => model.MeterNumber)
                    @Html.TextBoxFor(model => model.MeterNumber, new { @type = "number", @class = "form-control", placeholder = "Meter Number" })
                </div>
                <div class="form-group">
                    <label>OR</label>
                </div>
                <div class="form-group">
                    @Html.LabelFor(model => model.SiteId)
                    @Html.TextBoxFor(model => model.SiteId, new { @class = "form-control", @type = "number", placeholder = "Site ID" })
                </div>
                <input type="submit" value="Next"/>
            }
        </text>)
    )

    The markup is displaying the form elements, but not the surrounding <form> tag so nothing is firing.

    Thanks
  2. Bil
    Bil avatar
    27 posts
    Member since:
    Aug 2012

    Posted 05 Mar 2015 in reply to Bil Link to this post

    Just a note that I had to use the hard coded <form> tags instead of using the HTML helper. For some reason the Ajax.BeginForm wouldn't render the tags but adding them manually works:

    @(Html.Kendo().MobileView()
        .Title("Site Verification")
        .Name("outage-details-view")
          .Content(@<text>
            <form action="@Url.Action("OutageDetails", "Outage")" data-ajax="true" id="form1" method="post">
                @Html.ValidationSummary(true);
                @Html.AntiForgeryToken()
                <div class="form-group">
                    <label>Enter the information for the location where you are experiencing the outage:</label>
                </div>
                <div class="form-group">
                    @Html.LabelFor(model => model.MeterNumber)
                    @Html.TextBoxFor(model => model.MeterNumber, new { @type = "number", @class = "form-control", placeholder = "Meter Number" })
                </div>
                <div class="form-group">
                    <label>OR</label>
                </div>
                <div class="form-group">
                    @Html.LabelFor(model => model.SiteId)
                    @Html.TextBoxFor(model => model.SiteId, new { @class = "form-control", @type = "number", placeholder = "Site ID" })
                </div>
                <input type="submit" value="Next" />
            </form>
        </text>)
    )
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Answer
    Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 09 Mar 2015 Link to this post

    Hello Bil,

    The HTML helper for form will not work inside the content, and this is expected. Is the issue resolved when you switched to HTML tags? As for using ServerNavigation (I would suggest you not using it if you want to keep the SPA), here is some documentation:

    http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/mobileapplication/overview

    Regards,
    Kiril Nikolov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top