Step by Step in File Upload Mvc

Implementation Summary

1. Create a "tblMembers" tabular array 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 tape into a database tabular array.

Step past step Implementation

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

1. Proper noun Textbox
2. Phone Number Textbox
3. Image File Upload
4. Submit Push

Create a "tblMembers" table in the database.

1. Use [MbkTest]
2. Go
4. Gear up  ANSI_NULLS ON
5. GO
7. Fix  QUOTED_IDENTIFIER ON
8. Become
10. SET  ANSI_PADDING ON
11. GO
13. CREATE Table  [dbo].[tblMembers](
14.     [MemberID] [int ] IDENTITY(1,1) Not Zippo ,
15.     [MemberName] [varchar ](50) Naught ,
16.     [PhoneNumber] [varchar ](50) NULL ,
17.     [ImagePath] [varchar ](500) Cypher ,
18. PRIMARY Key  Amassed
19. (
20.     [MemberID]ASC
21. )WITH  (PAD_INDEX = OFF , STATISTICS_NORECOMPUTE = OFF , IGNORE_DUP_KEY = OFF , ALLOW_ROW_LOCKS = ON , ALLOW_PAGE_LOCKS = ON ) ON  [ PRIMARY ]
22. )ON  [ Primary ]
24. GO
25. SET  ANSI_PADDING OFF
27. Go

Create a new ASP.NET MVC project called "ClubMember".

Click on "Alter Hallmark".

But we are looking for the following output.

Click on "Change Authentication" push and select No Hallmark.

We take created a project called "ClubMember". Now, nosotros are going to add together "MemberModel".

Correct-click on "MODELS" folder or press CTRL+SHIFT+A to add new Model (Course).

Give Model Name: "MemberModel".

Lawmaking of MemberModel.cs

1. using Arrangement;
2. using Arrangement.Collections.Generic;
3. using Arrangement.Linq;
4. using System.Web;
6. namespace ClubMember.Models
7. {
8. public form  MemberModel
9.     {
10.         public  string Proper name { get; set; }
11. public  string PhoneNumber { get; set; }
12. public  string ImagePath { get; set; }
13. public  HttpPostedFile ImageFile { get; ready; }
14.     }
15. }

At present, build your project by correct-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 activeness-method called CONTACTFORM.

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

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

As you click on ADD push in VIEWS-->Home folder CONTACTFORM.CSHTML file will exist created.

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

At present, let usa alter the CSHTML code.

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

Remove following lawmaking of ImagePath

1. @Html.EditorFor(model => model.ImagePath, new  { htmlAttributes = new  { @ course  = "form-control"  } })
2. @Html.ValidationMessageFor(model => model.ImagePath,"" , new  { @ class  = "text-danger"  })

Add together the post-obit lines of code.

1. <input type= "file"  proper name= "ImageFile"  required />

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

As nosotros take inverse and usedthe HTML File-Upload control named "ImageFile", so now, permit u.s.a. change the model again to modify the titles of fields like this:

• Name = Fellow member Name
• PhoneNumber = Telephone / Mobile Number
• ImagePath = Upload File

Code of MemberModel.cs

1. using Arrangement;
2. using System.Collections.Generic;
3. using Organization.ComponentModel;
4. using Organisation.ComponentModel.DataAnnotations;
5. using Organisation.Linq;
6. using Arrangement.Spider web;
8. namespace ClubMember.Models
9. {
10. public class  MemberModel
11.     {
13.         [DisplayName("Member Name" )]
14. public  string Proper noun { get; set up; }
17.         [DisplayName("Telephone / Mobile Number" )]
18. public  string PhoneNumber { get; set; }
21.         [DisplayName("Upload File" )]
22. public  string ImagePath { get; set; }
24. public  HttpPostedFileBase ImageFile { get; set; }
25.     }
26. }

Note
DisplayName attribute comes later on using the following namespaces.

1. using System.ComponentModel;
2. using System.ComponentModel.DataAnnotations;

Now, again, switch to CONTACTFORM.CSHTML file, practice the following changes and printing F5.

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

