Why is my DataList flow still outputting a table? - asp.net

I am new to .net, and am tasked with customizing an eCommerce site that attaches to our SAP B1 server. The output of products is currently accomplished through a Datalist which creates output in a table. I have changed the RepeatLayout="Flow" in an effort to use a ul li structure instead of tables. Why is my output still coming in the form of tables?

You can use either Table or Flow in .Net 2. Instruction is here.
Flow will render with span tag.
UnorderedList and OrderedList throws exception even in .Net 4.
However, you can use repeater control for your desired ul and li layout.
<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<li>
<%# Eval("FirstName")%>
<%# Eval("LastName")%></li></ItemTemplate>
<FooterTemplate>
</ul></FooterTemplate>
</asp:Repeater>

Related

Container id structure on controls added to placeholder in repeater

Just ran across a weird thing. We have a page with items rendered in a Repeater. The items in the list have one panel for display and a PlaceHolder for edit mode where controls are added in the item data binding.
We have some client side code working with the fields that got added, and the code was expecting the ids to follow the same container structure you usually see, but for some reason, one level is getting skipped and I don't know why.
With the template below, you'd have the outer panel with an id like ...Repeater_ctl46_ctl100_Display. The PlaceHolder itself doesn't render, nor get included in the id structure in the html, but the id of a HiddenField added to the EditPlaceHolder ends up like ...Repeater_ctl46_ctl100_valueHidden.
The _Display level just doesn't appear. This threw off our client side script because it was expecting the outer panel container to be reflected in all the child controls in the edit template, and it was using that to look them up.
Anyone know why the containing Panel wouldn't be in the id hierarchy?
<ItemTemplate>
...
<asp:Panel ID="Display" runat="server">
<asp:Panel ID="ViewPanel" runat="server"><asp:Label ID="ValueLabel" runat="server" /></asp:Panel>
<asp:PlaceHolder ID="EditPlaceHolder" runat="server" />
</asp:Panel>
<asp:Panel ID="ModButtons" runat="server"><asp:LinkButton ID="EditButton" Text="<%$ Resources:Messages,Edit %>" runat="server" /></asp:Panel>
...
</ItemTemplate>
Okay, after a lot of digging, asp:Panel does not implement INamingContainer, which is why the Panel is not participating in the id naming conventions.
INamingContainer is just a marker interface; it has no properties or methods associated.
So if you want a Panel that can participate in naming conventions, you can make a little derivation and use that instead:
public class NamingPanel : Panel, INamingContainer
{...}

Assign separate link to each repeater item in ASP .net

I was trying to develop a forum website (trying to mimic some of its features) and I am using Entity framework to get my data. I have to use repeater as my instructor asked me to do so.
I would be having something like this using repeater that gets data for "Forum Category" and "Sub-category" from 2 separate database tables:
Forum Category 1
Sub-Category 1
Sub-Category 2
Forum Category 2
Sub-Category 1
Sub-Category 2
Now, I would like, when clicked on those sub-category list to be directed to the page of their own using query string and that is what I am not being able to figure out at this time. When I assign a link to those sub-lists, since they are automatically generated all of them point to the page that I initially assign. I was wondering if there was someway to dynamically assign links for this scenario. I was thinking of using ENUM, but again how do I run a for loop there.
The code I have for the repeater is below:
<asp:Repeater ID="categoryRepeater" runat="server" OnItemDataBound="RepeaterDataBinding">
<ItemTemplate>
<asp:Label ID="categoryLabel" Text='<%#Eval("CatName") %>' runat ="server"
style="font-weight:bold;font-size:large" />
<br />
<asp:Repeater ID="forumRepeater" runat="server">
<ItemTemplate>
<%#Eval("ForumName")%><br/>
<%-- right up there. Instead of hardcoding "DesktopForum1.aspx?ForumID=" which makes all the links
to point to that page, I am trying to achieve a way to assign links to specific pages for each sub-list...
--%>
</ItemTemplate>
</asp:Repeater>
</ItemTemplate>
</asp:Repeater>
I did try searching the forum, but could not come across with a problem that resembled my situation.
If you're able to get the sub-list page URL with the query that populates forumRepeater, this should work:
<a href='<%#Eval("ForumUrl")%>'><%#Eval("ForumName")%></a><br/>
Would you like to put some acnchor for each item?
It will look like that:
<a name="someAnchor"></a>
and Link will be as follows: www.mywebsite.com/blog/posts#someAnchor
For more details: http://www.echoecho.com/htmllinks08.htm
If it is still not good, you need to handle and process querystring values with Javascript

Linkbutton in ASP.NET MasterPage and child Webform data control creating extra href=""

