Stock list view

Question

I feel like using this many partial views where a view renders a partial that renders a partial is just digging a hole of poor design, so I'm looking for any suggestions or guidance as to if this is best/worst practice. One of the reasons I don't like it is because it seems too easy to duplicate code across the different views to handle styling. Here they are in order of nesting.

The index view:

@model IEnumerable<RESTDemo.Models.StockQuote>

@{
ViewBag.Title = "Index";
}

<h2>Demo Stock Watch List</h2>

<fieldset>
<legend>StockQuote</legend>
<div id="controls">
    <input type="submit" name="Refresh" id="Refresh" value="Refresh"
           data-submit-action="refresh" data-submit-method="get"
           data-submit-url="@Url.Action("Refresh")" data-stock-target="#stockTable" />

    <input type="submit" name="Reset" id="Reset" value="Clear List"
           data-submit-action="reset" data-submit-method="delete"
           data-submit-url="@Url.Action("Reset")" data-stock-target="#stockList" />

    <form id="addStock" method="post" action="@Url.Action("Add")" data-add-ajax="true" data-stock-target="#stockTable">
        <input type="search" name="symbol" />
        <input type="submit" value="Add" />
    </form>
</div>
</fieldset>
@Html.Partial("_stocks", Model)  

The _stocks view:

@model IEnumerable<RESTDemo.Models.StockQuote>
<div id="stockList">
    <table id="stockTable">
        <tr>
            <td>Symbol</td>
            <td>Last Price</td>
            <td class="change">Change</td>
            <td class="change">Change Percent</td>
            <td>Volume</td>
            <td class="last-column"></td>
        </tr>
            @Html.Partial("stockList", Model)

</table>
</div>

The stockList view:

@model IEnumerable<RESTDemo.Models.StockQuote>

@foreach (var item in Model)
{
string cssClass;
if (item.Change > 0)
{
    cssClass = "num-pos";
}
else if (item.Change < 0)
{
    cssClass = "num-neg";
}
else
{
    cssClass = "num-zero";
}


<tr class="data-row">
    <td class="stock-symbol">@item.Symbol</td>
    <td>@item.LastPrice</td>
    <td class="@cssClass">@Html.DisplayFor(modelItem => item.Change)</td>
    <td class="@cssClass">@Html.DisplayFor(modelItem => item.ChangePercent)</td>
    <td>@item.Volume</td>
    <td class="last-column">
        <span class="delete-me" data-action="@Url.Action("Remove")" data-stock-method="delete"> </span>
    </td>
</tr>
}

And finally the stock partial which is used as the response to an Ajax call to insert a single row into the table:

@model RESTDemo.Models.StockQuote

@{
string cssClass;

if (Model.Change > 0) {
    cssClass = "num-pos";
}
else if (Model.Change < 0) {
    cssClass = "num-neg";
}
else {
    cssClass = "num-zero";
}
}
<tr class="data-row">
<td class="stock-symbol">@Model.Symbol</td>
<td>@Model.LastPrice</td>
<td class="@cssClass">@Html.DisplayFor(modelItem => Model.Change)</td>
<td class="@cssClass">@Html.DisplayFor(modelItem => Model.ChangePercent)</td>
<td>@Model.Volume</td>
<td class="last-column">
    <span class="delete-me" data-action="@Url.Action("Remove")" data-stock-method="delete"> </span>
</td>
</tr>

Answer 1

First of all, I don't see anything you have done here as bad practice or poor design, that being said, I would probably not opt to nest as deeply. In my thinking, breaking up the the view into sub views should be done for 2 possible reasons.

• Organization
• Reusibility

I am assuming that you don't intend to reuse these views elsewhere in the application, if that is the case, you are only gaining organization. When that is the case, I would probably not put the list body into a separate view, but only the list elements. In other words, break into a subview only when your bound context changes, IE, you are binding to a item instead of the collection.