I have been started programming MVC again at work after many years focusing more on WPF. So I came accross a class called 'TagBuilder'. This is a handy class for generating markup programatically.
Let us create a HTML helper that renders an image tag. It can use TagBuilder to achieve this.
First off, we create the HTML helper like this:
using System.Web;
using System.Web.Mvc;
namespace HelloTagBuilderDemo.Helpers
{
/// <summary>
/// Sample usage of TagBuilder in MVC
/// </summary>
public static class HtmlHelpers
{
/// <summary>
/// Generates an IMG element which is self-closing and uses as src the given path pointing to an image file with a relative path within the web application
/// and with alternate text
/// </summary>
/// <param name="path"></param>
/// <param name="alternateText"></param>
/// <returns></returns>
// ReSharper disable once UnusedParameter.Global
// ReSharper disable once InvalidXmlDocComment
public static IHtmlString Image(this HtmlHelper htmlHelper, string path, string alternateText)
{
var builder = new TagBuilder("img");
// ReSharper disable once StringLiteralTypo
builder.Attributes.Add("src", VirtualPathUtility.ToAbsolute(path));
builder.Attributes.Add("alt", alternateText);
var markupResult = builder.ToString(TagRenderMode.SelfClosing);
return new MvcHtmlString(markupResult);
}
}
}
We make use of the VirtualPathUtility.ToAbsolute method to convert a virtual path to an absolute path.
Then we make use of the html helper inside a MVC view like this:
@{
ViewBag.Title = "Home Page";
}
@using System.Web.Mvc.Html
@using HelloTagBuilderDemo.Helpers
<div class="jumbotron">
<h1>ASP.NET</h1>
<p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
<p><a href="https://asp.net" class="btn btn-primary btn-lg">Learn more »</a></p>
</div>
<div class="row">
<div class="col-md-4">
<h2>Getting started</h2>
<p>Harold is at it again, making clones of himself to inflict multiple pain.</p>
</div>
<div class="col-md-4">
@Html.Image(@"~/Images/haroldatitagain.jpg", "Harold")
</div>
</div>
And now we have our resulting HTML helper at display, showing also in the screen grab the markup the HTML helper generated for us.
[1] Tagbuilder on MSDN:
https://docs.microsoft.com/en-us/dotnet/api/system.web.mvc.tagbuilder?view=aspnet-webpages-3.2
No comments:
Post a Comment