Line No. 10

@using (Html.BeginForm())

Alter this to:

1. @using(Html.BeginForm( "ContactForm" , "Dwelling house" , FormMethod.Post, new
2. {
3.     enctype ="multipart/form-data"
4. }))

Now, allow u.s.a. switch dorsum to the controller to work on it.

1. [HttpPost]
2. public  ActionResult ContactForm(MemberModel membervalues)
3. {
5.     cord FileName = Path.GetFileNameWithoutExtension(membervalues.ImageFile.FileName);
8.     string FileExtension = Path.GetExtension(membervalues.ImageFile.FileName);
11.     FileName = DateTime.Now.ToString("yyyyMMdd" )+ "-" +FileName.Trim()+ FileExtension;
14.     cord UploadPath = ConfigurationManager.AppSettings["UserImagePath" ].ToString();
17.     membervalues.ImagePath = UploadPath + FileName;
20.     membervalues.ImageFile.SaveAs(membervalues.ImagePath);
22. render  View();
23. }

Afterwards updating the HTTPPOST code, at present, it is time to create a new folder called "UserImages".

You lot tin run across in the Solution Explorer binder that the "UserImages"  folder is created.

Now, open web.config file to add APPSETTING.

AppSetting exists under Configuration Tag.

1. <configuration>
2.   <appSettings>
3.     <add central="webpages:Version"  value= "3.0.0.0"  />
4.     <add together key="webpages:Enabled"  value= "imitation"  />
5.     <add fundamental="ClientValidationEnabled"  value= "true"  />
6.     <add key="UnobtrusiveJavaScriptEnabled"  value= "true"  />
7.     <add together central="UserImagePath"  value= "D:\MBK\ClubMember\ClubMember\UserImages\"  />
8.   </appSettings>

In the above lawmaking, y'all can see UserImagePath key created with the value.

Now, fill up the course.

Later clicking on CREATE button and submitting the grade, you can meet your selected file copied in the set folder in web.config.

At present, nosotros are going to write the code to store other information of CONTACT Form details.

• Member Name
• Telephone/Mobile Number
• Image File Path

Right-click on projection name "ClubMember".

Select Data--->LINQ to SQL Classes. Give proper name "ClubMemberDataClasses.dbml".

Open ClubMemberDataClasses.dbml file and open Server Explorer.

Click on the red push that is "Connect to database". As y'all click on this button, yous volition get the following dialog box.

In the above dialog box, y'all have to provide a Database server proper name and Authentication level and afterward, select your database.

Now, yous tin can run into database is opened in Server Explorer.

Now, elevate and drop tblMembers inside ClubMemberDataClasses.dbml.

At present, switch back to HomeController to write INSERT record code into database table using LINQ TO SQL.

Code HomeController.cs

1. using ClubMember.Models;
2. using Arrangement;
3. using Arrangement.Collections.Generic;
4. using System.IO;
5. using Arrangement.Linq;
6. using System.Web;
7. using Organization.Web.Mvc;
8. using Organization.Configuration;
10. namespace ClubMember.Controllers
11. {
12. public class  HomeController : Controller
13.     {
14. public  ActionResult Index()
15.         {
16. return  View();
17.         }
19. public  ActionResult Near()
20.         {
21.             ViewBag.Bulletin ="Your application description page." ;
23. return  View();
24.         }
26. public  ActionResult Contact()
27.         {
28.             ViewBag.Bulletin ="Your contact folio." ;
30. return  View();
31.         }
33.         [HttpGet]
34. public  ActionResult ContactForm()
35.         {
37. return  View();
38.         }
40.         [HttpPost]
41. public  ActionResult ContactForm(MemberModel membervalues)
42.         {
44.             string FileName = Path.GetFileNameWithoutExtension(membervalues.ImageFile.FileName);
47.             string FileExtension = Path.GetExtension(membervalues.ImageFile.FileName);
50.             FileName = DateTime.Now.ToString("yyyyMMdd" )+ "-" +FileName.Trim()+ FileExtension;
53.             cord UploadPath = ConfigurationManager.AppSettings["UserImagePath" ].ToString();
56.             membervalues.ImagePath = UploadPath + FileName;
59.             membervalues.ImageFile.SaveAs(membervalues.ImagePath);
63. var  db = new  ClubMemberDataClassesDataContext();
65.             tblMember _member =new  tblMember();
67.             _member.ImagePath = membervalues.ImagePath;
68.             _member.MemberName = membervalues.Name;
69.             _member.PhoneNumber = membervalues.PhoneNumber;
71.             db.tblMembers.InsertOnSubmit(_member);
72.             db.SubmitChanges();
74. return  View();
75.         }
77.     }
78. }

