7-day experience ASP. net mvc-2nd days, asp. netmvc
0. Preface
I believe that you have successfully completed the course for the first 2nd days.
Let's take a look back at the main points of interest in the 1st day:
Note: If you have not completed the course for the last 1st days, you are advised to finish it first. Our goal is to create a small MVC project with best practices and the latest technical methods on the last day. During Lab training every day, we will add some practical functions than the previous day, which looks more perfect than the previous program.
1. The Controller transmits data to the View.
In Lab 2, View creation is static. However, in real scenarios, View usually displays some dynamic data. In the next Lab, we will show how the View dynamically displays data.
View obtains the data displayed in Model format from the Controller.
Model
In ASP. net mvc, Model displays business data.
Lab 3-use ViewData
ViewData is a dictionary that stores the data transmitted by the Controller to the View. The Controller adds an entry to the ViewData dictionary and then reads the View from the dictionary. Now let's start a Demo.
Step 1: create a Model class
Create a new class in the Model folder and name it "Employee.
public class Employee{ public string FirstName { get; set; } public string LastName { get; set; } public int Salary { get; set; }}
Step 2: Obtain the Model from the Controller
Create an Employee object in the GetView method.
Employee emp = new Employee();emp.FirstName = "Sukesh";emp.LastName="Marla";emp.Salary = 20000;
Note: Make sure you use the Using statement in the class to introduce the Model. Otherwise, you must use the full name of the Employee class when writing the program.
using WebApplication1.Models;
Step 3: Create ViewData and return to View
Store the Employee object in ViewData.
ViewData["Employee"] = emp;return View("MyView");
Step 4: display the Employee data in the View
Open the MyView. cshtml file. Retrieve and display the Employee data from ViewData.
<div> @{ WebApplication1.Models.Employee emp = (WebApplication1.Models.Employee)ViewData["Employee"]; } <b>Employee Details </b><br/> Employee Name : @emp.FirstName@emp.LastName <br/> Employee Salary: @emp.Salary.ToString("C")</div>
Step 5: test the output
Press F5 to test the application.
Q & A of Lab 3
What is the difference between using braces "{" and "}" when writing Razor code and not using curly brackets?
In lab 3, @ emp. FirstName can be replaced with the following code.
@{ Response.Write(emp.FirstName);}
If no curly brackets are used after @, it is only used to display the values of variables or expressions.
Why is forced conversion required?
ViewData contains some objects. Each time a new value is added, it is converted to the Object type.
Therefore, you need to forcibly convert each time to obtain the object value.
What does "@ emp. FirstName @ emp. LastName" mean?
This means that LastName is displayed after FirstName and separated by spaces.
If you only want to use one @ keyword, can you achieve the result just now?
The answer is yes. Use the syntax @ (emp. FirstName + "+ emp. LastName ).
Why do we need to hard encode the Employee class in the Controller class?
This is only for demo demonstration. In fact, we will obtain data in databases, WCF, Web services, or other places.
What are database logic, data access layer, and business layer?
The data access layer is not displayed in ASP. net mvc. In fact, it always exists, but it is never included in the MVC definition.
As previously explained, the business layer is part of the Model.
Complete MVC structure.
Lab 4-use ViewBag
ViewBag is like the syntax honey of ViewData. ViewBag uses the dynamic features of C #4.0 to make ViewData dynamic.
ViewBag uses ViewData internally.
Step 1: Create View Bag
Proceed to Lab 3 and replace step 3 in Lab 3 with the following code snippet:
ViewBag.Employee = emp;
Step 2: Display EmployeeData in View
Replace Step 4 in Lab3 with the following code snippet:
@{ WebApplication1.Models.Employee emp = (WebApplication1.Models.Employee)ViewBag.Employee;}Employee DetailsEmployee Name: @emp.FirstName @emp.LastName Employee Salary: @emp.Salary.ToString("C")
Step 3: Test and Output
Press F5 and test the application.
Q & A of Lab 4
Can we transmit ViewData and obtain it in the form of ViewBag?
The answer is yes. This is also possible. As I mentioned earlier, ViewBag is only the syntactic honey of ViewData.
ViewData and ViewBag Problems
ViewData and ViewBag are good methods for data transmission between the Controller and View. However, in actual project applications, none of them is the best practice. Now let's discuss the disadvantages of using ViewData and ViewBag.
Performance problems
The data type in ViewData is Object. Therefore, we need to perform correct type conversion before use. This operation puts extra burden on performance.
No type security or compilation errors.
If we try to convert the type to the wrong type, or we use the wrong Key value when retrieving the object value, we will encounter an error at runtime. But for a good programming practice, errors should be captured during compilation.
There is no correct connection between data transmission and data reception
As a developer, I personally think this is a major problem.
In MVC, the connection between the Controller and View is weak and loose.
The Controller does not care about what happened in the View. Similarly, the View does not care about what happened in the Controller.
From the Controller, we can transmit one or more ViewData or ViewBag values. Now, when a developer wants to write a View, he needs to remember what the Controller will transmit. If a Controller developer and View developer are not the same person, the situation will become more difficult. Because it is completely irrelevant, this will lead to inefficiency in the development process and may also cause running errors.
Lab 5-understand strong-type Views
The three questions about ViewData and ViewBag mentioned above can be attributed to the data type. The data type stored in ViewData is "Object 」.
If, in some way, we can set the data type for the data transmitted in the Controller and View, the problem will be solved, and this method is a strong type of Views.
Now let's make a Demo. This time, we will upgrade the View requirement to the next level. If the salary is higher than 15000, it will be yellow; otherwise, it will be green.
Step 1: create a strong View
Add the following code to the top of the View:
@model WebApplication1.Models.Employee
Based on this statement, our View becomes a strongly typed View with the type of Employee.
Step 2: Display Data
Now, in the View, only @ Model and Dot (.) operations can be used to intelligently obtain all the data values of the Model, that is, Empolyee.
Write the following code to display the data:
Employee DetailsEmployee Name : @Model.FirstName @Model.LastName @if(Model.Salary>15000){ <span > Employee Salary: @Model.Salary.ToString("C") </span>}else{ <span > Employee Salary: @Model.Salary.ToString("C") </span>}
Step 3: transmit Model data from the Controller's Action Method
Change the Action Method to the following code snippet:
Employee emp = new Employee();emp.FirstName = "Sukesh";emp.LastName="Marla";emp.Salary = 20000; return View("MyView",emp);
Step 4: Test and Output
Q & A of Lab 5
Do I need to use the full name of the class for each type declaration in the View, that is, Namespace. ClassName?
The answer is no. We can use the "using" statement.
@using WebApplication1.Models@model Employee
Must we always use a strong-type view, or can we occasionally use ViewData or ViewBag?
If you want to use the best method, you 'd better use the strong type view.
Can we use multiple Model types for views of strong-type views?
The answer is no. In actual projects, when we want to display multiple models in a view, we often end with this. The solution to this requirement will be discussed in the next section.
2. Understand the View Model in ASP. NET MVC
In Lab 5, we have violated the MVC principles. According to MVC, V represents a pure UI. It should not contain any logic. We have violated the MVC structure rules through the following three points:
First Name and Last Name are appended, and they are used to display the full Name. This is a logical operation.
Salary is displayed in currency form. This is a logical operation.
Shows the different colors of different salaries. These simple operations based on different values change the appearance of HTML elements. This is a logical operation.
In addition to the above three points, there is another question worth discussing.
In this case, we want to display different types of data in the View. For example, the user name and employee data of the current logon are displayed.
We can use the following two methods to solve this problem:
ViewModel Solution
ViewModel is a layer not declared in ASP. net mvc applications. It is applicable between Model and View and serves as a data container for View.
What is the difference between Model and ViewModel?
Model refers to business data. It is created based on the business and data structure. ViewModel refers to View data. It is created based on The View.
How does ViewModel work?
The working principle is very simple.
The Controller processes the interaction logic of users, or, simply put, processes user requests.
The Controller obtains one or more Model data.
The Controller will decide which View to respond to the request correctly.
The Controller creates and initializes the ViewModel object from the received Model data according to the view requirements.
The Controller transmits the ViewModel data to the View in ViewData/ViewBag/strong View mode.
The Controller returns the View.
How will View and ViewModel be associated?
View is a View with a ViewModel as a strong type.
How will Model and ViewModel be associated?
Model and ViewModel should be independent of each other. The Controller creates and initializes a ViewModel object based on one or more Model objects.
Let's make a small Lab to better understand it.
3. Lab 6-View Model implementation
Step 1: Create a folder
Name a folder in the project and name it ViewModels.
Step 2: Create the EmployeeViewModel
To do this, let's clarify all the requirements of the View.
Create an EmployeeViewModel class in the ViewModels folder, as shown below:
public class EmployeeViewModel{ public string EmployeeName { get; set; } public string Salary { get; set; } public string SalaryColor { get; set; } public string UserName{get;set;}}
In this ViewModel class, FirstName and LastName are replaced by an attribute, namely, EmployeeName. The data type of Salary is String. In addition, two attributes are added, namely SalaryColor and UserName.
Step 3: Use ViewModel in View
In Lab 5, we set the strong View type to Employee. Now, set the strong type to EmployeeViewModel.
@using WebApplication1.ViewModels@model EmployeeViewModel
Step 4: display data in the View.
Use the following code snippet to replace the content in the View:
Hello @Model.UserName
Step 5: Create and transmit ViewModel
In the GetView action method, obtain the Model data and convert it to a ViewModel object, as shown below:
public ActionResult GetView(){ Employee emp = new Employee(); emp.FirstName = "Sukesh"; emp.LastName="Marla"; emp.Salary = 20000; EmployeeViewModel vmEmp = new EmployeeViewModel(); vmEmp.EmployeeName = emp.FirstName + " " + emp.LastName; vmEmp.Salary = emp.Salary.ToString("C"); if(emp.Salary>15000) { vmEmp.SalaryColor="yellow"; } else { vmEmp.SalaryColor = "green"; } vmEmp.UserName = "Admin" return View("MyView", vmEmp);}
Step 6: Test and Output
Press F5 and test the output.
The output result is the same as that of Lab 5, but this View does not contain any logic.
Q & A of Lab 6 Does this mean that every Model has a ViewModel?
The answer is no. In fact, every View has a ViewModel.
Is it a good practice to associate Model with ViewModel?
The answer is no. As a best practice, Model and ViewModel should be independent of each other, rather than associated.
Do we always need to create ViewModel? What if the View does not contain any display logic and the View only displays the data of the Model?
We should always create ViewModel. Each View should have its own ViewModel, even if the attributes of the ViewModel are identical with those of the Model.
Assume that a View does not contain the presentation logic and uses Model data instead of ViewModel.
The problem is that if we need to add new data to the UI or display logic in the future, we need to re-plan a UI.
Therefore, it is best to create a ViewModel at the beginning to prevent the increase in demand. In this case, the initial phase of ViewModel is almost the same as that of Model.
4. Use Collection in Lab 7-View In this Lab section, we will display the Employees list in the View.
Step 1: Change the EmployeeViewModel class
Remove the UserName attribute from the EmployeeViewModel class.
public class EmployeeViewModel{ public string EmployeeName { get; set; } public string Salary { get; set; } public string SalaryColor { get; set; }}
Step 2: Create a set
Create a class in the ViewModel folder named EmployeeListViewModel.
public class EmployeeListViewModel{ public List<EmployeeViewModel> Employees { get; set; } public string UserName { get; set; }}
Step 3: Change the strong View type
Replace the strong type of MyView. cshtml with EmployeeListViewModel.
@using WebApplication1.ViewModels@model EmployeeListViewModel
Step 4: display all employee information in the View.
<body> Hello @Model.UserName
Step 5: create a Business Layer for the Employee
In this Lab, we will upgrade our project to a new level. We will add a Business Layer to the project. Create a new folder in the project, name it BusinessLayer, and create a new class named EmployeeBusinessLayer. This class contains a method named GetEmployees.
public class EmployeeBusinessLayer{ public List<Employee> GetEmployees() { List<Employee> employees = new List<Employee>(); Employee emp = new Employee(); emp.FirstName = "johnson"; emp.LastName = " fernandes"; emp.Salary = 14000; employees.Add(emp); emp = new Employee(); emp.FirstName = "michael"; emp.LastName = "jackson"; emp.Salary = 16000; employees.Add(emp); emp = new Employee(); emp.FirstName = "robert"; emp.LastName = " pattinson"; emp.Salary = 20000; employees.Add(emp); return employees; }}
Step 6: transfer data from the Controller
public ActionResult GetView(){ EmployeeListViewModel employeeListViewModel = new EmployeeListViewModel(); EmployeeBusinessLayer empBal = new EmployeeBusinessLayer(); List<employee> employees = empBal.GetEmployees(); List<EmployeeViewModel> empViewModels = new List<EmployeeViewModel>(); foreach (Employee emp in employees) { EmployeeViewModel empViewModel = new EmployeeViewModel(); empViewModel.EmployeeName = emp.FirstName + " " + emp.LastName; empViewModel.Salary = emp.Salary.ToString("C"); if (emp.Salary > 15000) { empViewModel.SalaryColor = "yellow"; } else { empViewModel.SalaryColor = "green"; } empViewModels.Add(empViewModel); } employeeListViewModel.Employees = empViewModels; employeeListViewModel.UserName = "Admin"; return View("MyView", employeeListViewModel);}
Step 7: Execute and test the output
Press F5 to run the application.
Q & A of Lab 7 Can we set the mandatory view type to List?
The answer is yes. We can.
Why do we need to create a separate class, namely, EmployeeListViewModel? Why do we not use a View with a strong type of List <EmployeeListViewModel>?
If we use the List directly instead of the EmployeeListViewModel class, two problems will occur.
Why should we remove the UserName attribute from the EmployeeViewModel and use it as part of the EmployeeListViewModel?
UserName is the same for all employees. If you keep the attributes of UserName in the EmployeeViewModel, redundant code is added and extra memory space for data transmission is added.
5. Conclusion We have completed 2nd days of MVC learning. In 3rd days, we will bring the project into the next stage.
Let me enjoy it together!
Original article address: Learn MVC Project in 7 days
7-day fun ASP. net mvc-1st-day
This article is compiled by OneAPM engineers. OneAPM is a leading enterprise in the field of basic software in China. It helps enterprise users and developers easily achieve slow real-time crawling of program code and SQL statements. For more technical articles, visit the official OneAPM blog.