Question

I have a basic ASP.Net MVC 3 application which has a number of controllers and a number of actions (and subsequently views)

A common feature of the application is to show a pop-up dialog window for basic user input. One of the key features of this dialog process is a faded mask that gets shown behind the dialog box.

Each of these dialog window controls is in a separate Partial View page.

Now, some view pages may use multiple dialog boxes, and therefore include multiple partial views in them – which as is would mean multiple instances of the “mask” element.

What I am trying to find a solution for is to only need to create one instance of a “mask” element regardless of the number of dialog partial views I include, and then the script in each partial dialog will have access to this element (so basically it just needs to be on the page somewhere)

The only real idea I have come up with so far is to add the “mask” element to the master page (or in the original view page) and this will mean it only gets added once. The problem here is that it will be added even when it is not needed (albeit one small single element)

I can live with this, but I would like to know if there is a better way to handle these kinds of scenarios?

A quick idea that came to mind is some kind of master page inheritance hierarchy, So I may have a DialogMasterPage that inherits from the standard current master page. How does that sound for an approach?

Thanks

Answer 1

To do something like this, where each module can register their need for a certain thing in the master page, you can use HttpContext to store a flag of whether you need to write the mask div, and just set that property in each partial. At the end of the master page, if the flag is set, you can then write the mask div if its set to true.

Obviously to make this cleaner you could wrap it all in an HtmlHelper extension or something.