Code ContactForm.cshtml

1. @model ClubMember.Models.MemberModel
3. @{
4.     ViewBag.Title ="ContactForm" ;
5. }
7. <h2>ContactForm</h2>
10. @using (Html.BeginForm("ContactForm" , "Domicile" ,FormMethod.Post, new  { enctype= "multipart/grade-data"  }))
11. {
12.     @Html.AntiForgeryToken()
14.     <divclass = "form-horizontal" >
15.         <h4>MemberModel</h4>
16.         <hr />
17.         @Html.ValidationSummary(truthful , "" , new  { @ course  = "text-danger"  })
18.         <divform = "class-group" >
19.             @Html.LabelFor(model => model.Proper name, htmlAttributes:new  { @ course  = "control-label col-md-2"  })
20.             <divform = "col-doc-10" >
21.                 @Html.EditorFor(model => model.Name,new  { htmlAttributes = new  { @ class  = "course-command"  } })
22.                 @Html.ValidationMessageFor(model => model.Name,"" , new  { @ grade  = "text-danger"  })
23.             </div>
24.         </div>
26.         <divclass = "class-group" >
27.             @Html.LabelFor(model => model.PhoneNumber, htmlAttributes:new  { @ class  = "control-label col-doctor-2"  })
28.             <divclass = "col-medico-10" >
29.                 @Html.EditorFor(model => model.PhoneNumber,new  { htmlAttributes = new  { @ class  = "form-command"  } })
30.                 @Html.ValidationMessageFor(model => model.PhoneNumber,"" , new  { @ grade  = "text-danger"  })
31.             </div>
32.         </div>
34.         <divgrade = "course-group" >
35.             @Html.LabelFor(model => model.ImagePath, htmlAttributes:new  { @ class  = "command-label col-medico-2"  })
36.             <divgrade = "col-md-10" >
37.                 <input type="file"  name= "ImageFile"  required />
38.             </div>
39.         </div>
41.         <divclass = "form-grouping" >
42.             <divcourse = "col-doctor-offset-2 col-doc-x" >
43.                 <input type="submit"  value= "Create" grade = "btn btn-default"  />
44.             </div>
45.         </div>
46.     </div>
47. }
49. <div>
50.     @Html.ActionLink("Back to Listing" , "Index" )
51. </div>
53. @section Scripts {
54.     @Scripts.Render("~/bundles/jqueryval" )
55. }

Code MemberModel.cs

1. using System;
2. using Organisation.Collections.Generic;
3. using Organisation.ComponentModel;
4. using Organisation.ComponentModel.DataAnnotations;
5. using System.Linq;
6. using System.Web;
8. namespace ClubMember.Models
9. {
10. public class  MemberModel
11.     {
13.         [DisplayName("Member Proper name" )]
14. public  string Proper name { get; set; }
17.         [DisplayName("Telephone / Mobile Number" )]
18. public  string PhoneNumber { get; set; }
21.         [DisplayName("Upload File" )]
22. public  string ImagePath { go; set; }
24. public  HttpPostedFileBase ImageFile { get; set; }
25.     }
26. }

Now, you can check in your SQL Server database table if the record is inserted or not.

Look here. The above tape is inserted successfully.

Thank yous .

Happy Coding.

bettsskeethe.blogspot.com

Source: https://www.c-sharpcorner.com/article/asp-net-mvc-form-with-file-upload/

Share :