ASP.NET MVC Contact Us Data-Entry Application

Beginner

2019-04-10

ASP.NET MVC Contact Us Data-Entry

In this tutorial we will create a simple contact us project that has a form as it’s view and will submit the content to be saved and viewed by site admins.

If you were not following along with the previous tutorials. it’s recommended to have a look on ASP.NET MVC Views – ASP.NET MVC Tutorials

Adding a Model Class

The MVC convention is that the classes that make up a model are placed inside the Models folder, which Visual Studio created as part of the initial project setup. Right-click Models in the Solution Explorer window and select Add followed New Item then.

Select visual C# then a class file.

asp.net-mvc-new-model

Set the file name to ContactMessage.cs and click the Add button to create the class.

asp.net-mvc-new-model-class

modify the ContactMessage class to be like :


We created the ContactMessage model which represents the model instance for each message a user will submit, it contains : Name of the user , his email and the message he is sending to us.

In order to be able to view the contact page let’s add a link to the action method of contact page

modify the index.cshtml view file we created ASP.NET MVC Views – ASP.NET MVC Tutorials


the @Html.ActionLink() generates html text typed “this link” and linking to action method “ContactUs” in Controller “Home”

modify the HomeController.cs controller file we created in the last project


we added the ContactUs() action method with an ActionResult as a return value and we are returning it’s default view.

before we run the project lets create a new view for the ContactUs action

Right click on any location inside the ContactUs method then Add View

set the name to ContactUs – set Template to create

for the Model class select ContactMessage model we have just created

asp.net-mvc-view-create-model

ContactUs.cshtml file will be created inside Home folder


For each property of the ContactMessage model class, we use an HTML helper method to render a suitable HTMLinput control. These methods let you select the property that the input element relates to using a lambda expression, like this:


this creates input with type “text” and class attribute of “form-control” for the model attribute called “Name”


asp.net-mvc-create-form

Another convenient helper method is Html.BeginForm, which generates an HTML form element configured to post back to the action method. Because I have not passed any arguments to the helper method, it assumes I want to post back to the same URL that the HTML document was requested from.

this generate form html code as below


the action attribute is where the form is posted and the http method is post.

Let’s add a ContactUs action that will respond to the http post request sent from the form we just created.

modify the HomeController.cs file to be like this :


We used something called C# attributes . [HttpGet] is an attribute that tells the action to respond only to HTTP Get requests

[HttpPost] is an attribute that tells the action to respond only to HTTP POST requests.

and as our form is sending its data using a POST request

we added a new action that receives a ContactMessage model . It then parses the name to a view called “Thanks” and renders it.

Note in this example we passed a view name to the View() method as we don’t want to render the default view. instead, we want to render a specific view.

Let’s create the “Thanks” View. Right click on Home folder inside Views folder, choose Add then click View.

Set the View name to “Thanks” and leave each other setting to it’s default. a new Thanks.cshtml file will be created.

modify the code to be like :


Now for the last step : Run the project and click on the contact us link. you will be redirected to contact us page. fill in the form and click “create”.  you will get the “Thanks” view result

asp.net-mvc-contact-us