4
\$\begingroup\$

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.

I am familiar with the C# region directive, but I can't find anything similar for Views. I also know about partial views, but I have the strong impression from discussions in Stack Overflow 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?

\$\endgroup\$
4
\$\begingroup\$

I would use a Partial View for this code. Anytime I have a menu for a page I put it in a partial view even though it may not be used on another page.

<tr>@Html.Partial("_Actions")</tr>
<tr>@Html.Partial("_OrderStatus")</tr>
<tr>@Html.Partial("_OrderDetails")</tr>
<tr>@Html.Partial("_OrderDate")</tr>

inside the Partial view placed in Views/Shared

@model ActionsViewModel
<td>Column 1</td> 
<td>Column 2</td> 
<td>Column 3</td> 
<td>Column 4</td> 
<td>Column 5</td> 

etc... Good Luck!

\$\endgroup\$
2
\$\begingroup\$

Razor supports collections from model.
Examples
You can connect all information to the database, and maintain the data properly.

Explanation:
The table must be in database, in model, not in view.

The correct usage of MVC:

<table class="table table-bordered" id="pendingTable">
<thead>
    <tr>
         @foreach (var columnName in Model.ColumnsNames)
         {
           <th>@columnName</th>
         }
    </tr>
</thead>
<tbody>
    <tr>
        <td></td> <!-- use @foreach-->
    </tr>
</tbody>

\$\endgroup\$
1
\$\begingroup\$

Another trick is to surround the long sections with span tags. This makes the stuff inside the span collapsible in the VS editor. It's not a "solution" per se, but it can make life easier

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.