CODEWITHSUNDEEP
asp.netasp.net-mvcrazorhtml-helper
Mark Cassar
Mark Cassar

Reputation: 1852

Multiple ITemplate placeholders equivalent in ASP.Net MVC

I am new to ASP.Net MVC and have always been using Web Forms till now. I have found Replacement for ITemplate in MVC? which gives an example of creating an HTML helper named BeginBlock which wraps the title & content from:

@using (Html.BeginBlock("MY TITLE")) {
       MY CONTENT GOES HERE
}

to

<div>
  <div><h1>MY TITLE</h1></div>
</div>
MY CONTENT GOES HERE

I have a scenario where in Web Forms, we used to use multiple ITemplates to define containers within user controls which we then wrapped inside HTML, for example, in Web Forms, we could create a user control named Panel and have two ITemplate properties, one named Content and the other named ContentNonScrollable. We would then use the user control by using the following markup:

<MySite:Panel>
    <Content>
        Content 1 Goes Here
    </Content>
    <ContentNonScrollable>
        Content 2 goes here
    </ContentNonScrollable>
</MySite:Panel>

The user control would then output the following, HTML:

<div class="my-panel">
    <div class="my-panel-content">
        Content 1 Goes Here
    </div>
    <div class="my-scrollable-panel-content">
        Content 2 Goes Here
    </div>
</div>

Is there any way in MVC, where through HTML Helpers (or anything else), we can devise something equivalent to the above Web Forms example through markup within the .cshtml template file?

For example something like (obviously, the below doesn't have correct syntax, just to explain what we have in mind):

@using (Html.BeginPanel() {
       {
            Content 1 Goes Here
       }
       {
            Content 2 Goes Here
       }
}

Upvotes: 2

Views: 641

Answers (3)

Mark Cassar
Mark Cassar

Reputation: 1852

Thanks to @mystere who guided me towards templated delegates and Partial views which take a Model with variables which accept string with html markup, I have found the following workaround which is a good equivalent to what I had in mind within the above scenario.

Create a Partial View named _PanelPartial.cshtml and set the model to be of type _PanelPartialModel which contains the following properties:

public class _PanelPartialModel
{
    public Func<dynamic, HelperResult> Content { get; set; }
    public Func<dynamic, HelperResult> NonScrollableContent { get; set; }
}

Within the _PanelPartial.cshtml, you can then have something like the following:

@model _PanelPartialModel
<div class="my-testing-panel">
    <p>hello this is heading text</p>
    <div class="my-testing-panel-content">
        @Model.Content(null)
    </div>
    <p>And this is something in between madafuker!</p>
    <div class="my-testing-panel-scrollable-content">
        @Model.NonScrollableContent(null)
    </div>
    <p>and what about another footer!</p>
</div>

The @Model.Content(null)and @Model.NonScrollableContent(null) are invocations of the delegate variables within the model. These server as the placeholders.

Then whenever you need to make use of this panel, you can use something like:

@Html.Partial("_PanelPartial", new _PanelPartialModel() {
    Content = @<text>
                <div>This is the scrollable content</div>
          </text>, 
    NonScrollableContent = @<text>
                            <h2>This is non scrollable content</h2>
                       </text>
});

This would in the end generate the following HTML markup:

<div class="my-testing-panel">
    <p>hello this is heading text</p>
        <div class="my-testing-panel-content">
            <div>This is the scrollable content</div>
        </div>
    <p>And this is something in between madafuker!</p>
        <div class="my-testing-panel-scrollable-content">
            <h2>This is non scrollable content</h2>
        </div>
    <p>and what about another footer!</p>
</div>

Upvotes: 0

Erik Funkenbusch
Erik Funkenbusch

Reputation: 93494

You can use sections for this. Sections are designed for layouts (ie master pages) but you can nest master pages to create sectioned areas.

But, it sounds like you want to do this as a control of some type. Another option might be Templated Razor Delegates

Another option is Editor/Display Templates, although this isn't typically markup-only. You would use variables to pass the content.

Another option is just using a Partial View, and using ViewData to pass in the context sections.

There are actually a lot of different ways you can go about this, and which way you choose depends on your needs. Can you explain the specific circumstances?

Upvotes: 1

Ann L.
Ann L.

Reputation: 13975

I don't see why not. I haven't tried this myself, but since you can mix markup and script in a .cshtml page, you ought to be able to do something like 

@using (Html.BeginPanel()) { 
  @using(Html.BeginScrollableContent()) {
     Content 1 goes here
  }
  @using (Html.BeginNonScrollableContent()) {
     Content 2 goes here
  }
}

I looked at the post you reference (a good one, BTW) and you ought to be able to follow that example as far as implementation goes.

Upvotes: 0

Related Questions