IndexView

@model IEnumerable<NorthwindData.Models.Customers>

@section scripts {
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(function () {

            var openMode = $(this).hasClass("glyphicon-plus");
            if (openMode === true) {
                //load order for this customer.
                $(".näytäTilauksetNappi").click(function () {
                    alert("Nappia painettu!");
                    var customerId = $(this).data("customerid");
                    //alert(customerId);
                    $("#orders_" + customerId).css("display", "block");
                    var url = "/customer/getorders/" + customerId;
                    $.ajax(url).done(function (data) {
                        //alert("Palvelimelta tuli vastaus.");

                        var orderData = "";
                        for (var i = 0; i < data.length; i++) {
                            orderData += (i + 1) + ": " + data[i].OrderId + " " +
                                data[i].OrderDate + " " + data[i].CustomerId + "\r\n";
                        }
                        $("#orderText_" + customerId).html("<pre>" + orderData + "</pre>");
                        $(spanElement).removeClass("glyphicon-plus");
                        $(spanElement).addClass("glyphicon-minus");
                    });
                });
            }
            else {
                $(this).removeClass("glyphicon-minus");
                $(this).addClass("glyphicon-plus");
                var customerId = $(this).data("customerid");
                $("orders_" + customerId).css("display", "none");
            }
        });
    </script>
}

<h2>Index</h2>

<pre>
@ViewBag.ErrorMessage
</pre>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.CustomerID)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.CompanyName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.ContactName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.ContactTitle)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Address)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.City)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Region)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.PostalCode)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Country)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Phone)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Fax)
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                <a href="#"><span data-customerid="@Html.DisplayFor(modelItem => item.CustomerID)" class="glyphicon glyphicon-plus näytäTilauksetNappi"></span></a>
                @Html.DisplayFor(modelItem => item.CustomerID)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.CompanyName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ContactName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ContactTitle)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Address)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.City)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Region)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.PostalCode)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Country)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Phone)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Fax)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
                @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
                @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
            </td>
        </tr>
        <tr style="display: none;" id="orders_@Html.DisplayFor(modelItem => item.CustomerID)">
            <td>&nbsp;</td>
            <td colspan="5" id="orderText_@Html.DisplayFor(modelItem => item.CustomerID)"><pre>Loading...</pre></td>
        </tr>
    }

</table>