In this video we`ll cover all the basics of using the ASP.NET MVC Data Editors extensions.
I have an MVC project here with a HomeController, data model, and an empty Index view. Let`s
run this and see what it looks like in the browser. As you can see the content area is
empty. So Let`s return to Visual Studio. Let's add a DevExpress MVC extension in our view.
In the View file, I right click on the position where I want the DevExpress MVC extension
to be defined. Next, in the context menu I select the "Insert DevExpress MVC Extension"
item and The "Insert Extension Wizard" appears. Here lets select the TrackBar extension. I
leave the default extension name and minimum value; set the maximum value to 100 and select
the vertical orientation... but I wont bind it to a data model. In additional settings
I define the scale position and allow range selection. Finally, I click insert. You can
see that the Wizard inserted all the required code for me. Let's take a look at the TrackBar
editor settings. Visual Studio IntelliSense helps us here. I can define the extension
name, its width or height, and the editor-specific settings, that are accessible via the Properties
property. Let`s also define the TrackBar height here. I set it to 400 pixels. Let`s take a
look at the result in browser. Here you can see the fully functional TrackBar extension
that allows you to select ranges of values. Let`s close the browser and return to visual
studio. And delete the TrackBar from the View. Next I`ll demonstrate features that are common
for all textbox-based Data Editors, such as the TextBox, ButtonEdit, SpinEdit, and more.
The first common feature is Null Text. Null text is the prompt text displayed within the
editor's input box when the editor is not focused and its value is null. I add the TextBox
with the empty NullText property. I can edit the inserted code manually. Lets set it to
the words: "Type here..." The second common feature is the Display Format String, that
is the pattern used to format the editor`s value for display purposes. I add the TextBox
extension and define its display format string and Set it to the character "c", which will
show it as a currency value. The third feature is the "Mask Editing". Masks are useful when
a string entered by an end-user into an editor should match a specific format. I add the
TextBox extension , define its mask and Set it to a mask for phone numbers. Let`s take
a look at the result. Here you can see three textboxes. The first one displays null text,
that disappears when the editor is in focus. The second textbox displays end-user input
in currency format. When the editor is in focus, the user input is displayed in the
initial format. The third textbox allows me to input phone numbers respective to the mask.
Even if I delete the editor text, the mask is still displayed. The DevExpress Data Editors
can be seamlessly integrated into the ASP.NET MVC infrastructure. Let's return to the project
and delete the "Index.cs-html" file. We will generate it later. In this project I have
a data model class, which describes a person. These class properties are decorated with
data annotation attributes. The HomeController contains a function that returns a list of
strings, and two Actions that handle GET and POST requests depending on their attributes.
The action that handles ‘POST requests’ checks whether the model instance that came
from the view is valid and returns the result, OkView, if it is. DevExpress MVC Data Editors
fully support two-way data binding. Let's define the default person name via the action.
I create a new Person () instance and define its name, for example, "Test Name"; then I
pass this value to the view as a model. OK, now Let's add a view. I right-click the action
code and select the "Add View..." item. In the "Add View" dialog I specify the View
name, specify that this View should be strongly typed, select the model class and the scaffold
template. All the required libraries are already referenced, so I uncheck the corresponding
option. Then I click "Add". The ASP.NET MVC Editors generated the edit form for me. Here
you can see, that the "Html.EditorFor" method is used and it displays data editors for model
data fields using the required editor template. All the custom editor template files are located
in the EditorTemplates subfolder in the ~\Views\Shared project folder. Each template file has the
same name as a corresponding data type. Here you can see the templates for editing boolean
values, DateTime values, etc. I created this project using the DevExpress Project Template
wizard. So, the wizard automatically created the data editor templates and I didn't need
to create them manually. Let`s take a look at the result in browser. Here you can see
that some of the field editors are rendered with editor templates, and some of them (Email
and Age fields) are rendered as standard input elements. Next, Let`s look at the project
data model. As you can see, the "Email" field has the "Email address" attribute and the
"Age" field is of Integer type, but here we have no editor templates to edit emails or
integers. Instead of creating these templates, let's make use of a helpful MVC feature called
strongly typed data editors. Let’s return to the View code, and within the "Age" field
I replace the "EditorFor()" method with the DevExpress SpinEditFor extension which allows
us to edit numeric values with ease. For the "Email" field we can use the DevExpress ‘TextBoxFor’
editor. As I mentioned previously, we have a list of strings that can be used within
the edit form. I'll pass this list using the dynamic ViewBag data dictionary property of
ASP.NET MVC. We'll pass it from the Controller to the View. We can use the DevExpress ComboBoxFor
data editor to empower end-users with the ability to select one of the predefined values.
The editor items are bound to the PositionList via the BindList() method. The native ‘submit
input’ is used to submit the form. We can use the DevExpress button to provide a consistent
appearance through the project. I specify the extension name and enable the "Use Submit
Behavior" option. Let's take a look at the result. Now, as you can see, end-users have
the ability to select a position, and pick the required date via the DateEdit extension...
You can see, that client-side validation notifies me that the email adress I've entered is not
valid. Let’s return and correct it. When the value is valid, the error message disappears.
The SpinEdit allows me to easily edit numeric values by typing the required value or by
clicking spin buttons. When I click the button, the "OkView" opens, and notifies me that the
submitted values are correct. The DevExpress MVC Editors have the ShowModelErrors property,
which allows (when enabled) error messages to be automatically displayed within invalid
editors when validation fails. Using a built-in error message placeholder instead of the standard
ValidationMessageFor allows you to flexibly control how errors should be displayed within
editors. Here I can specify, that a combobox should display error text with an image and
allow displaying model errors. Let's take a look at the result. When I try to submit
the form without filling the required fields, the error messages appear. Pay special attention
to the ComboBox error messsage: it shows the error text and an image. This allows us to
visualize validation errors more effectively. Thanks for watching and thank you for choosing
devexpress.