Notice: A non well formed numeric value encountered in /home/bbeveragetrails/public_html/blog/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118
Notice: A non well formed numeric value encountered in /home/bbeveragetrails/public_html/blog/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119
Notice: A non well formed numeric value encountered in /home/bbeveragetrails/public_html/blog/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118
Notice: A non well formed numeric value encountered in /home/bbeveragetrails/public_html/blog/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119
Notice: A non well formed numeric value encountered in /home/bbeveragetrails/public_html/blog/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118
Notice: A non well formed numeric value encountered in /home/bbeveragetrails/public_html/blog/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119
Creation of a strongly typed view
Now that we have a model for our application we will need to create the form that will use a strongly typed view of the Automobile.cs class. The first thing we want to do is create a second action in our home controller so let’s add the following code to our HomeController.cs
|
1 2 3 4 |
public ViewResult AddAutoForm() { return View(); } |
This method calls a view method without an argument, which tells MVC to render the default view associated with the action method, which is a view with the same name as the action method, in this case, AddAutoForm.cshtml so we will need to create this view so let’s create our form to add automobiles in this view. It will be a strongly typed view since it will use the Automobiles model. Create a new view named AddAutoForm.cshtml in the view/Home folder of the project by right clicking on Home
Now name the view AddAutoForm and place this code in the form
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
@model AutoApp.Models.Automobile @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Add Auto Form</title> </head> <body> <form asp-action="AddAutoForm" method="post"> <p> <label asp-for="Year">Year:</label> <input asp-for="Year" /> </p> <p> <label asp-for="Make">Make:</label> <input asp-for="Make" /> </p> <p> <label asp-for="Model">Model:</label> <input asp-for="Model" /> </p> <p> <label>Stock:</label> <select asp-for="Stock"> <option value="">Choose and option</option> <option value="true">Yes, It's Bone Stock!</option> <option value="false">No, It will GO!</option> </select> </p> <p> <button type="submit"> Submit Automobile </button> </p> </form> </body> </html> |
The @model Razor expression which is used to create a strongly typed view. A strongly typed view is intended to render a specific model type, and if specify the type I want to work with (@model AutoApp.Models.Automobile in this case) MVC can create some really helpful shortcuts to make it easier. You will also notice the asp-for attributes on the label element sets the value of the for attribute. The asp-for attribute on the input element sets the id and name elements. The asp-action attribute on the form element uses the application’s URL routing configuration to set the action attribute to a URL that will target a specific action method.
We need to add an asp-action that will link to this form in our HWView.cshtml file. The asp-action attribute is an example of the tag helper attribute, which is an instruction for Razor that will be performed when the view is rendered. The asp-action attribute is an instruction to add an href attribute to the element that contains a URL for the action method. This simply tells Razor to insert a URL for an action method defined by the same controller for which the current view is being rendered. It is important to note that you should use the features provided by MVC to generate URLs rather than hard-code them into your views. When the tag helper created the href attribute for the element, it inspected the configuration of the application to be changed to support different URL forms without needing to update any views.
Add the following code to the HWCiew.cshtml file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> </head> <body> <div> <p>Let's keep track of the Automobiles!</p> <a asp-action="AddAutoForm">Add A new Auto!</a> </div> </body> </html> |
This will now link to the new form view!
As this application is now it will not save the form data so if you enter data it just disappears. The next post I will be adding a class to keep the data in memory. I know this is not really useful but it will work for our demonstration purposes.