jquery - TreeView の簡単なメニューの例とMVC のタグ

Question

ツリービューの例

うさぎは私のモデルです:

public class EditUser
{
    public int Id { get; set; }
    public string UserId { get; set; }
    public string UserName { get; set; }
    public string Description { get; set; }
    public int ServiceCount { get; set; }
    public int TransCount { get; set; }
    public string Email { get; set; }

    public List<ServiceEnrolled> Services { get; set; }
}

public class ServiceEnrolled
{
    public string UserId { get; set; }
    public int ServiceId { get; set; }
    public string ServiceName { get; set; }
    public List<ServiceTransaction> Transactions { get; set; }
}

public class ServiceTransaction
{
    public int Id { get; set; }
    public string UserId { get; set; }
    public int ServiceId { get; set; }
    public string TransactionName { get; set; }
    public bool IsChecked { get; set; }
}

うさぎは私の見解です：

@model ServiceCatalogUpgrade.Models.EditUser
for (int i = 0; i < Model.Services.Count(); i++)
        {
    @Html.HiddenFor( x => x.Services[i].ServiceId)
            <div class="wtree">
                <ul class="ulclass">
                    <img alt="" width="18" height="18" class="expand" src="~/Images/minus.ico" /> 
                    <img alt="" width="18" height="18" class="collapse" src="~/Images/plus.ico" />
                    <input class="checkbox" type="checkbox"  />
                    <span style="font-weight: bold;">@Html.DisplayFor(x =>x.Services[i].ServiceName)</span>

                    @for (int j = 0; j < Model.Services[i].Transactions.Count(); j++)
                    {
                        <li style="list-style:none;">
                            @Html.EditorFor(x => x.Services[i].Transactions[j].IsChecked)
                            @Html.DisplayFor(x =>x.Services[i].Transactions[j].TransactionName)  
                        </li>
                        @Html.HiddenFor( x => x.Services[i].Transactions[j].ServiceId)
                        @Html.HiddenFor( x => x.Services[i].Transactions[j].UserId)
                        @Html.HiddenFor( x => x.Services[i].Transactions[j].TransactionName)     
                    }

                </ul> 
            </div> 
        }

うさぎは私のJqueryです：

<script type="text/javascript">

$(".expand").click(function () {
    $(this).toggle();
    $(this).parent().find('.collapse').toggle();
    $(this).parent().find('li').toggle();
});
$(".collapse").click(function () {
    $(this).toggle();
    $(this).parent().find('.expand').toggle();
    $(this).parent().find('li').toggle();
});
//select all or deselect all checkboxs
$(".checkbox").click(function () {
    if ($(this).attr("checked") == undefined) {
        $(this).parent().parent().find("input[type='checkbox']").each(function () {
            $(this).removeAttr("checked");
        });
    }
    else {
        $(this).parent().parent().find("input[type='checkbox']").each(function () {
            $(this).attr("checked", "checked");
        });
    }
});

インターネットで TreeView を検索したとき、TreeView の例はどれも難しいと思いました。コードを書くことにしました。
私は自分でこのコードを書きます。このツリービューのビルド方法は良いですか？この Jquery コードを最適化してもよろしいですか?