
April 16, 2015 08:42 by
Peter
Today I worked on a project wherever i'm needed to show a picture on the web page with ASP.NET MVC. As you recognize there's not a hypertext markup language Helper for pictures yet. check out the following screen, we will not see a picture here:

Before proceeeding during this article, let me share the sample data source here:
Data Source & Controller

View

As in the above image, the first one (@Html.DisplayFor…) is generated by scaffolding on behalf of me (marked as a comment within the above view) and the second one is an alternative that may work. So, we do not have a hypertext markup language helper to manage pictures exploitation Razor syntax! We will develop an extension method for this that will allow us to work with pictures. Let's start.
Now, Add a class file using the following code: using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MvcApplication8.Models
{
public static class ImageHelper
{
public static MvcHtmlString Image(this HtmlHelper helper, string src, string altText, string height)
{
var builder = new TagBuilder("img");
builder.MergeAttribute("src", src); builder.MergeAttribute("alt", altText);
builder.MergeAttribute("height", height);
return MvcHtmlString.Create(builder.ToString(TagRenderMode.SelfClosing));
}
}
}
The above "Image" function has the "MvcHtmlString" type and can settle for a four-parameter helper (helper sort "image"), src (image path), altText (alternative text) and height (height of image) and will return a "MvcHtmlString" type. In the view, comment-out the last line (HTML style approach) and use the new extended technique for the image, as in:

Note: Please note to use "@using MvcApplication8.Models" namespace on every view page to enable this new HtmlHelper. If you set a breakpoint on the extension method then you'll notice that the method returns the exact markup that we need.

Free ASP.NET MVC Hosting
Try our Free ASP.NET MVC Hosting today and your account will be setup soon! You can also take advantage of our Windows & ASP.NET Hosting support with Unlimited Domain, Unlimited Bandwidth, Unlimited Disk Space, etc. You will not be charged a cent for trying our service for the next 3 days. Once your trial period is complete, you decide whether you'd like to continue.
