MVC4 Mobile Classic
Mobile UI Form Elements

When you complete the Using the MVC 4 Mobile scaffolding  topic, you create a form that uses standard jQuery Mobile Form Elements. These Form Elements allow you to create a rich, touch-friendly form.

The main form for the MVC Mobile Application is contained in the Create.cshtml file. This is the form that you see when you tap the create button. If you open this file in Visual Studio, you'll see the following Razor syntax:

@using (Html.BeginForm())

The sample above automatically creates an opening <form> tag, and processes the request by an action method when a user submits the form. The rest of the form is contained within <ul> tags.

Each list item is given the data-role "fieldcontain." Fieldcontain groups all the elements of the form element;  the label, the editor, and the validation message.  Grouping like this improves the styling of labels and form elements on wider screens. It also works as a field separator and visually aligns the label and form element. You can see this in the following image of the MVC4 Web Mobile application you created in the Using the MVC 4 Mobile scaffolding topic:

Note that this application was themed with data-theme="d".  You can find more information on theming your application in the Theming the Application topic.

By looking at the TahDoList.cs Model, you can see what types of form elements the MVC 4 Mobile scaffolding uses.

See Also

 

 


Copyright (c) GrapeCity, inc. All rights reserved.

Product Support Forum |  Documentation Feedback