Uploading file with other model data, validate model & file before uploading by using DataAnnotation is a tricky part because there is no FileFor or any similar control in MVC. So very first question comes in mind, is that possible to use DataAnnotation with file control? Yes, it is very possible. Second question, it this possible with client side validation, even the answer is yes.

We know that we use html control input type = "file" to choose and upload any kind of file. When we need to create a text box we use TextBoxFor and it renders input type = "text", so if we will use TextBoxFor and add attribute type="file" then it will work as file upload control, is not it?

// Normal HTML file control
<input type="file" id="image" name="image">
// Normal Text Box HTML Control
<input type="file" id="image" name="image">
// MVC: we will use this
@Html.TextBoxFor(model=>model.MyImage, new { @type = "file"} )
// It will renders for us
<input type="file" id="MyImage" name="MyImage">

This is the trick we will use to render the file control and post file to control with model data. It will be able to validate inout client side as well as server side. Do a title bit google and you will notice most of the people uses html control directly, yes, that will work if you will give the same name as the model property then it will use the model validation.

We are using Code First method so let's see our Products Table:

  • ProductId
  • ProductName
  • Price
  • CategoryId
  • Image
  • Thumb

I am planning to store image into folder in two different sizes, 1. big image and 2. thumbnail. In database we will store the path of these images. For model we will use a separate model which will accept

  • ProductName
  • Price
  • CategoryId
  • Uploading

Let's create our model, so what would be the data type for ImageUpload? we will use HttpPostedFileBase, rest of the code are normal

 public class ProductModel
{
public Int32 ProductId { get; set; } [Required]
[Display(Name = "Product Name")]
public String ProductName { get; set; } [Required]
[Display(Name = "Price")]
public Decimal Price { get; set; } [Required]
[Display(Name = "Category")]
public Int32 CategoryId { get; set; } [Required]
[DataType(DataType.Upload)]
[Display(Name = "Choose File")]
public HttpPostedFileBase ImageUpload { get; set; }
}

Create get controller: we will use ViewBag.Categories to bind the dropdown from Category table

// GET: Products/Create
public ActionResult Create()
{
// To Bind the category drop down in search section
ViewBag.Categories = db.Categories.Where(x => x.IsActive == true);
var model = new ProductModel();
return View(model);
}

Right click in side the Create action method and create view for it. Add following html into it

@model Advance.Learning.WebApp.Models.ProductModel

