asp.net mvc tutorial for beginners

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.

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

Update Photo and AlternateText columns
Update tblEmployee set Photo=’~/Photos/JohnSmith.png’,
AlternateText = ‘John Smith Photo’ where Id = 1

Right click on the solution explorer and add “Photos” folder. From my blog download JohnSmith.png and add to “Photos” folder.
http://csharp-video-tutorials.blogspot.com/2013/07/part-47-displaying-images-in-aspnet-mvc.html

Now, in MVCDemo project, update SampleDataModel.edmx.
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
1. Delete “Details.cshtml” view, if it already exists.
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”]
[img src=”@Url.Content(@Model.Photo)” alt=”@Model.AlternateText” /]
[/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
http://csharp-video-tutorials.blogspot.com/2013/07/part-47-displaying-images-in-aspnet-mvc.html

Slides
http://csharp-video-tutorials.blogspot.com/2013/09/part-47-displaying-images-in-mvc.html

All ASP .NET MVC Text Articles
http://csharp-video-tutorials.blogspot.com/p/aspnet-mvc-tutorial-for-beginners.html

All ASP .NET MVC Slides
http://csharp-video-tutorials.blogspot.com/p/aspnet-mvc-slides.html

All Dot Net and SQL Server Tutorials in English
https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd

All Dot Net and SQL Server Tutorials in Arabic
https://www.youtube.com/c/KudvenkatArabic/playlists