-->

Wednesday, June 8, 2016

Save and Retrieve Image into database table in ASP.NET MVC

Save and Retrieve Image into database table in ASP.NET MVC

According to my previous article, Which is written in web form. If you are a web form user then try this article. In this article i will show you, How to save image file into database table using ASP.NET MVC, also retrieve image from table to ASP.NET MVC Application. You know that image file saved in the form binary array. So, First to create a table, in which you can take varbinary(max) type field. I will give you an example of simple table.

CREATE TABLE [dbo].[Brand] (
    [BrandId]    INT             IDENTITY (1, 1) NOT NULL,
    [BrandImage] VARBINARY (MAX) NULL,
    PRIMARY KEY CLUSTERED ([BrandId] ASC)
);



Now, Add a EDMX file to prepare a DataContext as well as model. Now, open a HomeController.cs file to write the code for save file. In this file first to pass model in the view. Add a file control in the view file.




@using (Html.BeginForm("AddImage", "Home", FormMethod.Post, new {enctype="multipart/form-data"}))
{
    @Html.AntiForgeryToken()
    
    <div class="form-horizontal">
        <h4>Brand</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.BrandImage, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <input type="file" id="image1" name="image1"/>
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Submit" class="btn btn-default" />
            </div>
        </div>
    </div>
}

Save file using controller file 

public ActionResult AddImage(Brand model, HttpPostedFileBase image1)
        {
            var db = new Database1Entities3();
            if (image1!=null)
            {
                model.BrandImage = new byte[image1.ContentLength];
                image1.InputStream.Read(model.BrandImage, 0, image1.ContentLength);
                
            }
            db.Brands.Add(model);
            db.SaveChanges();
            return View(model);
        }


Show Image using controller file 

 public ActionResult ShowImage()
        {
            Database1Entities3 db = new Database1Entities3();
            var item = (from d in db.Brands
                        select d).ToList();

            return View(item);
        }
ShowImage View section

@model IEnumerable<WebApplication1.Brand>

@{
    ViewBag.Title = "ShowImage";
}

<h2>ShowImage</h2>
<table>
    <tr>
        @foreach (var item in Model)
        {
        <td>



            @{
            var base64 = Convert.ToBase64String(item.BrandImage);
            var imgSrc = String.Format("data:image/gif;base64,{0}", base64);
            }
            <img src='@imgSrc' style="max-width:100px; max-height:100px;" />
        </td>
        }


    </tr>
</table>

Read other related articles

Also read other articles

© Copyright 2013 Computer Programming | All Right Reserved