c# - Generating a list of categories and subcategories with asp.net mvc2 -
i have feeling i'm doing horribly, horribly wrong. nested loops? best practice method of listing subcategories? have feeling involves preparing list in controller action , sending client via actionresult, don't know start? able point me in right direction? here's hacky code:
<h2>categories</h2> <a href="javascript:;" onclick="newcategory()">create new category</a> <br /> <ul class="parent"> <%foreach (var category in model.categories){%> <%-- list of top-level parent categories --%> <%if (category.isparent && category.parentid == 0)%> <li> <span class="buttons"><a href="javascript:;" onclick="editcategory(<%:category.categoryid%>)" class="edit"></a> <a href="javascript:;" onclick="deletecategory(<%:category.categoryid%>)" class="delete"></a></span> <span class="categoryname"><%:category.categoryname%></span> <span class="positionbuttons"><%:html.actionlink(" ", "movecategoryup", new {id = category.categoryid}, new {class = "moveup"})%><%:html.actionlink(" ", "movecategorydown", new {id = category.categoryid}, new {class = "movedown"})%></span> <%-- list of subs each parent --%> <ul> <%-- level 1 --%> <%foreach (var sub1 in model.categories){%> <%if (sub1.parentid == category.categoryid){%> <li> <span class="buttons"><a href="javascript:;" onclick="editcategory(<%:sub1.categoryid%>)" class="edit"></a> <a href="javascript:;" onclick="deletecategory(<%:sub1.categoryid%>)" class="delete"></a></span> <span class="categoryname"><%:category.categoryname%></span> <span class="positionbuttons"><%:html.actionlink(" ", "movecategoryup", new {id = sub1.categoryid},new {class = "moveup"})%><%:html.actionlink(" ", "movecategorydown", new {id = sub1.categoryid},new {class = "movedown"})%></span> <%-- list of subs each parent --%> <%if (sub1.isparent){%> <ul> <%-- level 2 --%> <%foreach (var sub2 in model.categories){%> <%if (sub2.parentid == sub1.categoryid){%> <li> <span class="buttons"><a href="javascript:;" onclick="editcategory(<%:sub2.categoryid%>)" class="edit"></a> <a href="javascript:;" onclick="deletecategory(<%:sub2.categoryid%>)" class="delete"></a></span> <span class="categoryname"><%:category.categoryname%></span> <span class="positionbuttons"><%:html.actionlink(" ", "movecategoryup", new {id = sub2.categoryid},new {class = "moveup"})%><%:html.actionlink(" ", "movecategorydown", new {id = sub2.categoryid},new {class = "movedown"})%></span> <%-- list of subs each parent --%> <%if (sub2.isparent){%> <ul> <%-- level 3 --%> <%foreach (var sub3 in model.categories){%> <%if (sub3.parentid == sub2.categoryid){%> <li> <span class="buttons"><a href="javascript:;" onclick="editcategory(<%:sub3.categoryid%>)" class="edit"></a> <a href="javascript:;" onclick="deletecategory(<%:sub3.categoryid%>)" class="delete"></a></span> <span class="categoryname"><%:category.categoryname%></span> <span class="positionbuttons"><%:html.actionlink(" ", "movecategoryup",new {id = sub3.categoryid},new {class = "moveup"})%><%:html.actionlink(" ", "movecategorydown",new {id = sub3.categoryid},new {class = "movedown"})%></span> <%-- list of subs each parent --%> <%if (sub3.isparent){%> <ul> <%-- level 4 --%> <%foreach (var sub4 in model.categories){%> <%if (sub4.parentid == sub3.categoryid){%> <li> <span class="buttons"><a href="javascript:;" onclick="editcategory(<%:sub4.categoryid%>)" class="edit"></a> <a href="javascript:;" onclick="deletecategory(<%:sub4.categoryid%>)" class="delete"></a></span> <span class="categoryname"><%:category.categoryname%></span> <span class="positionbuttons"><%:html.actionlink(" ", "movecategoryup", new {id = sub4.categoryid}, new {class = "moveup"})%><%:html.actionlink(" ", "movecategorydown", new {id = sub4.categoryid}, new {class = "movedown"})%></span> <%-- if more 4 levels of subcategories required, put level here --%> </li> <%}%> <%}%> </ul> <%}%> </li> <%}%> <%}%> </ul> <%}%> </li> <%}%> <%}%> </ul> <%}%> </li> <%}%> <%}%> </ul> </li> <%}%> </ul> edit
unfortunately code isn't rendering results i'm looking for, cant provide more this: http://jsfiddle.net/eeagr/ each list item has buttons edit/delete , moveup/movedown options category. category has following properties:
categoryid : int
name: string
parentid : int
isparent : bool
position: int
first, change structure of categories, each category has subcategories property.
then, should create user control renders 1 category , if category has subcategories, calls recursively:
categorycontrol.ascx:
<%@ control language="c#" inherits="system.web.mvc.viewusercontrol<category>" %> <%@ import namespace="so_subcats.model" %> <li><%= model.name %> <% if (model.subcategories != null) { %> <ul> <% foreach (category subcat in model.subcategories) html.renderpartial("categorycontrol", subcat); %> </ul> <% } %> </li> then create view renders control each of top-level categories:
categories.aspx:
<%@ page title="" language="c#" masterpagefile="~/views/shared/site.master" inherits="system.web.mvc.viewpage<ienumerable<category>>" %> <%@ import namespace="so_subcats.model" %> <asp:content id="content1" contentplaceholderid="titlecontent" runat="server"> categories </asp:content> <asp:content id="content2" contentplaceholderid="maincontent" runat="server"> <h2>categories</h2> <ul> <% foreach (category cat in model) html.renderpartial("categorycontrol", cat); %> </ul> </asp:content> of course, if don't want change structure of classes, can use solution too, have modify slightly.
Comments
Post a Comment