asp.net core docker 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.blogspo...

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.blogspo...

Slides
http://csharp-video-tutorials.blogspo...

All ASP .NET MVC Text Articles
http://csharp-video-tutorials.blogspo...

All ASP .NET MVC Slides
http://csharp-video-tutorials.blogspo...

All Dot Net and SQL Server Tutorials in English
https://www.youtube.com/user/kudvenka...

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

asp.net core docker Part 47 Displaying images in asp net mvc
279 Likes	279 Dislikes
137,114 views views	524K followers
Education	Upload TimePublished on 2 Jul 2013

Related keywords

wcf vs web api,ado.net core,sql server management studio,webkinz,webadvisor,craigslist nj,wcf one piece,asp.net core 3,ajax players,weber grill parts,webtoon,tutorials by hugo,csharp corner,mvc design pattern,asp.net machine account,servers for minecraft,asp.net core dependency injection,ado.net tutorial,services angular,ajax ontario,application engineer,asp.net mvc tutorial,asp.net cos'è,csharp assembly,tutorialspoint python,sql join,services briefcase,asp.net core web api,ajax jquery,wccftech,craigslist ny,asp.net zero,csharp foreach,server memes,sql date format,services online,chase,serverless architecture,server resume,wcf c#,server books,tutorialspoint javascript,mvcc connect,ado.net mysql,services technologies gps,ajax deadpool,server jobs,cvs,website,mvc tutorial,costco hours,application gateway,wcf service application,application for employment,tutorialspoint spring,serverless,wcf soap,application for passport,wcf cat,cool math games,wcf test client,services & training hse colombia sas,servicestack,citibank,asp.net core identity,sql union,ajax parking,sql database,asp.net core logging,mvconnect,cunyfirst,asp.net guida,application programming interface,wcf nba,csharp download,wcfi foundation,csharp online,wcf authentication,tutorials near me,http://asp.net,server 2019,chernobyl,ado.net descargar,web of dreams,serverminer,ajax cleaner,ado.net visual studio 2019,application definition,webassign,ado.net vs entity framework,ado.net visual studio 2017,csharp list,sql like,asp.net mvc,asp.net core tutorial,application for walmart,sqlite,wcfm,ajax roster,mvc architecture,application for us passport,http://ado.net,application for housing,asp.net core mvc,ajax soccer,server hosting,application for social security card,wcfi,ajax dish soap,capital one,server rack,tutorialspoint html,csharp interface,craigslist,webroot,tutorialspoint reactjs,ajax request,wcf dragon ball,asp.net core 2.2,tutorialspoint python 3,sql developer,webster,services transmission company sas,sql group by,asp.net core signalr,services manager,mvc framework,ajax paving,mvc near me,tutorialspoint spring boot,application for us citizenship,mvc map,csharp online compiler,asp.net download,sql between,ado.net c# pdf,services tag dell,application for naturalization,wcf 2019 nba,csharp switch,ado.net ventajas y desventajas,csharpstar,application manager,wcf tutorial,application letter,tutorialspoint,ajax meaning,csharp-video-tutorials.blogspot,tutorials dojo,central park 5,csharp string format,ado.net c#,asp.net core github,server status,ajax fc,server jobs nyc,asp.net core swagger,sql formatter,credit karma,services group,server error in '/' application,application form,services windows,asp.net core 3.0,sql injection,tutorialspoint c#,wcf ria services,calculator,ado.net entity data model,sql insert,tutorialspoint tableau,services google play apk,sqlyog,asp.net core 3 release date,sql server,server job description,tutorials by a,servicenow,webcam,mvc hours,webmd symptom,csharp array,csharp enum,ajax call,asp.net core 2. guida completa per lo sviluppatore,application software,asp.net core,server pro,server status ffxiv,cheap flights,webcrims,asp.net core hosting,services sas,tutorialspoint java,tutorialspoint java compiler,webmd,csharp to json,college football,ado.net dataset,csharp dictionary,cnn,website builder,tutorialspoint sql,asp.net web api,server side rendering,weber grills,sql server 2017,tutorialspoint spark,mvc nj,ado.net oracle,asp.net core download,csharp to vb.net,webster bank,webstaurant,tutorialsystems,ajax post,services fms publish announcement,services.msc no abre,ajax jersey,csharp operator,asp.net core razor pages,server duties,asp.net core environment variables,csharp random,century 21,application for section 8,services consultores,services consulting,mvcsd,services.msc,mvcsc,ado.net pdf,asp.net core configuration,ajax marvel,sql update,asp.net tutorial,mvc medical,ado.net entity data model visual studio 2019,wcfs international curriculum,application synonym,mvc2,ado.net entity data model visual studio 2017,chase online,wcf api,costco,server jobs near me,webex,sql meaning,sql tutorial,application support center,sql commands,ado.net entity framework,ajax tavern,tutorialsteacher,ajax javascript,services desk,ajax greek,csharp tutorial,mvc pattern,ado.net sql server,ado.net connection,asp.net identity,mvcu,asp.net core middleware,wcf web service,application for food stamps,mvc webadvisor,web store,mvcc,webmail,mvci,mvctc,