I am working on a social media application with a UseregistrationController that needs to upload a user profile image of each user in the application. I want to retain the File input on the same Create/Edit view as the other fields i.e Name, Display Name, Email Address, Phone Number, etc.
So basically I need a registration page where the user must enter several database fields, including an image file. i.e post File Upload and other form fields to one action in ASP.NET MVC.
I have completed my task successfully so I thought let’s share the idea with other developers also so that they can get help.
In this post, we will cover the following points
- File Upload input as Part of Form with Other Fields
- How to pass other form data field along with MVC File Upload?
- MVC 5 Uploading file with one additional parameter
- MVC File Upload with more than one property
In the below articles I have explained about Uploading both data and files in FormData using Ajax MVC. Now I think you are clear about uploading the image file with form data in ASP.Net MVC applications. if you want do this task using the ajax call then read below article.
Let’s understand with an example, I have created an MVC view that has Name, Display Name, Email Address, Phone Number input fields inside a form.
and that form control has one file upload control for uploading the user profile picture. and we have specified the standard form elements with a file upload “multipart/form-data“. So multipart type handle for all form elements on the page.
@using (Html.BeginForm("RegisterUserProfile", "UserDashboard", FormMethod.Post, new { @class = "log-form", area = "user", enctype = "multipart/form-data" })) { <div class="form-group row"> <label class="col-form-label col-md-2">Full Name * </label> <div class="col-md-10"> <input type="text" class="form-control" value="@ApplicationSession.UserSession.name" required name="fullname" id="fullname" placeholder="Enter Here"> </div> </div> <div class="form-group row"> <label class="col-form-label col-md-2">Display Name* </label> <div class="col-md-10"> <input type="text" class="form-control" value="@ApplicationSession.UserSession.displayname" required name="displayname" id="displayname" placeholder="Enter Here"> <p style="color: #9a9999;padding-top: 5px;">This will be how your name will be displayed in the account section.</p> </div> </div> <div class="form-group row"> <label class="col-form-label col-md-2">Email Address * </label> <div class="col-md-10"> <input type="email" required name="emailaddress" value="@ApplicationSession.UserSession.email" id="emailaddress" class="form-control" placeholder="Enter Here"> </div> </div> <div class="form-group row"> <label class="col-form-label col-md-2">Phone Number * </label> <div class="col-md-10"> <input type="tel" name="PhoneNumber" placeholder="Enter Here" value="@ApplicationSession.UserSession.phone" id="PhoneNumber" class="form-control" pattern="^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$" required> </div> </div> <div class="form-group row"> <label class="col-form-label col-md-2">Upload Photo * </label> <div class="col-md-10"> <input class="form-control" type="file" name="file" id="file"> </div> </div> <div class="text-left"> <button type="submit" class="btn btn-primary">Save Changes</button> </div> }
Action Method Code
In action using the FormCollection object I’m getting form data value inside the controller and In Request.Files we can read our files.Using the entity framework and I’m performing insert in a database table.
// Post:RegisterUserProfile [HttpPost] public ActionResult RegisterUserProfile(FormCollection collection) { //getting form data string fullname = collection["fullname"]; string displayname = collection["displayname"]; string emailaddress = collection["emailaddress"]; string phonenumber = collection["PhoneNumber"]; try { StudentDbEntities db1 = new StudentDbEntities(); var countuser = db1.Users.Where(a => a.Email == emailaddress.Trim()).Count(); if (countuser == 0) { using (StudentDbEntities db = new StudentDbEntities()) { User userobj = new User(); // Checking if Request object has file if (Request.Files.Count > 0 && Request.Files[0].ContentLength > 0) { HttpPostedFileBase file = Request.Files[0]; string fname = file.FileName; // Get the complete folder path and store the file inside it. fname = Path.Combine(Server.MapPath("~/Content/Images"), fname); file.SaveAs(fname); userobj.ProfilePicture = "/Content/Images/" + file.FileName; } userobj.Name = fullname; userobj.DisplayName = displayname; userobj.Email = emailaddress; userobj.ContactNo = phonenumber; db.Users.Add(userobj); db.SaveChanges(); TempData["ModelError"] = "registered successfully"; return View("Index"); } } else { ViewData["error"] = "email already exist please try with diffrent one!"; return View("Index"); } } catch (Exception ex) { TempData["ModelError"] = ex.Message; return View("Index"); } }
If you have any questions related to the post let me know, I will respond.
Please also share this article to Facebook, Twitter, Reddit, and other social media platform to help developers who face the same issue.
Please like our Facebook and follow us on Twitter for the latest update of technology or for any support.
MVC is a way in which we divide our database, logic, and visual part. The full form of MVC is Model-View-Controller, which means that we call the database the model, the logic part is known as the controller and the visual part is known as the view.
Talking about the technical language, it is such an architectural pattern, with the help of which project management, security, and productivity can be increased by dividing any project into 3 components.
We are not talking about anyone special programming language here because you can use it in any project, whether it is in PHP, ASP.NET, Nodejs, Python, you can use this method in all.
The post How to post File Upload and other form fields to one action Asp .Net MVC C# appeared first on Software Development | Programming Tutorials.
Read More Articles
- Write a value which contain comma to a CSV file in c#?
- Reading CSV File with cells containing commas c#
- Split CSV with columns may contain ‘,’ Comma C#
- [Simple Way]-Cascading DropDownList in Asp.Net Mvc Using Jquery Ajax
- [Simple Way]-How to get data from database using JQuery Ajax in asp net MVC
- [Simple Way]-ASP.NET Core Upload Multiple File Web API model
- [Simple Way]- Image Upload in .NET Core Web API
- [Easy Way]-Receive File and other form data together in ASP.NET Core Web API
- Replace image in word document using C#
- How to add new rows to an existing word document table in C#
- How to pass object instance through ASP NET MVC form post
- How to get data from third party rest API in MVC 6.0 and asp net core application
- How to Download file from one FTP and then Upload file to different FTP?
- How to submit a file and some other form content to Web API using C# HttpClient
- Can I upload a file and a model to an MVC 4 action at the same time from a Winforms app?
- Button that used to post an Action and a Script in the same time in ASP MVC
- Incorrect aligning of form controls in ASP MVC 5 and Bootstrap
- How can I package my python module and its dependencies such as Numpy/Scipy into one file like dll for C# calls?
- How to repeat form controls in asp.net mvc and pass them as a list to controller
- C# how to call MVC action and assign result to js variable
- How to show/hide few methods to one client and few other methods to another client in Web Api
- How to post and receive a file with web api
- MVC 5 add dynamic fields to form using jquery and save it to model
- How to send json data and formdata (files) from Angular to an ASP.NET WebAPI Controller action in one shot?
- How identify a primary key parameter from an ASP NET MVC Model object based on annotation [key] tag?
- Create a CSV File and Upload to Server via FTP in MVC / C#
- How to use remote and compare attributes in one method in MVC
- How can I create a global object that is accessible in all the MVC & WEB API after it start and load information from file
- How to get the full Path of the file upload control in a string variable in asp .net?
- How to merge two text (.txt) file into single one and distinct the same content?
- How to test ASP NET ashx Handler With File Attached
- How to initialize and de-initialize only one time during application life cycle in ASP.NET MVC
- How can I create and display a PDF file for a .net core MVC web application?
- How to show checked radio button in Razor edit view Asp net core mvc
- Upload file with .net core MVC using ajax and pass as model
- File Upload with AngularJS and ASP.NET MVC
- ASP NET MVC RAZOR Upload Multiple Images FileList
- How to auto fill fields in a form using @Html.EditorFor in ASP.net MVC 5?
- How to drag & drop only one file on form window
- How do I get all the files from all the Directories, inside other Directores and check for each file size?
- Implement same interface in different projects
- C#: A method parameter that implements a particular interface
- C# Regex for masking E-Mails
- DateTimeFormat.AbbreviatedMonthNames adding a dot at the end of month's name
- Razor engine can not find the Index.cshtml page when it is clearly there
- Retrieving values of dynamically created controls on Post back in Asp.Net
- C# Mailjet SDK: Adding attachment
- How to specify route options to specific controllers in ASP.NET MVC 5
- Required field and regular expression validators for the bound field elements inside the grid view
- Getting a precise percent from two Big Integers
- c# hook - counting keystrokes on the keyboard
- MongoDB C# Array index or indexing inner items of arrays
- Match string that contain unknown text
- Performance benefit for storing platform invoke in delegate?
- Is there a Declarative XPath-based Validation (i.e. "Fluent Schematron") library for Xml/XDocument?
- Releasing COM objects in VSTO
- C#, ASP.net application which calls executable to create output file
- Working with XML and XML Validation with SQL SERVER 2008?
- How to get the Local IP-Broadcast Address dynamically C#
- Reverse order of ObservableCollection