This is a migrated thread and some comments may be shown as answers.

The right combination of MobileApplication and MVC forms

2 Answers 62 Views
Application
This is a migrated thread and some comments may be shown as answers.
Bil
Top achievements
Rank 1
Bil asked on 05 Mar 2015, 03:58 PM
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 Answers, 1 is accepted

Sort by
0
Bil
Top achievements
Rank 1
answered on 05 Mar 2015, 06:54 PM
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>)
)
0
Accepted
Kiril Nikolov
Telerik team
answered on 09 Mar 2015, 03:06 PM

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.

 
Tags
Application
Asked by
Bil
Top achievements
Rank 1
Answers by
Bil
Top achievements
Rank 1
Kiril Nikolov
Telerik team
Share this question
or