Geek asks and answers

How to upload / display images using ASP.net MVC4 with Entity Framework

I have such a data model

    public class NewsItem
{
    public virtual int Id { get; set; }
    public virtual string NewsTitle { get; set; }
    public virtual string NewsContent { get; set; }
    public virtual byte[] NewsImage { get; set; }
    public virtual DateTime DateAdded { get; set; }
    public virtual bool IsLive { get; set; }
}

Then I output this data through the view like this:

@model BusinessObject.Domain.NewsItem
<div class="row-fluid">
    <h3>
        @Html.ValueFor(model => model.NewsTitle)
    </h3>
    <div class="span5">
    <img src="~/Content/images/stock.jpg" />
    </div>

<div class="span7">
<p>
    @Html.ValueFor(model => model.DateAdded)
</p>
<p>
    @Html.ValueFor(model => model.NewsContent)
</p>
</div>
 </div>

Then I save the data using _db.SaveChanges () in my controller as follows:

[Authorize]
    [HttpPost]
    public ActionResult Create(CreateNewsViewModel input)
    {
        if (ModelState.IsValid)
        {
            var news = new NewsItem();
            news.NewsTitle = input.nTitle;
            news.NewsContent = input.nContent;
            news.DateAdded = input.nDateAdded;
            news.IsLive = input.nIsLive;
            Mydb data = new Mydb();
            data.NewsItems.Add(news);
            data.SaveChanges();
            return View("Index", data.NewsItems);

        }
        else
        {
            return View(input);
        }
    }

I currently do not have an image download bit. How can i do this? In my db, I have a binary field, and my data type in my object is byte []. But I don’t know where I need to handle image upload?

Do I need a separate action that returns a view? Some pointers to this would be great.

Greetings

+5
source share
3 answers

WebImage :

:

<input type="file" name="image" />

:

WebImage image = WebImage.GetImageFromRequest();
byte[] toPutInDb = WebImage.GetBytes();

// ... put the byte array into the database

, Action, FileAction. ( ), WebImage , :

WebImage image = new WebImage(byteArrayFromDb);

File(image.GetBytes(), "image/" + image.ImageFormat, image.FileName);
+9

:

:

 public class NewsItem
{
    public virtual int Id { get; set; }
    public virtual string NewsTitle { get; set; }
    public virtual string NewsContent { get; set; }
    public virtual string NewsImage { get; set; } //string instead of byte because you don't wanna store your whole image file in your database, but just the path of the image, and the image you will store in a folder somewhere on the server
    public virtual DateTime DateAdded { get; set; }
    public virtual bool IsLive { get; set; }
}

:

[Authorize]
    [HttpPost]
    public ActionResult Create(CreateNewsViewModel HttpPostedFileBase file)// add this 
    {
        if (ModelState.IsValid)
        {
            if (file != null)
            {
                file.SaveAs(HttpContext.Server.MapPath("~/Images/") + file.FileName);
                car.ImagePath = file.FileName;
            }
        // the rest of the code... 

        }
        else
        {
            return View(input);
        }
    }

:

:

<input id="NewsImage" title="Upload a image" type="file" name="file" />

foreach :

@Html.DisplayFor(modelItem => item.NewsImage)

enctype = "multipart/form-data" Html.BeginForm

, .

+3

Look at the jquery file downloader. You can find sample code for it.

Hope this helps

+1
source

More articles:


All Articles