Pages

Wednesday, 18 January 2017

Create a File upload html page in asp.net MVC and upload a file to controller action with mapping the model using AutoMapper

In this post we are going to see how to create a File upload html page in asp.net MVC and map the model using the Automapper.

For this First we have to create a empty ASP.Net MVC application, then install the automapper using nuget, Now we have to create the models, then create the ViewModel, later we have to map the property of this two classes using the automapper

publicclassPostViewModel

{

publicHttpPostedFileBase File { set; get; }

publicstring PostTitle { set; get; }

publicstring PostDescription { set; get; }

}

publicclassPostModel

{

publicstring Title { set; get; }

publicstring Description { set; get; }

publicstring Details

{

get
{ returnstring.Format("{0},{1}", Title,

Description.Substring(10) +
"..."); }

}

publicstring imageUrl { set; get; }

}

Now create a Profile for this model mappings, then define the properties and there mappings, then create a Configuration class where we can initialize the profile.

Now we have to create the controller with a action upload where we have input as model with type PostViewModel , then save the file using the property File which is a type of HttpPostedFileBase

Then called the Mapper.Map for copy the values from input model to PostModel

[HttpPost]

publicActionResult Upload(PostViewModel model)

{

var
file = model.File;

string filename = Path.GetFileName(model.File.FileName);

string path = Path.Combine(Server.MapPath("~/img/"), filename);

model.File.SaveAs(path);

var
postmodel = Mapper.Map<PostViewModel, PostModel>(model);

postmodel.imageUrl = filename;

return View(postmodel);

}

After Create this Now create a view for upload.cshtml

@model BaseWebApp.Models.PostModel

@{

ViewBag.Title = "Upload";

}

<divclass="panel panel-default
panel-success"style="width:700px;">

<divclass="panel-body">

<imgclass="left"src="../../img/@Model.imageUrl"/>

<pstyle="font-weight:bold">@Model.Title</p>

<p>@Model.Description</p>

</div>

</div>

Now we create a core part which will upload a file from html to MVC controller.In this we are creating a Form which targets the enctype multipart/form-data , now you may have question how the html controls value will be mapped to model in controller action.

<divstyle="marin:20px;padding:20px">

@using(Html.BeginForm("Upload","Home",FormMethod.Post,

new { enctype = "multipart/form-data", @class = "form-inline" }))

{

<divclass="form-group">

<labelfor="file">File :</label>

<inputtype="file"name="file"class="form-control"

placeholder="Select image
.."/>

</div>

<divclass="form-group">

<labelclass="sr-only"for="postTitle">Username :</label>

<inputtype="text"name="postTitle"class="form-control"

placeholder="Post Title"/>

</div>

<divclass="form-group">

<labelclass="sr-only"for="postDescription">Description :</label>

<inputtype="text"name="postDescription"class="form-control"

title="description"placeholder="Post Description"/>

</div>

<buttontype="submit"class="btn
btn-success">Upload</button>

}

</div>

index.cshtml

upload.cshtml

From this post you can learn how to create a fileupload html page in asp.net mvc and map the model using the Automapper.