MVC 3 Razor, Helpers with custom markup/section

Question

I'm not even sure if this is possible, but I thought I would check to see if there is any way to make this easier.

First, I have some repeated markup in my site that looks like this:

<div class="module">
    <h3>Title</h3>
    <div>
        <p>Information goes here</p>
    </div>
</div>

What I want to do is wrap this up in some kind of helper/section so that I could do something like this

@MyHelper("This is my Title") {
    <p>Here is my custom markup</p>
}

Then, when it renders, it would inject the title passed in through the parameter between the <h3></h3> and the custom markup in the divs. The custom markup could be anything from test, to form controls, to a partial view. Is this something that is possible?

score 15 · Answer 1 · edited May 23 '17 at 12:31

15

There's also the other way, without disposable trick, which also requires a little less work, great for little helpers.

@helper MyHelper(string title, Func<object, object> markup) {
    <div class="module">
        <h3>Title</h3>
        <div>
            <p>@markup.DynamicInvoke(this.ViewContext)</p>
        </div>
    </div>
}

Usage of this helper looks like this:

@MyHelper("This is my Title", 
    @<p>Here is my custom markup</p>
)

Or with multiple lines:

@MyHelper("This is my Title", 
    @<text>
        <p>More than one line</p>
        <p>Of markup</p>
    </text>
)

Telerik MVC controls used this trick for example to let you add your javascript code at the document load.

Here's also a nice example. There's also some information here.

edited May 23 '17 at 12:31

Community

1
1

answered Dec 10 '12 at 13:27

slawek

2,709
1
25
29

I like this example. Appears to be much easier to implement. Can you help me resolve one issue? this.ViewContext doesn't compile because the MyHelper method is static (at least as I have set it up in my helper). – Ben Gripka Jan 05 '13 at 08:11
1

Surprisingly it tend to work as well if you pass it null, but maybe there could be some complex scenario which would crash. Anyway you should be able to get access to ViewContext via Htmlhelper object (if your static method is html extension method you should have access to it) using property ViewContext. If this is not the case, you could pass ViewContext to the method manually. – slawek Jan 06 '13 at 23:29
Thank you for the response. Passing null worked. I think the reason my code didn't have access to ViewContext is because I'm building a MVC site instead of application. It is working now. I believe your answer the best because it is simple and works. – Ben Gripka Jan 07 '13 at 06:01

JimmiTh · Accepted Answer · 2012-02-01T07:58:22.787

Well, here's a "standard" way of doing something close to it, using an HTML helper extension. A very simple version of what Html.BeginForm() does.

Approach: Simply return an IDisposable, and let the using statement take care of the rest.

This is just an example of the concept (although it works). Not intended for immediate reuse. Written quickly with lots of shortcuts, not production code, plenty of opportunities for improvement and optimization, may have silly mistakes, could use TagBuilder etc. etc. Could easily be modified to reuse the Wrapper class for different... wrappings (there may even be a generic one already in ASP.NET MVC - haven't had a need for one).

public static class WrapHelper
{
    private class Wrapper : IDisposable
    {
        private bool disposed;
        private readonly TextWriter writer;

        public Wrapper(HtmlHelper html)
        {
            this.writer = html.ViewContext.Writer;
        }

        public void Dispose()
        {
            if (disposed) return;

            disposed = true;

            writer.WriteLine("  </div>");
            writer.WriteLine("</div>");
        }
    }

    public static IDisposable Wrap(this HtmlHelper html, string title)
    {
        TextWriter writer = html.ViewContext.Writer;

        writer.WriteLine("<div class=\"module\">");
        writer.WriteLine("  <h3>" + html.Encode(title) + "</h3>");
        writer.WriteLine("  <div>");

        return new Wrapper(html);
    }
}

Usage:

@using (Html.Wrap("Title"))
{
    <p>My very own markup.</p>
}

There is a simpler example at http://stackoverflow.com/questions/7196276/creating-mvc3-razor-helper-like-helper-beginform — Jamie Kitson, Mar 07 '13 at 11:14
I have a hard time seeing what makes it simpler, considering the solution is exactly the same... The only additional code in this example is there in order to meet the requirements in the question - and a rudimentary check to avoid side effects of Dispose being called twice. — JimmiTh, Mar 07 '13 at 12:07

score 3 · Answer 3 · answered Sep 29 '12 at 17:34

@TheKaneda, Thanks for the insight. I took your idea and extended it, such that you supply a PartialView name and it knows how to parse it.

<Extension()> _
Public Function UseTemplate(ByVal html As HtmlHelper, ByVal PartialView As String) As IDisposable
    Return New TemplateWrapper(html, PartialView)
End Function

Public Class TemplateWrapper
    Implements IDisposable

    Private _HtmlHelper As HtmlHelper

    'Index 0 is header
    'Index 1 is footer
    Private _TemplateWrapper As String()

    Public Sub New(ByVal Html As HtmlHelper, ByVal PartialView As String)

        _TemplateWrapper = Html.Partial(PartialView).ToHtmlString.Split("@@RenderBody()")

        _HtmlHelper = Html
        _HtmlHelper.ViewContext.Writer.Write(_TemplateWrapper(0))

    End Sub

    Public Sub Dispose() Implements IDisposable.Dispose

        _HtmlHelper.ViewContext.Writer.Write(_TemplateWrapper(1).Substring(12))

    End Sub

End Class

Use the same usage as @TheKaneda's example. In your partial view, instead of calling @RenderBody(), just put @@RenderBody() which acts as a flag for the middle part of your content. Sorry for the VB translation.

Uses an example of my usage.

Using Html.UseTemplate("ContentWrapper")

    @Html.EditorFor(Function(m) m.Var1, "TemplateHint")
    @Html.EditorFor(Function(m) m.Var2, "TemplateHint")
    @Html.EditorFor(Function(m) m.Var3)

End Using

My Partial looks like this...

<div class="content"> 
    @@RenderBody()
</div>

score 0 · Answer 4 · answered Feb 01 '12 at 08:16

0

If you are using Razor and MVC 3 it's real easy to write a quick helper method that would go inside the app_code folder, (I'll name it MyHtmlHelpers)

I'd try something a little different and a little easier such as:

@helper myTemplate(string title, string markup){
    <div class="module">
        <h3>@title</h3>
        @markup
    </div>
}

And the way you use it from a .cshtml file is as followed:

@MyHtmlHelpers.myTemplate('title','markup')

It should work, if I understand you correctly.

answered Feb 01 '12 at 08:16

oamsel

475
3
10

1

I don't want the markup to be a string parameter, because I want to have the markup as regular html in my view. What I am looking to do is mimic with a helper in MVC 3 how in MVC 2 you could have `<% using(Html.Beginform()) { %> html markup <% } %>` – Josh Feb 01 '12 at 14:00

MVC 3 Razor, Helpers with custom markup/section

4 Answers4

Linked