Mvc Form With File Upload and Text

Implementation Summary

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

Step past step Implementation

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

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

Create a "tblMembers" table in the database.

1. USE [MbkTest]
2. GO
4. SET  ANSI_NULLS ON
5. GO
7. Set  QUOTED_IDENTIFIER ON
8. Get
10. SET  ANSI_PADDING ON
11. Get
13. CREATE TABLE  [dbo].[tblMembers](
14.     [MemberID] [int ] IDENTITY(1,1) NOT NULL ,
15.     [MemberName] [varchar ](50) Null ,
16.     [PhoneNumber] [varchar ](l) Null ,
17.     [ImagePath] [varchar ](500) NULL ,
18. PRIMARY Central  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. Become

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

Click on "Change Hallmark".

Simply we are looking for the following output.

Click on "Modify Authentication" button and select No Authentication.

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

Right-click on "MODELS" binder or printing CTRL+SHIFT+A to add new Model (CLASS).

Requite Model Proper noun: "MemberModel".

Lawmaking of MemberModel.cs

1. using System;
2. using System.Collections.Generic;
3. using System.Linq;
4. using System.Spider web;
6. namespace ClubMember.Models
7. {
8. public class  MemberModel
9.     {
10.         public  string Name { become; set up; }
11. public  cord PhoneNumber { get; set; }
12. public  cord ImagePath { get; fix; }
13. public  HttpPostedFile ImageFile { get; set; }
14.     }
15. }

Now, build your projection past 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.

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

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

Equally you click on Add button in VIEWS-->HOME folder CONTACTFORM.CSHTML file will exist created.

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

At present, permit us change the CSHTML lawmaking.

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

Remove following code of ImagePath

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

Add the post-obit lines of code.

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

The to a higher place code line is the HTML control for file uploading.

Equally we take changed and usedthe HTML File-Upload control named "ImageFile", so now, permit the states change the model over again to change the titles of fields like this:

• Proper name = Fellow member Proper noun
• PhoneNumber = Telephone / Mobile Number
• ImagePath = Upload File

Code of MemberModel.cs

1. using System;
2. using System.Collections.Generic;
3. using Arrangement.ComponentModel;
4. using Organization.ComponentModel.DataAnnotations;
5. using System.Linq;
6. using System.Spider web;
8. namespace ClubMember.Models
9. {
10. public class  MemberModel
11.     {
13.         [DisplayName("Member Name" )]
14. public  string Name { get; set; }
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; fix; }
25.     }
26. }

Note
DisplayName attribute comes after using the following namespaces.

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

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

Now, let u.s.a. switch again to ContactForm.cshtml to modify the following.

Line No. 10

@using (Html.BeginForm())

Alter this to:

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

Now, let usa switch back to the controller to work on information technology.

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

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

You can see in the Solution Explorer folder that the "UserImages"  binder is created.

At present, open web.config file to add APPSETTING.

AppSetting exists nether Configuration Tag.

1. <configuration>
2.   <appSettings>
3.     <add together cardinal="webpages:Version"  value= "iii.0.0.0"  />
4.     <add key="webpages:Enabled"  value= "false"  />
5.     <add key="ClientValidationEnabled"  value= "truthful"  />
6.     <add cardinal="UnobtrusiveJavaScriptEnabled"  value= "true"  />
7.     <add together key="UserImagePath"  value= "D:\MBK\ClubMember\ClubMember\UserImages\"  />
8.   </appSettings>

In the to a higher place code, yous can see UserImagePath key created with the value.

Now, fill the form.

After clicking on CREATE push and submitting the form, you tin can come across your selected file copied in the set folder in web.config.

Now, we are going to write the lawmaking to store other information of CONTACT FORM details.

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

Correct-click on project proper noun "ClubMember".

Select Information--->LINQ to SQL Classes. Requite proper noun "ClubMemberDataClasses.dbml".

Open ClubMemberDataClasses.dbml file and open Server Explorer.

Click on the red button that is "Connect to database". Every bit yous click on this push button, you volition get the following dialog box.

In the above dialog box, you lot have to provide a Database server name and Authentication level and subsequently, select your database.

Now, you tin see database is opened in Server Explorer.

Now, drag and drib tblMembers inside ClubMemberDataClasses.dbml.

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

Lawmaking HomeController.cs

1. using ClubMember.Models;
2. using System;
3. using System.Collections.Generic;
4. using Arrangement.IO;
5. using System.Linq;
6. using System.Web;
7. using Arrangement.Web.Mvc;
8. using System.Configuration;
10. namespace ClubMember.Controllers
11. {
12. public class  HomeController : Controller
13.     {
14. public  ActionResult Index()
15.         {
16. return  View();
17.         }
19. public  ActionResult About()
20.         {
21.             ViewBag.Message ="Your application description page." ;
23. return  View();
24.         }
26. public  ActionResult Contact()
27.         {
28.             ViewBag.Message ="Your contact folio." ;
30. render  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.             string 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.Championship ="ContactForm" ;
5. }
7. <h2>ContactForm</h2>
10. @using (Html.BeginForm("ContactForm" , "Abode" ,FormMethod.Mail, new  { enctype= "multipart/form-data"  }))
11. {
12.     @Html.AntiForgeryToken()
14.     <divclass = "form-horizontal" >
15.         <h4>MemberModel</h4>
16.         <hour />
17.         @Html.ValidationSummary(truthful , "" , new  { @ class  = "text-danger"  })
18.         <divclass = "form-group" >
19.             @Html.LabelFor(model => model.Name, htmlAttributes:new  { @ class  = "control-characterization col-doc-2"  })
20.             <divcourse = "col-md-x" >
21.                 @Html.EditorFor(model => model.Proper name,new  { htmlAttributes = new  { @ form  = "form-control"  } })
22.                 @Html.ValidationMessageFor(model => model.Name,"" , new  { @ grade  = "text-danger"  })
23.             </div>
24.         </div>
26.         <divclass = "form-group" >
27.             @Html.LabelFor(model => model.PhoneNumber, htmlAttributes:new  { @ class  = "control-label col-physician-two"  })
28.             <divclass = "col-dr.-10" >
29.                 @Html.EditorFor(model => model.PhoneNumber,new  { htmlAttributes = new  { @ course  = "grade-control"  } })
30.                 @Html.ValidationMessageFor(model => model.PhoneNumber,"" , new  { @ form  = "text-danger"  })
31.             </div>
32.         </div>
34.         <divcourse = "course-group" >
35.             @Html.LabelFor(model => model.ImagePath, htmlAttributes:new  { @ class  = "control-label col-md-two"  })
36.             <divform = "col-physician-10" >
37.                 <input type="file"  name= "ImageFile"  required />
38.             </div>
39.         </div>
41.         <divclass = "grade-group" >
42.             <divclass = "col-physician-offset-two col-md-ten" >
43.                 <input type="submit"  value= "Create" class = "btn btn-default"  />
44.             </div>
45.         </div>
46.     </div>
47. }
49. <div>
50.     @Html.ActionLink("Dorsum to Listing" , "Index" )
51. </div>
53. @department Scripts {
54.     @Scripts.Render("~/bundles/jqueryval" )
55. }

Code MemberModel.cs

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

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

Await here. The above tape is inserted successfully.

Thank you .

Happy Coding.

williamsimesers.blogspot.com

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

Share this post