How to create a simple ASP.NET MVC data entry screen? (Tutorial No: 4)

Questpond
Posted by in ASP.NET category on for Intermediate level | Points: 250 | Views : 194334 red flag
Rating: 5 out of 5  
 1 vote(s)

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?
           

Introduction

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



Goal: - Creating simple MVC data entry screen

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.


 

Video demonstration which shows how to create a simple data entry screen

Below is a simple video demonstration for this lab which creates a simple customer screen for entering data using MVC template.

Step1:- Creating your data entry ASPX page

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>


Step2:- Creating the controller

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);
}
}


Step3:- Create the view to display the customer object

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>


Step 4:- Finally run the project


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.

 

So what’s in the next tutorial?

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.


 

Page copy protected against web site content infringement by Copyscape

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)