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

The right combination of MobileApplication and MVC forms

2 Answers 81 Views

Application

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

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

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>)

)

Accepted