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.
Related
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
{...}
My images are stored in a SQL database. I bind to the table and use the generated image control and a ashx handler. No problem. I now have the thumbnail image surrounded by a anchor tag. The problem come in finding the large image thats in a hidden div and display ONLY that.. I don't want a gallery just that one image. If you are reading this you know that datalists when generating their controls assigns mangled ID's to their components. How can I address that image from my thumbnail image?
<asp:DataList ID="datalist" runat="server" RepeatColumns="3" RepeatDirection="Horizontal">
<ItemTemplate>
<a class="colorme" href="#">Actual thumbnail image</a>
<div style="display:none">
<div id="colorme" runat="server">Actual image to display
</div>
</div>
</ItemTemplate>
</asp:DataList>
ASP.NET 4.0 no master page.
Assign ID and run at server for your Image and use
<%= yourimage.ClientID %> this will return that particular image wherever you'll use it..not the mangled IDs generated by Datalist control.
The simplest solution would be to use jQuery, and find the element using the next-sibling selector.
$(".colorme").click(function(){
$(this).find("~ div").show();
});
This would work no matter how many images you have on the page.
I have webpage that has details view. I want to add comment box where user can see/add/edit/save comments. Once saved, the comments will be stored into db with record being displayed (storyID). I have table with columns StoryID and Comments where I would like to store comments.
Details view shows article based on session variable (storyid)
Is there any code sample that I can use? Spent good one hour but not luck.
Many thanks in advance
I've done similar things, here are a few ideas to think about.
Get a better DB layout, with your current 2 columns how will it order the thread correctly?
Column Idea ( CommentId, StoryId, Comment, CreatedOn, CreatedBy )
In your DetailsView, you'll need to bind the existing comments to the bottom of the story, right? Here is an example using a repeater.
<div class="Comment">
<ul class="Comment-Items">
<asp:Repeater ID="Item" EnableViewState="True" runat="server">
<ItemTemplate>
<li class="CommentBy">
<%# Eval("CreatedBy") %> - <%# Eval("CreatedOn") %></li>
<li class="CommentText">
<%# Eval("Comment") %></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
Adding Comments, a few ideas...
a. Add new comment via Ajax and insert the new comment into the DOM
b. Add new comment via Ajax and return all the comments to rebind into the DOM
c. Add new comment with POSTBACK and refresh the page
I have the following piece of code:
<asp:Content id="Content1" runat="server" contentplaceholderid="PlaceHolderPageDescription">
<table class="custom-table">
<asp:Repeater ID="oRepeater" runat="server" >
<ItemTemplate>
<tr onclick="javascript:location.href='/nuovoTema/viewIdea.aspx?ID='">
<td><%# ((SPListItem)Container.DataItem)["ID"] %></td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
</asp:Content>
The compiler complains that In content pages, content is not allowed outside <script> or <asp:Content> regions.
How can I use asp:Content and asp:Repeater together? I have a list to display.
Thanks
Doesn't look like the error is in the part of the page that you posted. Typically this pops up when you either attempt to place content outside of an asp:content block while in a web content page, or b) have some sort of markup error - lack of a closing tag or similiar - that makes the parser think that you're placing code outside of a content block.
Check your tags to make sure everything that needs to be closed is, in fact, closed. A good way to start is to simply delete everything inside of the content block - well, copy it somewhere - and see if the page still complains. (You'll probably get errors in the code behind).
I have a Repeater which displays a list of items (in a grid-like/table view). When a user clicks an item, I display an UpdatePanel under this item with additional information relevant to the item (similar to Accordion control). I know how to populate the elements of the UpdatePanel in code-behind (I pass the ID of the selected element in the Repeater control as CommandArgument, get additional info for this ID, and set up the text fields of the active UpdatePanel controls). But I'm wondering if I could set up binding directly in the ASPX (instead of code-behind). When I used the <%= %> syntax to assign text fields of the UpdatePanel control the values of the page properties, e.g. <%= Comment %>, it sort of worked, but it changed the fields of all UpdatePanels in the repeater. Is there any way to bind the active UpdatePanel to the current values and leave already bound UpdatePanels unchanged?
Are you looking to display a container that displays additional information? Is there other activity in the "box" that requires it be an updatepanel?
<asp:repeater>
<itemtemplate>
<%# Eval("Name") %> <%# Eval("LastName") %><br />
<span onclick="$get('<%# Eval("Id") %>')">View Age</span>
<div id="<%# Eval("Id")%>" style="display:none;">
Age: <%# Eval("Age") %>
</div>
<itemtemplate>
</asp:repeater>
Ithink that's right, some syntax may be off a bit (typing without intellisense). Would that work?
I used ID as a unique identifier for the div id and the onclick command. You could also use jquery, asp:controls or whatever else you wanted.
Easiest way is to nest a FormView inside the update panel. Then the only thing you need to do in the code behind is get the additional info, assign it to the FormView.DataSource, and call FormView.DataBind(). Everything in the FormView will use the <%# Eval("SomeColumn") %> syntax. You'll probably need to use a FindControl() to get a reference to the FormView. I'd type up the code for you but I'll save you some headaches down the road and say DON'T DO THIS.
The update panel is about the most inefficient way to do any ajax stuff. The only way to get it all to wire up correctly with this repeater and server side code is to either have a gigantic viewstate or to rebind the repeater in your page load. You are turning a request that could be 300ms into something that will take over a second...or longer! Get familiar with a good ajax framework and don't be afraid to write real html. At the very least, use a webservice that loads a usercontrol with your markup.
I know the update panel is easy, and it's built in. It might even be adequate for what you are doing, but you must resist. You'll be glad you did.