MVC partial views with custom content

Question

In WebForms, I could create a component where I could embed my own content

Example

<uc:BootstrapModal Title="Hello World" Size="Large">
    <h1>Hello World</h1>
</uc:BootstrapModal>

<!--generates this...-->

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <h1>Hello World</h1>
        </div>
    </div>
</div>

How can I do this in MVC?

Answer 1

You can create a HtmlHelper extension method to generate the enclosing html, similar to the way BeginForm() generates enclosing <form></form> tags.

using System;
using System.Web.Mvc;

namespace YourAssembly.Html
{
    public class Dialog : IDisposable
    {
        private readonly ViewContext _viewContext;
        private bool _disposed;

        public Dialog(ViewContext viewContext)
        {
            if (viewContext == null)
            {
                throw new ArgumentNullException("viewContext");
            }
            _viewContext = viewContext;
        }
        public void Dispose()
        {
            Dispose(true);
            GC.SuppressFinalize(this);
        }
        protected virtual void Dispose(bool disposing)
        {
            if (!_disposed)
            {
                _disposed = true;
                DialogExtensions.EndDialog(_viewContext);
            }
        }
        public void EndDialog()
        {
            Dispose(true);
        }
    }

    public static class DialogExtensions
    {
        public static Dialog BeginDialog(this HtmlHelper htmlHelper)
        {
            return DialogHelper(htmlHelper);
        }
        private static Dialog DialogHelper(this HtmlHelper htmlHelper)
        {
            TagBuilder div = new TagBuilder("div");
            div.AddCssClass("modal fade bs-example-modal-lg");
            div.MergeAttribute("tabindex", "-1");
            div.MergeAttribute("role", "dialog");
            htmlHelper.ViewContext.Writer.Write(div.ToString(TagRenderMode.StartTag));

            div = new TagBuilder("div");
            div.AddCssClass("modal-dialog modal-lg");
            htmlHelper.ViewContext.Writer.Write(div.ToString(TagRenderMode.StartTag));

            div = new TagBuilder("div");
            div.AddCssClass("modal-content");
            htmlHelper.ViewContext.Writer.Write(div.ToString(TagRenderMode.StartTag));

            Dialog modal = new Dialog(htmlHelper.ViewContext);
            return modal;
        }

        public static void EndDialog(this HtmlHelper htmlHelper)
        {
            EndDialog(htmlHelper.ViewContext);
        }

        internal static void EndDialog(ViewContext viewContext)
        {
            viewContext.Writer.Write("</div>");
            viewContext.Writer.Write("</div>");
            viewContext.Writer.Write("</div>");  
        }

    }
}

and in the view use it as

@using (Html.BeginDialog())
{
    // add the content to be rendered in the dialog here
}

Note: In the web.config file add the namespace of your assembly so that you do not have to include @using statements in the view.

<namespaces>
    <add namespace="System.Web.Mvc" />
    ....
    <add namespace="YourAssembly.Html" /> <!--add-->
</namespaces>

And you can then extend this by creating additional overloads, for example you might also have parameters for string title and a ButtonType buttons (an enum) to render a title bar and footer buttons in the dialog