Till now we have not created any screen for data entry. In this tutorial we will create a simple data entry, flourish a simple model and display the model on a simple ASP.NET view.
How to create a simple ASP.NET MVC data entry screen? (Tutorial No: 4)
Contents
Introduction
Goal: - Creating simple MVC data entry screen
Video demonstration which shows how to create a simple data entry screen
Step1:- Creating your data entry ASPX page
Step2:- Creating the controller
Step3:- Create the view to display the customer object
Step 4:- Finally run the project
So what’s in the next tutorial?
In our past ASP.NET MVC tutorial we started with a simple hello world application. In case you have missed it you can see the same by clicking on ASP.NET MVC .
We then gradually moved ahead to learn how we can pass data between controllers and views using view data. If you want to see the same you can read from ASP.NET MVC using Viewdata .
In the third tutorial we saw how to create a simple model using ASP.NET MVC template. You can read about the same from ASP.NET MVC model .
Till now we have not created any screen for data entry. In this tutorial we will create a simple data entry, flourish a simple model and display the model on a simple ASP.NET view.
My half life has been spent on writing interview questions for Microsoft technology and I hope I keep writing them. You can see my video tutorial for the same by clicking on .NET and ASP.NET Interview questions
Every project small or big has data entry screens. In this lab we will create a simple customer data entry screen as shown in the below figure.
As soon as the end user enters detail and submits data it redirects to a screen as shown below. If he enters amount less than 100 it displays normal customer or else it displays privileged customer.
Below is a simple video demonstration for this lab which creates a simple customer screen for entering data using MVC template.
The first step is create the data entry page using the simple HTML form action tag as shown in the below code snippet. The most important point to note in the below code snippet is that the action is pointing to the controller action i.e ‘DisplayCustomer’.
<form action="DisplayCustomer" method="post">
Enter customer id :- <input type="text" name="Id" /> <br />
Enter customer code :- <input type="text" name="CustomerCode" /><br />
Enter customer Amount :-<input type="text" name="Amount" /><br />
<input type="submit" value="Submit customer data" />
</form>
The above defined form action will post to the controller class and on the function “DisplayCustomer”. So we need to get the data from the HTML controls, flourish the object and send the object to the view.
Below is the code snippet of displaycustomer which flourished the customer object by collecting data from request.form and sends the object to the view ‘displaycustomer.
public class CustomerController : Controller
{
…..
….
[HttpPost]
public ViewResult DisplayCustomer()
{
Customer objCustomer = new Customer();
objCustomer.Id = Convert.ToInt16(Request.Form["Id"].ToString());
objCustomer.CustomerCode = Request.Form["Id"].ToString();
objCustomer.Amount = Convert.ToDouble(Request.Form["Amount"].ToString()); ;
return View("DisplayCustomer", objCustomer);
}
}
The next step is to create the “DisplayCustomer” view.So right click on the view folder and click add view. You should see a drop down as shown in the below figure. Give a view name, check create a strongly typed view and bind this view to the customer class using the dropdown as shown in the below figure.
The advantage of creating a strong typed view is you can now get the properties of class in the view by typing the model and “.” as shown in the below figure.
Below is the view code which displays the customer property value. We have also put an if condition which displays the customer as privileged customer if above 100 and normal customer if below 100.
<body>
<div>
The customer id is <%= Model.Id %> <br />
The customer Code is <%= Model.CustomerCode %> <br />
<% if (Model.Amount > 100) {%>
This is a priveleged customer
<% } else{ %>
This is a normal customer
<%} %>
</div>
</body>
Final step is to run the project and see the output.
As soon as the end user enters detail and submits data it redirects to a screen as shown below. If he enters amount less than 100 it displays normal customer or else it displays privileged customer.
In this tutorial we created a simple data entry screen which helped us flourish the customer object. This customer object was passed to the view for display.
If you closely watch in this tutorial we have done lot of coding i.e. creating the HTML form screens , flourishing the object etc. It would be great if there was some kind of automation. In the next tutorial we see how HTML helper classes help to minimize many of these codes.
Click here for the Part 5 of the ASP.NET MVC article.
Click here for the Part 6 of the
ASP.NET MVC article.
Click here for the Part 7 of the
ASP.NET MVC article.
Click here for the Part 8 of the
ASP.NET MVC article.
Click here for the Part 9 of the
ASP.NET MVC article.