EDIT Final: Just in case someone else sees this behavior, I wanted to explain my work around. I was using a placeholder on my Master page for the webform described below. I added a server control to the placeholder in the Master page OnInit event. Through a process of elimination, I figured out that the behavior described below only happens when I add this server control to the Master page.
titlebarPlaceHolder.Controls.Add(sctitlebar)
I re-wrote the Master Page to not need the server control added and the behavior described below went away. I have no idea what caused it. It was a simple server control, but this is my work around.
EDIT 2: The same behavior happens when the container is a table in the repeater control:
<asp:Repeater ID="rptAuditList" runat="server">
<ItemTemplate>
<tr class="odd">
<td><asp:LinkButton ID="lnkOpenAudit" runat="server" Text='<%# Eval("auditname") %>'></asp:LinkButton> </td>
</tr>
</ItemTemplate>
</asp:Repeater>
Here is the HTML output:
<td>Demo PreClose July 2012 </td>
EDIT: In my testing I just noticed that if I run the extact same control OUTSIDE of a MasterPage, it worked correctly, but if I run it inside a MasterPage, it behaves in the way described below.
I have tried this with a Repeater, DataList and Listview and the results are always the same.
Here is the HTML:
<asp:ListView ID="lvwAuditList" runat="server" >
<LayoutTemplate>
<ul><li runat="server" id="itemPlaceholder"></li></ul>
</LayoutTemplate>
<ItemTemplate>
<li><asp:LinkButton ID="lnkAudit" runat="server" Text='<%# Eval("auditname") %>' >
</asp:LinkButton></li>
</ItemTemplate>
</asp:ListView>
Here is the output:
<ul>
<li>Demo PreClose July 2012</li>
<li><a id="contentMain_lvwAuditList_lnkAudit_1" href="javascript:__doPostBack('ctl00$contentMain$lvwAuditList$ctrl1$lnkAudit','')">Demo PostClose Audit June 2012</a></li>
</ul>
The first row always has an extra href="" added. I have never seen this behavior before. I have stripped down the html and code behind to its most basic, yet I still get this extra href="". The code behind just sets the datasource and binds it, nothing else.
Thank you.
If you are using the first list tag as a placeholder and replacing the content in the code behind I would use a slightly different approach adding an ASP.NET PlaceHolder inside the list tag as follows:
<ul><li><asp:PlaceHolder runat="server" ID="itemPlaceholder" /></li></ul>
I have experienced some unusual artefacts appearing in Response code when using ASP.NET tags in a manner for which they were not particularly intended. This may well be causing your problem as well!

dynamically populating div in asp.net

I am working on a weboage that will display questions and answers (maybe 5 at one time, maybe 7 at another time) returned from a database table. The questions will each be displayed in a div and the related answers displayed in another div. The question will have an icon "Show Answer / Hide Answer"
How can I go about creating a div and then populating it with values from a table?
Thanks
I would use repeater for that.
1.Create data source pulling data from your database
<asp:sqlDataSource Id="sqldsQuestionsAnswers" ... />
2.Create repeater linking to that data source:
<asp:repeater DataSourceId="sqldsQuestionsAnswers" runat="server">
<itemTemplate>
<div>
<%# Eval("question") %>
<hr/>
<%# Eval("answer") %>
</div>
</itemTemplate>
</asp:repeater>
The repeater will display anything whats in <itemTemplate> tag for every row returned by your query.
So if your query returns 2 questions like that:
Question-------------Answer
-----------------------------------
question1?----------answer1
question2?----------answer2
The output would be:
<div>
question1?
<hr/>
answer1
</div>
<div>
question2?
<hr/>
answer2
</div>
I hope it helps...
We need to know more about how you retrieve your question data and the context of the rest of your page, but you can do a few things here (roughly in order of preference):
Bind your data to an <asp:Repeater > control (or even one of the grid controls)
Build a custom or user control to render your questions and drop that on your page
Build your desired html as a string in code and set it to <asp:Panel > control (Panels render as div tags). If you want to be able to refresh your div without reloading the entire page (AJAX), you can use an <asp:UpdatePanel >.
Build your desired html in code and write directly to the response, either via <%= %> or <%: %> bee-stings or with the Response.Write() method.

ASP.NET menus and CSS?

I have the feeling that using Sitemap in ASP.NET is not conducive to CSS. Where do I format a menu to look like CSS can make it look. Where are mu ul and li's?
...Beginner, so forgive me if there right under my nose.
Why not just use a CSS menu with ul's and li's ? There is nothing in ASP.NET that says you have to use web controls, normal HTML works just as well (probably better).
Using a SiteMap is extremily useful when using it to show Menus and Breadcrums.
You can read some tutorials on how to accomplish this like this. If you want to generate pure UL / LI I suggest you read this post
There is always the ASP.NET Video tutorial on How Do I: Implement Site Navigation in ASP.NET?
Try, as well use the CSS Friendly Adapters (that's what they were build for) - there's a video tutorial as well.
Hope it helps
For complete control over a menu you could use a Repeater and bind it to your Web.SiteMap.
<asp:Repeater ID="MenuRepeater" DataSourceID="SiteMapDataSource1" runat="server">
<ItemTemplate>
<li>
<a href='<%#Eval("url")%>'><%#Eval("Title")%></a>
</li>
</ItemTemplate>
</asp:Repeater>
If you're looking to do CSS dropdown menus then simply add in a nested Repeater.
<asp:Repeater ID="MenuRepeater" DataSourceID="SiteMapDataSource1" runat="server" EnableViewState="false">
<ItemTemplate>
<li>
<a href='<%#Eval("url")%>'><%#Eval("Title")%></a>
<ul>
<asp:Repeater ID="DropDownRepeater" DataSource='<%#Container.DataItem.ChildNodes()%>' runat="server">
<ItemTemplate>
<li>
<a href='<%#Eval("url")%>'><%#Eval("Title")%></a>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
</li>
</ItemTemplate>
</asp:Repeater>
So you'll get the CSS menus you want and still be using your Web.SiteMap.
You can combine the SiteMapDataSource with a Repeater tu produce a standard <ul><li> menu list. You can even add your own attributes to the web.sitemap file, e.g. to specify an image for the menu item...
teknohippy's advice on using a repeater is great!
However, the line
<asp:Repeater ID="DropDownRepeater" DataSource='<%#Container.DataItem.ChildNodes()%>' runat="server">
is incorrect. It needs to be
<asp:Repeater ID="Repeater1" runat="server" DataSource='<%# ((SiteMapNode) Container.DataItem).ChildNodes %>'>
in order to work.
Details are available in this excellent tutorial:
http://msdn.microsoft.com/en-us/library/aa581781.aspx

Resources