Bootstrap organization and maintenance

Question

I am starting with the use of Bootstrap with MVC 4 and during the planning I noticed that the main screen of the system will have many Divs. Many of them can be repeated (exactly the same) on other screens.

To facilitate future maintenance and organization of the code I was thinking of separating some Divs into html files, IE, my main screen would have about 4 includes of other html, which generate 4 additional requests per visit. I don’t know if it’s worrying.

Does anyone have any(s) hint(s) in order to improve code organization and future maintenance?

Answer 1

What you call "Include", the name in ASP.NET MVC is Partial. Partials are code fragments (extension . cshtml, same as the Views), and that nomenclature is usually standardized with a "_" (underline) in front of the name.

Separation is not only good but encouraged. No need to worry about performance: like Views are compiled dynamically, the performance of a View with or without Partials is the same.

Tips are basically explanations of functionalities:

• One Partial inside a directory Shared is visible to all others Views;

• One Partial within a directory of Views is usually visible only to those Views, but can be called with the proper directory specification;

  For example, suppose I’m rendering ~/Views/Produtos/Detalhes.cshtml and I want to display more information about the product category:

  @Html.RenderPartial("~/Views/CategoriasDeProdutos/_Detalhes.cshtml", produto);
  

• Partials inside Partials is a good practice;

• Partials should not (nor can) have Javascript code inside. The code should be in the View father, to avoid strange behavior.

• There are two ways to call Partials:

  @Html.RenderPartial("~/Views/CategoriasDeProdutos/_Detalhes.cshtml", produto);
  

  RenderPartial returns void and writes directly on the request output.

  @Html.Partial("~/Views/CategoriasDeProdutos/_Detalhes.cshtml", produto);
  

  Partial returns a String with the HTML of Partial. Can be assigned to a variable.

There is a very complete article in Codeproject that explains it in more detail.