ASP.NET MVC Form With File Upload

Implementation Summary

1. Create a “tblMembers” table in your Database.
2. Create a new ASP.NET MVC web application project called “ClubMember”.
3. Create a Model called “MemberModel”.
4. Create HTTPGET ActionMethod called “ContactForm”.
5. Create a view of “ContactForm”.
6. Use HTML File Upload control.
7. Create HTTPPOST ActionMethod called “ContactForm” to insert record in table and save file in Server.
8. Add Linq To Sql class “ClubMember”.
9. Insert a record into a database table.

Step by step Implementation

In the above form, you can see there are four objects.

1. Name Textbox
2. Phone Number Textbox
3. Image File Upload
4. Submit Button

Create a “tblMembers” table in the database.

Create a new ASP.NET MVC project called “ClubMember”.

Click on “Change Authentication”.

But we are looking for the following output.

Click on “Change Authentication” button and select No Authentication.

We have created a project called “ClubMember“. Now, we are going to add “MemberModel”.

Right-click on “MODELS” folder or press CTRL+SHIFT+A to add new Model (CLASS).

Give Model Name: “MemberModel”.

Code of MemberModel.cs

Now, build your project by right-clicking on the project and selecting BUILD.

Now, switch to HOME Controller. Click on Controllers folder and double click on HOMECONTROLLER.CS file.

Create an action-method called CONTACTFORM.

By default, the Add View dialog box will display as below.

Fill the "ADD VIEW" dialog box with the following values.

As you click on ADD button in VIEWS-->HOME folder CONTACTFORM.CSHTML file will be created.

Switch to CONTACTFORM.CSHTML file and press F5. The output screen is given below.

Now, let us modify the CSHTML code.

Switch to CONTACTFORM.CSHTML file, do the following changes and press F5.

Remove following code of ImagePath

Add the following lines of code.

The above code line is the HTML control for file uploading.

As we have changed and usedthe HTML File-Upload control named ”ImageFile”, so now, let us change the model again to change the titles of fields like this:

• Name = Member Name
• PhoneNumber = Telephone / Mobile Number
• ImagePath = Upload File

Code of MemberModel.cs

Note
DisplayName attribute comes after using the following namespaces.

Now, again, switch to CONTACTFORM.CSHTML file, do the following changes and press F5.

Now, let us switch again to ContactForm.cshtml to change the following.

Line No. 10

@using (Html.BeginForm())

Change this to:

Now, let us switch back to the controller to work on it.