Automatic Upload After File Upload Change Vb.net Asp

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 chosen "ContactForm" to insert record in tabular array and salve file in Server.
8. Add Linq To Sql course "ClubMember".
9. Insert a record into a database table.

Footstep past step Implementation

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

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

Create a "tblMembers" tabular array in the database.

1. Utilize [MbkTest]
2. Become
4. SET  ANSI_NULLS ON
5. GO
7. SET  QUOTED_IDENTIFIER ON
8. GO
10. Set  ANSI_PADDING ON
11. Go
13. CREATE TABLE  [dbo].[tblMembers](
14.     [MemberID] [int ] IDENTITY(1,one) Non NULL ,
15.     [MemberName] [varchar ](50) Nada ,
16.     [PhoneNumber] [varchar ](50) NULL ,
17.     [ImagePath] [varchar ](500) NULL ,
18. Main Cardinal  Clustered
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. Prepare  ANSI_PADDING OFF
27. Go

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

Click on "Alter Authentication".

But we are looking for the following output.

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

We have created a projection called "ClubMember". At present, we are going to add "MemberModel".

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

Requite Model Name: "MemberModel".

Code of MemberModel.cs

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

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 volition display every bit below.

Fill the "Add together VIEW" dialog box with the following values.

Every bit you click on Add push button in VIEWS-->HOME binder 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 lawmaking.

Switch to CONTACTFORM.CSHTML file,  exercise the post-obit changes and printing F5.

Remove following lawmaking of ImagePath

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

Add the following lines of lawmaking.

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

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

As we have changed and usedthe HTML File-Upload control named "ImageFile", and so now, permit u.s. change the model again to change the titles of fields similar this:

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

Code of MemberModel.cs

1. using System;
2. using System.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 Name" )]
14. public  cord Proper name { get; prepare; }
17.         [DisplayName("Phone / 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 after using the post-obit namespaces.

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

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

Now, permit us switch over again to ContactForm.cshtml to modify the following.

Line No. 10

@using (Html.BeginForm())

Change this to:

1. @using(Html.BeginForm( "ContactForm" , "Home" , FormMethod.Mail service, new
2. {
3.     enctype ="multipart/form-information"
4. }))

Now, allow the states switch dorsum to the controller to piece of work on it.

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.Now.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. }

After updating the HTTPPOST code, now, it is fourth dimension to create a new folder called "UserImages".

You can see in the Solution Explorer folder 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 key="webpages:Version"  value= "3.0.0.0"  />
4.     <add key="webpages:Enabled"  value= "false"  />
5.     <add key="ClientValidationEnabled"  value= "truthful"  />
6.     <add key="UnobtrusiveJavaScriptEnabled"  value= "true"  />
7.     <add fundamental="UserImagePath"  value= "D:\MBK\ClubMember\ClubMember\UserImages\"  />
8.   </appSettings>

In the higher up code, you tin can encounter UserImagePath key created with the value.

Now, fill the form.

After clicking on CREATE button and submitting the form, you tin can see your selected file copied in the fix binder in web.config.

At present, nosotros are going to write the code to shop other data of CONTACT FORM details.

• Fellow member Name
• Telephone/Mobile Number
• Image File Path

Right-click on project name "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". Equally you click on this button, you lot will get the following dialog box.

In the higher up dialog box, y'all accept to provide a Database server name and Authentication level and afterward, select your database.

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

Now, drag and drib tblMembers within ClubMemberDataClasses.dbml.

Now, 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 System.Collections.Generic;
4. using Arrangement.IO;
5. using System.Linq;
6. using System.Web;
7. using Organisation.Web.Mvc;
8. using Organisation.Configuration;
10. namespace ClubMember.Controllers
11. {
12. public course  HomeController : Controller
13.     {
14. public  ActionResult Alphabetize()
15.         {
16. return  View();
17.         }
19. public  ActionResult About()
20.         {
21.             ViewBag.Bulletin ="Your awarding description page." ;
23. return  View();
24.         }
26. public  ActionResult Contact()
27.         {
28.             ViewBag.Message ="Your contact page." ;
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.             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.Title ="ContactForm" ;
5. }
7. <h2>ContactForm</h2>
10. @using (Html.BeginForm("ContactForm" , "Home" ,FormMethod.Post, new  { enctype= "multipart/form-information"  }))
11. {
12.     @Html.AntiForgeryToken()
14.     <divclass = "form-horizontal" >
15.         <h4>MemberModel</h4>
16.         <hr />
17.         @Html.ValidationSummary(truthful , "" , new  { @ form  = "text-danger"  })
18.         <divclass = "form-group" >
19.             @Html.LabelFor(model => model.Proper name, htmlAttributes:new  { @ class  = "command-characterization col-md-two"  })
20.             <divgrade = "col-dr.-10" >
21.                 @Html.EditorFor(model => model.Name,new  { htmlAttributes = new  { @ class  = "course-control"  } })
22.                 @Html.ValidationMessageFor(model => model.Name,"" , new  { @ course  = "text-danger"  })
23.             </div>
24.         </div>
26.         <divclass = "course-group" >
27.             @Html.LabelFor(model => model.PhoneNumber, htmlAttributes:new  { @ class  = "control-label col-md-2"  })
28.             <divform = "col-physician-10" >
29.                 @Html.EditorFor(model => model.PhoneNumber,new  { htmlAttributes = new  { @ course  = "course-command"  } })
30.                 @Html.ValidationMessageFor(model => model.PhoneNumber,"" , new  { @ form  = "text-danger"  })
31.             </div>
32.         </div>
34.         <divclass = "form-group" >
35.             @Html.LabelFor(model => model.ImagePath, htmlAttributes:new  { @ form  = "command-label col-doctor-two"  })
36.             <divclass = "col-doctor-10" >
37.                 <input blazon="file"  proper noun= "ImageFile"  required />
38.             </div>
39.         </div>
41.         <divclass = "form-group" >
42.             <divclass = "col-physician-offset-2 col-medico-ten" >
43.                 <input type="submit"  value= "Create" course = "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.Return("~/bundles/jqueryval" )
55. }

Code MemberModel.cs

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

Now, you tin cheque in your SQL Server database table if the record is inserted or non.

Look here. The above record is inserted successfully.

Give thanks you .

Happy Coding.

davisaferself.blogspot.com

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

Share this post