Display Image In ASP.NET MVC

Step 9 - Next step is to add a view for detail action method so right click on this method -> add view -> Scaffold template as Detail,



Step 10 - At this position if you go to the following URL then it will not show you the image so for that we need to change in auto generate code in detail view.

http://localhost:3831/Home/Details/1

View Code is
Replace the above marking code with the following code,
We are using Url.Content() html helper method. This method resolves a url for a resource when we pass it the relative path.

Now run your application and output will be,

http://localhost:3831/Home/Details/1



Customize HTML helper in asp.net mvc

We are making image tag, by passing values of "src" and "alt" attributes. Like following,
Here if we want to create own HTML helper through that method we can pass image and alt text only using with that our view will not look complicated.MVC doesn’t have image() html helper so we can create it which accept image and alt text, like following,
Basically HTML helper return a string ,like for generating a text box we use following code,
So, here TextBox() is an extension method defined in HtmlHelper class. In the above code, Html is the property of the View, which returns an instance of the HtmlHelper class.

Now add, Image() extension method, to HtmlHelper class.

1. Right click on MVCDemoProject application and add a "CustomHtmlHelpers" folder.
   
   
2. Again Right click on "CustomHtmlHelpers" folder and add a with the name "CustomHtmlHelpers.cs".
   
   
3. Write the following code. TagBuilder class is available in System.Web.Mvc namespace.
   
   1. namespace MVCDemoProject.CustomHtmlHelpers
   2. {
   3. public static class CustomHtmlHelpers
   4. {
   5. public static IHtmlString Image(this HtmlHelper helper, string src, string alt)
   6. {
   7. // Build <img> tag
   8. TagBuilder tb = new TagBuilder("img");
   9. // Add "src" attribute
   10. tb.Attributes.Add("src", VirtualPathUtility.ToAbsolute(src));
   11. // Add "alt" attribute
   12. tb.Attributes.Add("alt", alt);
   13. // return MvcHtmlString. This class implements IHtmlString
   14. // interface. IHtmlStrings will not be html encoded.
   15. return new MvcHtmlString(tb.ToString(TagRenderMode.SelfClosing));
   16. }
   17. }
   18. }

To use the custom Image() html helper in Details.cshtml view, then include the following using statement in “Details.cshtml,

As we intend to use this Image() html helper, in all our views, let's include"MVCDemo.CustomHtmlHelpers" namespace in web.config. This eliminates the need to include the namespace, in every view.
If you intend to use the Image() custom html helper, only with a set of views, then, include a web.config file in the specific views folder, and then specify the namespace in it.