Last Updated: 3/3/2018 Background I dipped my toes into the ASP.NET ecosystem in 2004—a time during which the Web Forms application model’s popularity was fueled by a cult-like following. In […]
Last Updated: 3/3/2018
Web Forms boasts a plethora of robust, native server controls—LinkButton and GridView, to name a few. This suite of controls remains one of the most appealing facets of Web Forms today, through its enablement of rapid web application development.
Fast forward to early 2011. My knowledge of web standards had progressed, and I wanted to employ those skills in my day job. I began evaluating MVC 3 as the application model successor for my future project work. One thing became clear. The Web Forms philosophies posed a significant barrier to entry. I longed for the server controls which Web Forms provided out of the box. Convincing my frugal manager to purchase a third-party suite of controls was improbable.
Web Forms may have become passé to many of us, yet certain elements strongly influence the seasoned ASP.NET developers of today. The LinkButton control is one such element which has left a legacy. For various reasons, I’ve since moved on from ASP.NET 4.x to ASP.NET Core—a reinvigorated framework in which Web Forms doesn’t exist.
Where am I going with this? I was recently chatting with a friend and colleague at Microsoft, Isaac Levin. Isaac was working with a customer on an ASP.NET Core Razor Pages application and wondered whether the Anchor Tag Helper offers a mechanism for posting a form.
To put this into perspective, consider the following page model in a Razor Pages application:
|public class IndexModel : PageModel|
|public void OnGet()|
|public void OnPost()|
The page model’s associated Index.cshtml file contains the following markup:
|<button asp-page="/Index" asp-page-handler="Post">Submit Form</button>|
Upon clicking the Submit Form button, the page model’sOnPost method is invoked. Wouldn’t it be nice if we had this same behavior with an anchor tag?
Web Forms provides this functionality via the LinkButton. Consider the following markup:
|<asp:LinkButton ID="lbtnSubmit" runat="server" PostBackUrl="~/About.aspx" Text="Submit Form" />|
The preceding code snippet resides in Default.aspx, which is injected into a master page containing a form. This LinkButton control posts the parent form, contained within the master page, to About.aspx upon clicking the associated Submit Form link. It’s the PostBackUrl property that we’re seeking in ASP.NET Core.
I created a custom LinkButtonTagHelper class, appropriately named after the Web Forms control from which the idea was born. As an aside, I’ve blogged about Tag Helper creation before here. And to avoid rehashing how to build a Tag Helper, I encourage you to visit the definitive source here.
To briefly recap my solution, I created the following C# class:
It’s the Process method that does the heavy lifting. Notice it produces an anchor tag and attaches an onclick event. The onclick event finds a hidden field, which is also added by this Tag Helper, and submits the hidden field’s parent form.
I configured CI and CD in VSTS via a build and a release definition, which are responsible for building the Tag Helper and packing & publishing a NuGet package. The fruits of that labor are found in the TagHelperSuite NuGet package.
After installing the TagHelperSuite package, the LinkButtonTagHelper is registered with the following directive:
|@addTagHelper *, TagHelperSuite|
The Web Forms LinkButton behavior is restored by using the <link-button> tag inside of a form:
For more details on this solution, see the associated GitHub repository here.