Friday 18 September 2015

How to save image in database and display it into Views in MVC 4?

How to save image in database and display it into Views in MVC 4:-


  1. Creat an "Images" folder in Solution explorer.
  2. Create an ADO.NET Entity Data Model (in this example is "Database1Entities")
  3. Home Controller:
  1. namespace test2.Controllers
    {
    public class HomeController : Controller
    {
    public ActionResult Index()
    {
        return View();
    }
    
    public ActionResult FileUpload(HttpPostedFileBase file)
    {
    
        if (file != null)
        {
            Database1Entities db = new Database1Entities();
            string ImageName = System.IO.Path.GetFileName(file.FileName);
            string physicalPath =Server.MapPath("~/images/"+ ImageName);
    
            // save image in folder
            file.SaveAs(physicalPath);
    
            //save new record in database
            tblA newRecord = new tblA();
            newRecord.fname = Request.Form["fname"];
            newRecord.lname = Request.Form["lname"];
            newRecord.imageUrl = ImageName;
            db.tblAs.Add(newRecord);
            db.SaveChanges();
    
        }
        //Display records
        return RedirectToAction("../home/Display/");
    }
    
    public ActionResult Display()
    {
        return View();
    }
    }
    }
  2. Index View
    @{
       ViewBag.Title = "Index";
    }
    
    @using (Html.BeginForm("FileUpload", "Home", FormMethod.Post,
                        new { enctype = "multipart/form-data" }))
    {
    <div>
    First name<br />
    @Html.TextBox("fname") <br />
    Last name<br />
    @Html.TextBox("lname") <br />
    Image<br />
    <input type="file" name="file" id="file" style="width: 100%;" /> <br />
    <input type="submit" value="Upload" class="submit" />
    </div>    
    }
  3. Display View
    @{
        ViewBag.Title = "Display";
    }
    
    @{
       test2.Database1Entities db = new test2.Database1Entities();
    }
    @using (Html.BeginForm())
    {
    <table border="1">
    <thead>
        <tr>
            <th>Image</th>
            <th>First name</th>
            <th>Last name</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in db.tblAs)
        {
            <tr>
                <td><img src="~/images/@item.imageUrl" width="100" height="100" /></td>
                <td>@item.fname</td>
                <td>@item.lname</td>
            </tr>
        }
    </tbody>
    </table>
    }
Output:
/Home/
enter image description here
/home/Display/
enter image description here

No comments:

Post a Comment