c# - Showing Image on Index.cshtml page with Entityframework -

c# - Showing Image on Index.cshtml page with Entityframework -

i have this:

controller:

[httppost] public actionresult edit(userprofile userprofile, httppostedfilebase file) { if (file != null && file.contentlength > 0) { // extract fielname var filename = path.getfilename(file.filename); // store file within ~/app_data/uploads folder var path = path.combine(server.mappath("~/app_data/uploads"), filename); path = url.content(path.combine("~/~/app_data/uploads", filename)); file.saveas(path); } if (modelstate.isvalid) { string username = user.identity.name; // userprofile userprofile user = db.userprofiles.firstordefault(u => u.username.equals(username)); // update fields user.image = new byte[file.contentlength]; file.inputstream.read(user.image, 0, file.contentlength); user.firstname = userprofile.firstname; user.lastname = userprofile.lastname; user.email = userprofile.email; user.motto = userprofile.motto; user.placeofbirth = userprofile.placeofbirth; user.howmanybikes = userprofile.howmanybikes; user.besideyourbeth = userprofile.besideyourbeth; user.nicestride = userprofile.nicestride; user.worstride = userprofile.worstride; user.amountkmperyear = userprofile.amountkmperyear; user.averagespeed = userprofile.averagespeed; user.abletochatwhileriding = userprofile.abletochatwhileriding; user.phonenumber = userprofile.phonenumber; db.entry(user).state = entitystate.modified; db.savechanges(); homecoming redirecttoaction("edit", "account"); } homecoming view(userprofile); }

and view:

@foreach (var item in model) { <tr> <td> @html.displayfor(modelitem => item.lastname) </td> <td> @html.displayfor(modelitem => item.firstname) </td> <td> @html.displayfor(modelitem => item.motto) </td> <td> @html.displayfor(modelitem => item.placeofbirth) </td> <td><img width="200px" height="150px" src="@url.content(item.image)" /></td> <td> @html.actionlink("details", "details", new { id = item.id }) </td> </tr> } </table> </div> </div> <br /> page @(model.pagecount < model.pagenumber ? 0 : model.pagenumber) of @model.pagecount @html.pagedlistpager(model, page => url.action("index", new { page, sortorder = viewbag.currentsort, currentfilter = viewbag.currentfilter }))

so want show image in de index file, thumbnail. image saved in database, , seek show image this: <td><img width="200px" height="150px" src="@url.content(item.image)" /></td> doesnt work.

thank help

and have index, this:

@foreach (var item in model) { <tr> <td> @html.displayfor(modelitem => item.lastname) </td> <td> @html.displayfor(modelitem => item.firstname) </td> <td> @html.displayfor(modelitem => item.motto) </td> <td> @html.displayfor(modelitem => item.placeofbirth) </td> <td> <img width="200" height="150" src="@url.action("getimage", "account", new { item.id })"> </td> <td> @html.actionlink("details", "details", new { id = item.id }) </td> </tr> }

but in chrome , see dimensions of: img 74x22 , unusual because image comming from:

img { background-image: url('../images/large.jpg'); background-repeat: no-repeat; background-position: top; background-size: cover; width: 100%; height: 100%;

so every profile images same, images stored in: ~/app_data/uploads.

oke, uncomment img{} in site.css , see right dimensions, images broken

get http://localhost:41787/account/getimage/34 500 (internal server error) account:179 event.returnvalue deprecated. please utilize standard event.preventdefault() instead.

the accountcontroller looks this:

[httppost] public actionresult edit(userprofile userprofile, httppostedfilebase file) { if (file != null && file.contentlength > 0) { // extract fielname var filename = path.getfilename(file.filename); // store file within ~/app_data/uploads folder var path = path.combine(server.mappath("~/app_data/uploads"), filename); // path = url.content(path.combine("~/~/app_data/uploads", filename)); file.saveas(path); } if (modelstate.isvalid) { string username = user.identity.name; // userprofile userprofile user = db.userprofiles.firstordefault(u => u.username.equals(username)); // update fields user.image = new byte[file.contentlength]; file.inputstream.read(user.image, 0, file.contentlength); user.imagemimetype = file.contenttype; user.firstname = userprofile.firstname; user.lastname = userprofile.lastname; user.email = userprofile.email; user.motto = userprofile.motto; user.placeofbirth = userprofile.placeofbirth; user.howmanybikes = userprofile.howmanybikes; user.besideyourbeth = userprofile.besideyourbeth; user.nicestride = userprofile.nicestride; user.worstride = userprofile.worstride; user.amountkmperyear = userprofile.amountkmperyear; user.averagespeed = userprofile.averagespeed; user.abletochatwhileriding = userprofile.abletochatwhileriding; user.phonenumber = userprofile.phonenumber; db.entry(user).state = entitystate.modified; db.savechanges(); homecoming redirecttoaction("edit", "account"); } homecoming view(userprofile); } public filecontentresult getimage(int itemid) { userprofile user = db.userprofiles.firstordefault(u => u.id.equals(itemid)); if (user != null) homecoming file(user.image, user.imagemimetype); else homecoming null; }

and view(index.cshtml):

@foreach (var item in model) { <tr> <td> @html.displayfor(modelitem => item.lastname) </td> <td> @html.displayfor(modelitem => item.firstname) </td> <td> @html.displayfor(modelitem => item.motto) </td> <td> @html.displayfor(modelitem => item.placeofbirth) </td> <td> <img width="200" height="150" src='@url.action("getimage", "account", new { item.id }, request.url.scheme)'> </td> <td> @html.actionlink("details", "details", new { id = item.id }) </td> </tr> }

but correct??

<td> <img alt="" src="@url.action("getimage", "account", new {item.id })" width="200" height="150" class="image" /> </td>

instead of

<img width="200px" height="150px" src="@url.content(item.image)" />

put

<img width="200px" height="150px" src="@url.action("getimage", "account", new { item.id })

add in business relationship controller method :

public filecontentresult getimage(int itemid) { userprofile user = db.userprofiles.firstordefault(u => u.id.equals(itemid)); if(user != null) homecoming file(user.image, user.imagemimetype); else homecoming null; }

you must add together new field user table , imagemimetype.

in section

// update fields user.image = new byte[file.contentlength]; file.inputstream.read(user.image, 0, file.contentlength);

add

user.imagemimetype = file.contenttype;

and that's it.

hope helps.

c# asp.net entity-framework razorengine