@{
ViewBag.Title = "Create";
Layout = "~/Views/Shared/_Layout.cshtml";
} <h1>New Product</h1>
<hr />
@using (Html.BeginForm("Create", "Products",
FormMethod.Post, new { enctype = "multipart/form-data" }))
{
@Html.AntiForgeryToken() <div class="form-horizontal"> <div class="form-group">
@Html.LabelFor(m => m.ProductName, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.ProductName,
new { @class = "form-control", @placeholder = "Enter product name" })
@Html.ValidationMessageFor(m => m.ProductName, "", new { @class = "text-danger" })
</div>
</div> <div class="form-group">
@Html.LabelFor(m => m.Price, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.Price,
new { @class = "form-control", @placeholder = "Enter product price" })
@Html.ValidationMessageFor(m => m.Price, "", new { @class = "text-danger" })
</div>
</div> <div class="form-group">
@Html.LabelFor(m => m.CategoryId, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownListFor(m => m.CategoryId,
new SelectList(ViewBag.Categories, "CategoryId", "CategoryName"),
"Choose Category", new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.CategoryId, "", new { @class = "text-danger" })
</div>
</div> <div class="form-group">
@Html.LabelFor(m => m.ImageUpload, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.ImageUpload, new { type = "file", @class = "form-control" })
@Html.ValidationMessageFor(m => m.ImageUpload, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-success" />
@Html.ActionLink("Cancel", "Index", null, new { @class = "btn btn-warning" })
</div>
</div>
</div>
}
<div>
</div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}

To post the selected file to control we need to add the attribute enctype

// Either we can directly use the html tag form
<form action="/Products/Create"
enctype="multipart/form-data"
method="post"
novalidate="novalidate"> // Same can be render by following code, which I used in view
@using (Html.BeginForm("Create", "Products", FormMethod.Post,
new { enctype = "multipart/form-data" }))

How I tried to use the file upload control

<div class="form-group">
@Html.LabelFor(m => m.ImageUpload, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.ImageUpload, new { type = "file", @class = "form-control" })
@Html.ValidationMessageFor(m => m.ImageUpload, "", new { @class = "text-danger" })
</div>
</div>

ow to bind the Category drop down:

@Html.DropDownListFor(m => m.CategoryId,
new SelectList(ViewBag.Categories, "CategoryId", "CategoryName"),
"Choose Category",
new { @class = "form-control" })

We are set to save the product record with image, so we need a folder to save the images in our application, create a folder ProductImages on the root of application and add Create post method in products controller

 [HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(ProductModel model)
{
var imageTypes = new string[]{
"image/gif",
"image/jpeg",
"image/pjpeg",
"image/png"
};
if (model.ImageUpload == null || model.ImageUpload.ContentLength == )
{
ModelState.AddModelError("ImageUpload", "This field is required");
}
else if (!imageTypes.Contains(model.ImageUpload.ContentType))
{
ModelState.AddModelError("ImageUpload", "Please choose either a GIF, JPG or PNG image.");
} if (ModelState.IsValid)
{
var product = new Product();
product.ProductName = model.ProductName;
product.Price = model.Price;
product.CategoryId = model.CategoryId; // Save image to folder and get path
var imageName = String.Format("{0:yyyyMMdd-HHmmssfff}", DateTime.Now);
var extension = System.IO.Path.GetExtension(model.ImageUpload.FileName).ToLower();
using (var img = System.Drawing.Image.FromStream(model.ImageUpload.InputStream))
{
product.Image = String.Format("/ProductImages/{0}{1}", imageName, extension);
product.Thumb = String.Format("/ProductImages/{0}_thumb{1}", imageName, extension); // Save thumbnail size image, 100 x 100
SaveToFolder(img, extension, new Size(, ), product.Thumb); // Save large size image, 600 x 600
SaveToFolder(img, extension, new Size(, ), product.Image);
} db.Products.Add(product);
db.SaveChanges();
return RedirectToAction("Index");
} // If any error return back to the page
ViewBag.Categories = db.Categories.Where(x => x.IsActive == true);
return View(model);
}
  • First create an array of image type to support
  • Check if file is available
  • Check if file type is in supported types
  • check if mode is valid: ModelState.IsValid
  • Create a file name from datetime with milliseconds, even we can use GUID
  • SaveToFolder method to save files in folder see who I resize image

    private void SaveToFolder(Image img, string extension, Size newSize, string pathToSave) { // Get new resolution Size imgSize = NewImageSize(img.Size, newSize); using (System.Drawing.Image newImg = new Bitmap(img, imgSize.Width, imgSize.Height)) { newImg.Save(Server.MapPath(pathToSave), img.RawFormat); } }

Run the application and try to add a new product, I found everything working.

Edit Record: To edit the record we cannot use the ProductModel because in it ImageUpload is mandatory and it is not necessary to change the image in every edit, might be we only want to update only price or category, so we will use our Product table model for edit. To update the image we will create a separate page.

// GET: Products/Edit/5
public ActionResult Edit(int? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
Product product = db.Products.Find(id);
if (product == null)
{
return HttpNotFound();
} ViewBag.Categories = db.Categories.Where(x => x.IsActive == true);
return View(product);
} [HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit([Bind(Include = "ProductId,ProductName,Price,CategoryId")] Product model)
{
if (ModelState.IsValid)
{
var product = db.Products.Find(model.ProductId);
if (product == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
product.ProductName = model.ProductName;
product.Price = model.Price;
product.CategoryId = model.CategoryId;
db.SaveChanges();
return RedirectToAction("Index");
} ViewBag.Categories = db.Categories.Where(x => x.IsActive == true);
return View(model);
}

In get method we used db.Products.Find(id), the find mehtod takes one parameter, primary key to find the record.

In post method we find the product on the basis of primary key (product Id) and update the values from model (passed values) and update the database. Here is the complete view Html

@model Advance.Learning.WebApp.Models.Product

@{
ViewBag.Title = "Edit Product";
Layout = "~/Views/Shared/_Layout.cshtml";
} <h1>Edit Product</h1>
<hr /> @using (Html.BeginForm())
{
@Html.AntiForgeryToken() <div class="form-horizontal"> @Html.HiddenFor(m => m.ProductId) <div class="form-group">
@Html.LabelFor(m => m.ProductName, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.ProductName, new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.ProductName, "", new { @class = "text-danger" })
</div>
</div> <div class="form-group">
@Html.LabelFor(m => m.Price, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.Price, new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.Price, "", new { @class = "text-danger" })
</div>
</div> <div class="form-group">
@Html.LabelFor(m => m.CategoryId, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownListFor(m => m.CategoryId,
new SelectList(ViewBag.Categories, "CategoryId", "CategoryName"),
"Choose Category", new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.CategoryId, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<img src="@Model.Thumb" alt="@Model.ProductName image" class="img-thumbnail" />
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-success" />
@Html.ActionLink("Cancel", "Index", null, new { @class = "btn btn-warning" })
</div>
</div>
</div>
} @section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}

Detail Page: Simplest page with all the controls disabled and only one button to go back to listing page, action method and html

// GET: Products/Details/5
public ActionResult Details(int? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
Product product = db.Products.Find(id);
if (product == null)
{
return HttpNotFound();
}
ViewBag.Category = db.Categories.Find(product.CategoryId).CategoryName;
return View(product);
} // View @model Advance.Learning.WebApp.Models.Product
@{
ViewBag.Title = "Details";
Layout = "~/Views/Shared/_Layout.cshtml";
} <h2>Product Details</h2>
<hr />
<div>
<div class="form-horizontal">
<div class="form-group">
@Html.LabelFor(m => m.ProductName, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.ProductName,
new { @class = "form-control", @disabled = "disabled" })
</div>
</div> <div class="form-group">
@Html.LabelFor(m => m.Price, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.Price,
new { @class = "form-control", @disabled = "disabled" })
</div>
</div> <div class="form-group">
@Html.LabelFor(m => m.Price, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextBoxFor(m=>m.CategoryId, ((String)ViewBag.Category),
new { @class = "form-control", @disabled = "disabled" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<img src="@Model.Thumb" alt="@Model.ProductName image" class="img-thumbnail" />
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
@Html.ActionLink("Cancel", "Index", null, new { @class = "btn btn-warning" })
</div>
</div>
</div>
</div>

Delete Record: Before delete show the detail of the product so user can delete record with confident

// GET: Products/Delete/5
public ActionResult Delete(int? id)
{
if (id == null)
return new HttpStatusCodeResult(HttpStatusCode.BadRequest); Product product = db.Products.Find(id);
if (product == null)
return HttpNotFound(); ViewBag.Category = db.Categories.Find(product.CategoryId).CategoryName;
return View(product);
} // POST: Products/Delete/5
[HttpPost, ActionName("Delete")]
[ValidateAntiForgeryToken]
public ActionResult DeleteConfirmed(int id)
{
Product product = db.Products.Find(id);
db.Products.Remove(product);
db.SaveChanges();
return RedirectToAction("Index");
} // VIEW HTML
@model Advance.Learning.WebApp.Models.Product @{
ViewBag.Title = "Delete";
Layout = "~/Views/Shared/_Layout.cshtml";
} <h2>Delete Product</h2> <h3 class="text-danger">Are you sure you want to delete this product?</h3> <div class="form-horizontal">
<div class="form-group">
@Html.LabelFor(m => m.ProductName, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.ProductName,
new { @class = "form-control", @disabled = "disabled" })
</div>
</div> <div class="form-group">
@Html.LabelFor(m => m.Price, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.Price,
new { @class = "form-control", @disabled = "disabled" })
</div>
</div> <div class="form-group">
@Html.LabelFor(m => m.Price, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.CategoryId, ((String)ViewBag.Category),
new { @class = "form-control", @disabled = "disabled" })
</div>
</div> <div class="form-group">
<div class="col-md-offset-2 col-md-10">
<img src="@Model.Thumb" alt="@Model.ProductName image" class="img-thumbnail" />
</div>
</div> @using (Html.BeginForm())
{
@Html.AntiForgeryToken() <div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Delete" class="btn btn-danger" />
@Html.ActionLink("Cancel", "Index", null, new { @class = "btn btn-warning" })
</div>
</div>
}
</div>

If you want to use separate image upload page we can use very similar to create page because it has everything to update the image and update record. To update we need record Id which is already in ProductModel so will be easy to use it.

本文来自:http://www.advancesharp.com/blog/1142/asp-net-mvc-upload-file-with-record-validation-step-6

ASP.Net MVC upload file with record & validation - Step 6的更多相关文章

  1. Asp.net mvc 3 file uploads using the fileapi

    Asp.net mvc 3 file uploads using the fileapi I was recently given the task of adding upload progress ...

  2. asp.net mvc return file result

    asp.net mvc返回文件: public ActionResult ExportReflection(string accessToken) { var reflections = GetCms ...

  3. [转]ASP.NET MVC 2: Model Validation

    本文转自:http://weblogs.asp.net/scottgu/archive/2010/01/15/asp-net-mvc-2-model-validation.aspx?CommentPo ...

  4. 【转】ASP.NET MVC教程

    转自:http://www.cnblogs.com/QLeelulu/category/123326.html ASP.NET MVC的最佳实践与性能优化的文章 摘要: 就一些文章链接,就不多废话了. ...

  5. ASP.NET没有魔法——ASP.NET MVC 模型验证

    在前面的文章中介绍了用户的注册及登录功能,在注册用户时可以通过代码的形式限制用户名及密码的格式,如果不符合要求那么就无法完成操作,如下图: 该功能的原理是Identity基于的Entity Frame ...

  6. Detailed ASP.NET MVC Pipeline

    Posted By : Shailendra Chauhan, 27 Jan 2014 P.NET MVC is an open source framework built on the top o ...

  7. ASP.NET MVC轻教程 Step By Step 13——页面布局

    一般在一个网站中页面会使用相同的结构和元素,如果每个页面都要重复添加这些元素,不仅繁琐更会给我们后期维护带来大麻烦.所以我们采用网页模板之类的技术,将固定不变的元素放入模板,同时留下一些占位符供页面各 ...

  8. ASP.NET MVC 学习7、为Model Class的字段添加验证属性(validation attribuate)

    Adding Validation to the Model ,在Model中添加数据验证 参考:http://www.asp.net/mvc/tutorials/mvc-4/getting-star ...

  9. <转>ASP.NET学习笔记之MVC 3 数据验证 Model Validation 详解

    MVC 3 数据验证 Model Validation 详解  再附加一些比较好的验证详解:(以下均为引用) 1.asp.net mvc3 的数据验证(一) - zhangkai2237 - 博客园 ...

随机推荐

  1. UVa12333 Revenge of Fibonacci

    高精度 trie 暴力预处理出前100000个fibonacci数,将每个数的前40位数字串插入到trie中,记录每个结点最早可以由哪个数字串到达. 然后依次回答询问即可. 存fibonacci数的数 ...

  2. 金鹰教程网 FLASH8.0(AS)视频教程(下载地址)自认为最好的一个Flash教程

    原文发布时间为:2008-07-29 -- 来源于本人的百度文章 [由搬家工具导入] 可以用迅雷新建批量任务下载,很方便的。 金鹰教程网 FLASH8.0教学视频 到目前(2008年7月29日21:2 ...

  3. 机器人操作系统ROS Indigo 入门学习(1)——安装ROS Indigo【转】

    转自:http://blog.csdn.net/bobsweetie/article/details/43638761 Ubuntu14.04安装ROS Indigo 一.安装ROS 1.1配置Ubu ...

  4. 16深入理解C指针之---迷途指针

    一.若程序中存在迷途指针,轻则导致程序退出,重则使程序出现重大逻辑错误 1.定义:内存已释放,指针依旧指向原始内存,这种指针就是迷途指针 2.迷途指针和指针别名: 1).指针依旧指向已释放的内存,无法 ...

  5. express之中间件bodyParser的理解

    bodyParser用于解析客户端请求的body中的内容,内部使用JSON编码处理,url编码处理以及对于文件的上传处理.另外bodyParse也可以接受客户端ajax提交的json数据,以及url的 ...

  6. 小程序-TabBar点击切换

    这种页面的布局会经常用到,所以在此做个笔记,之后遇到可以节省很多时间 WXML: <view class='listTitle_tab'>      <view class='scr ...

  7. 如何让一个现有的程序集运行在Silverlight环境中

    故事是这样的:我们有一个组件,是一个标准的Class Library,里面有一些代码是实现了某些计算或者业务逻辑.例如下面这样 然后,我们做了一个Silverlight的应用程序,和一个用于运行该程序 ...

  8. see

    Description 问从点(0,0)能看到点(0,0)和(n,n)之间的矩形的多少个整数点,看到(x,y)代表点(0,0)和点(x,y)间没有其他整数点,如看不到(2,4)因为中间有点(1,2) ...

  9. 将压缩包文件(rar/zip)伪装成图片(jpg/gif/png/ico)

    1.在Windows上使用copy命令,缺点是只能是jpg文件,gif不支持,命令如下: copy in1.jpg+in2.rar out.jpg 2.网上说使用UEdit方式可以制作gif,但是测试 ...

  10. asp.net Excel导入&导出

    1.Excel数据导入到数据库中: //该方法实现从Excel中导出数据到DataSet中,其中filepath为Excel文件的绝对路径,sheetname为表示那个Excel表:        p ...