Looking for alternate ways to create blocks of HTML code in ASP.NET MVC 3

Question

I'm not sure how to phrase my question, so I essentially want to be able to do something like this, in ASP.NET MVC 3:

@myJsHtmlCustomCode
{
    <div><h1>Title</h1></div>
}

where anything in that myJsHtmlCustomCode block would be surrounded with some custom JavaScript/HTML code that I wrote.

I know I could use something like myJsHtmlCustomCode.Begin() and myJsHtmlCustomCode.End() in my code, but that doesn't provide the same formatting structure.

If anyone knows of a similar way to achieve the same objective, and get the automatic outlining/indent formatting, that would be great.

Just for reference, I wanted the the @myJsHtmlCustomCode to surround the code with for instance, another <div id="myTestId" onclick="thisClickEvent"></div> for the resulting code to look like...

<div id="myTestId" onclick="thisClickEvent">    
    <div><h1>Title</h1></div>
</div>

It might help to include a sample of the kind of output you want. We can't read your mind. — Erik Funkenbusch
– Erik Funkenbusch, Commented Nov 12, 2011 at 23:06

GvS · Accepted Answer · 2011-11-13 16:37:22Z

2

Option 1

You can wrap your code in an object that implements IDisposable, just like you use @using (Html.BeginForm())

Your code could be like this:

public class MyJsHtmlCustomCode : IDisposable {
    private ViewContext _ctx; 

    public MyJsHtmlCustomCode (HtmlHelper html, /* other params */) {
       _ctx = html.ViewContext;
       /* Write begin tags */
        _ctx.Writer.Write("html => opening tags");        }

    public Dispose() {
        _ctx.Writer.Write("html => closing tags");
    }
}

and the extension:

public static MyJsHtmlCustomCode BeginMyJsHtmlCustomCode(this HtmlHelper html /* other params */) {
    var result = new MyJsHtmlCustomCode(html);
    return result;
}

Usage:

@using(Html.BeginMyMyJsHtmlCustomCode()) {
     <div>This is surrounded by your code </div>
}

Option 2

You can use Razor Templated Delegates:

@{
  Func<dynamic, object> b = @<strong>@item</strong>;
}
<span>This sentence is @b("In Bold").</span>
<div>@b(
   @<span>
       @DateTime.Now 
   </span><span>Example of more complex logic
   </span>
)</div>

edited Nov 13, 2011 at 16:37

answered Nov 13, 2011 at 16:28

GvS

52.5k16 gold badges104 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Brian Deragon Over a year ago

Perfect, just what I was looking for, was going to add more detail, but ended up having a baby over the weekend.

Aaron Silverman · Accepted Answer · 2011-11-12 21:13:01Z

1

While I must admit I do not completely understand your question, whenever I need to do programatic custom HTML manipulation in .Net MVC 3 I use the Html Agility Pack.

answered Nov 12, 2011 at 21:13

Aaron Silverman

22.7k21 gold badges89 silver badges106 bronze badges

Comments

PeterFearn · Accepted Answer · 2011-11-13 10:35:36Z

0

Could you achieve your desired result using @section ?

e.g.: in one cshtml, possibly the _Layout:

<script type="text/javascript">
// whatever you want
// more whatever you want
@RenderSection("jsCode", false)
// even more whatever you want
</script>

Then in your actual view cshtml:

@section jsCode{
   <div><h1>Title</h1></div>    
}

~~You could possibly use a partial view for the js bit e.g.~~

edited Nov 13, 2011 at 10:35

answered Nov 13, 2011 at 10:20

PeterFearn

3571 silver badge6 bronze badges

Collectives™ on Stack Overflow

Looking for alternate ways to create blocks of HTML code in ASP.NET MVC 3

3 Answers 3

Option 1

Option 2

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Option 1

Option 2

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related