Part 47 Displaying images in asp net mvc

Показать описание

In this video, we will discuss displaying images in MVC application. In Part 48, we will create a custom html helper to display images. We will be using the example, that we worked with in Part 46. We want to display Employee photo, along with the personal details.

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

Alter table tblEmployee to add Photo, and AlternateText columns.
Alter table Add Photo nvarchar(100), AlternateText nvarchar(100)

Update Photo and AlternateText columns
AlternateText = 'John Smith Photo' where Id = 1

1. Right click on "Employee" table and select "Update Model from database" option
2. On "Update Wizard" window, click on "Refresh" tab
3. Expand tables node, and select "tblEmployee" table
4. Finally click "Finish"

At this point, "Photo" and "AlternateText" properties must be added to the auto-generated "Employee" class.

Generate Details view
2. Right click on "Details" action method and select "Add View"
3. In "Add View" window, set
View Name = Details
View engine = Razor
Create a strongly typed view = Select the checkbox
Model class = Employee(MVCDemo.Models)
Scaffold template = Details

At this point, if you run the application, instead of rendering the photo, the PhotoPath and AlternateText property values are displayed.

Use the IMG tag as shown below. Notice that, we are using Url.Content html helper method. This method resolves a url for a resource when we pass it the relative path. Make sure to replace [ with LESSTHAN and ] with GREATERTHAN symbol.
[div class="display-label"]
@Html.DisplayNameFor(model =] model.Photo)
[/div]
[div class="display-field"]
[/div]

Run the application, and notice that, the image is rendered as expected. In our next video, we will discuss creating a custom html image helper.

Text version of the video

Slides

All ASP .NET MVC Text Articles

All ASP .NET MVC Slides

All Dot Net and SQL Server Tutorials in English

All Dot Net and SQL Server Tutorials in Arabic

Рекомендации по теме

Комментарии

The whole year lecture in 1 hour, Thank You, Sir.

ceejayviii

This video is short and sweet and we need not spend lots of time to learn. It's sharp and crisply explained. I enjoyed this video and also I recommend for others to watch for learning. Thanks a lot

krismaly

This video is priceless for me and thank you very much. I had so much trouble displaying images from db but now it all works like a charm. Thanks again

nenadjanicijevic

Thank you for this tutorial. It really helped me :) So glad to have you!

metekaba

Dear Sir,

Really very helpful tutorial .

sachingreat

Hi, for the alt attribute, you don't have to use, @Url.Content html helper. I also see that you are setting both alt and src attributes to the same property of the Model object. Any specific reasons for doing so. What path does the Image property of your Model object is returning, and do you have an Image at that path. Hope, you now have some pointers to fix the issue. Let me know, if there is anything else that I can help with. Good Luck.

Csharp-video-tutorialsBlogspot

Great videos. You really like font family Arial, don't you:)

emredurmus

To receive email alerts, when new videos are uploaded, please subscribe to my youtube channel. May I ask you for a favour. I want these tutorials to be helpful for as many people as possible. Please share the link with your friends and family who you think would also benefit from them. If you like these videos, please click on the THUMBS UP button below the video.

Csharp-video-tutorialsBlogspot

Hello Venkat, Could you please suggest me a blog or a video where i can find the way of uploading or downloading a file in sql using mvc.
In my current project i have generated a wcf service application which exposes all my methods using ado.net. further i was trying to consume that service in mvc and i was looking a way where i can upload and download a file using that service.

sureshkanathala

I want to upload multiple image & displaying it simulteneously so what should make a change in code. please help me if business logic is used for upload image.

dollykumari

Thanks Kudvenkat for this video . suppose photo field have image name not path then how i display image what i add in code ??

jdshah

I have a hard time to upload images to the local project (asp.net mvc4) and store the path into the sql server ...! im a beginner for this ...! please help me..!

vicheakachrin

Very nice tutorial do we download these codes?

sachingreat

(model=>model.photo) here 'photo' is which datatype string or byte????

veeramuthudotnetveera

will you kindly tell me how to create dropdownlist & images in single view....dropdownlist work but image path not get ?
plz solve this error:
'Object reference not set to an instance of an object.'
returned null

osafaptech

Hi,
Please let me know how we can display row wise images in datatable . Currently my code is like this
"columns": [
{ "data": "FirstName", "autoWidth": true },
{ "data": "LastName", "autoWidth": true },
In this way i am showing columns in data table . Please let me know how i manage column for image .

Thanks in Advance

sachingreat

I want to display more than a one image

dollykumari

can you add a tutorial when you click the image it will display bigger
Thank you.

alfredjose

This is my code but not displaying image, It will display only Name of the image.

@Html.DisplayNameFor(model => model.Image)

Googlepaynnn

Part 47 Displaying images in asp net mvc