Make huge view in C# MVC5 maintanable

Question

I have an application that is using MVC5 with C# and Razor Engine. This view displays a huge table:

<table class="table table-bordered" id="pendingTable">
    <thead>
        <tr>
            <th>Actions</th>
            <th>Order Status</th>
            <th>Order Details</th>
            <th>Order Date</th>
            <th>Expected Delivery Date</th>
            <th>Ordered By</th>
            <th>Employee ID</th>
            <th>Employee Status</th>
            <th>Employee Name</th>
            <th>Employee Type</th>
            <th>Scope</th>
            <th>Delivery Address</th>
            <th>Comment</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td> <!-- At least 8 TDs each one with hundreds of lines of code-->
        </tr>
    </tbody>
</table>

Now, the problem is that everything is in one huge file. As you can guess, this file is a nightmare to update and maintain.

So I am familiar with the C# region directive, but I can't find anything simillar for Views. I also know about partial views, but I have the strong impression from discussions in StackOverflow that these should only be used when I have a piece of code in a View that is re-usable, which is not the case.

What is the best way to deal with Views this large?

"TDs, each with hundreds of lines of code" sounds like the problem here. Ideally, the code should have been performed by the controller and the View just provided an enumerable collection of rows to render. — Steve Lillis, Dec 04 '14 at 09:04
Hundreds of lines **each**!?! There must be C# code in there is there? Separate the C# out into methods in separate class files, then call those methods in your view instead. For large portions of markup, split them into partial views. — Mathew Thompson, Dec 04 '14 at 09:04
Each `` easily has 100 code lines because there are a lot of conditions that I need to check for. For example, if you an an Admin, you see more information, if you are HelpDesk you get to see more help buttons, if you are a Manager for the Order, you have access to extra comments, and so on. — Flame_Phoenix, Dec 04 '14 at 09:06
This check should be done before you load data from database, if userType is admin then you should only load related data to admin. — Mox Shah, Dec 04 '14 at 09:07
yes, I do it in the table using the `@if(ViewBag.blablabla)` syntax. Is this wrong? — Flame_Phoenix, Dec 04 '14 at 09:08
Have you looked at this post? [link] (http://stackoverflow.com/questions/6531983/how-to-create-a-function-in-a-cshtml-template) — Daniel Stackenland, Dec 04 '14 at 10:09

Mihai Dinculescu · Accepted Answer · 2014-12-04T09:40:13.640

1

Using a PartialView is the correct approach here.

Even when used in just only one place, PartialView is useful for achieving separation of concerns and like your case seems to be here, useful segregation of big files into smaller ones which are easier to read and maintain.

However, if you end up having serious logic in your View, consider creating a ViewModel class where you process that logic.

For example you can have different ViewModels for different user types. Subsequently you can use separate PartialViews to render information about different user types.

Now this is assuming that you are looking for a cheap solution. In case you have the time and will to look into more complex and effective solutions, follow Stephen Muecke's advice in the comments. He correctly points out that the best approach is to use EdiorTemplate and/or custom HtmlHelper.

edited Dec 04 '14 at 09:40

answered Dec 04 '14 at 09:24

Mihai Dinculescu

19,743
8
55
70

If there is no other way, I guess this will have to do. Thanks! – Flame_Phoenix Dec 04 '14 at 09:25
There are plenty of other ways. Far better would be the use of a custom `EditorTemplate`, or even better a custom HtmlHelper (and if you have controls that you need to post back, then a partial view is definitely not the correct approach) – Dec 04 '14 at 09:28
I completely agree, those are better approaches. However my guess is that the OP is looking for a quick solution. – Mihai Dinculescu Dec 04 '14 at 09:32
Never heard of a custom `EditorTemplate` nor of a custom `HtmlHelper`. How do they work and how could they help me? – Flame_Phoenix Dec 04 '14 at 09:59
@Flame_Phoenix, If your using (cringe) `@if(ViewBag.blablabla)`, I'm not surprised :). Too big a subject to answer here, but suggest you do some research (including using view models to represent what you want to display). But as all the comments above suggest, a view with more than 1 or 2 `if` statements (let alone 100's) is not a good design. That sort of logic belongs in the controller. – Dec 04 '14 at 10:25

Make huge view in C# MVC5 maintanable

1 Answers1