Develop Reference

Add multiple items to a asp repeater using tuples

I've created a repeater on the front end, and I need to add multiple items, the second item is a string and this needs to be added to the image src, any thoughts?
<asp:Repeater runat="server" ID="WeatherForcastWeek" >
<ItemTemplate>
<td>
<asp:Label runat="server" ID="Day1" />
<asp:Image runat="server" ID="WeatherIcon" />
<asp:Label runat="server" ID="Min" />
<asp:Label runat="server" ID="Max" />
</td>
</ItemTemplate>
</asp:Repeater>
Below is the DataSource type
Tuple<string, string, double, double>

You need to use ImageUrl property and pass the value using the item binding syntax for ASP.NET WebForms <%# Item.Property #>
<asp:Repeater runat="server" ID="WeatherForcastWeek" ItemType="System.Tuple`4 [System.String,System.String,System.Double,System.Double]">
<ItemTemplate>
<td>
<asp:Label runat="server" ID="Day1" Text="<%# Item.Item1 %>" />
<asp:Image runat="server" ID="WeatherIcon" ImageUrl="<%# Item.Item2 %>" />
<asp:Label runat="server" ID="Min" Text="<%# Item.Item3 %>"/>
<asp:Label runat="server" ID="Max" Text="<%# Item.Item4 %>"/>
</td>
</ItemTemplate>
</asp:Repeater>

Edit data using ListBox in ListView

I am currently using the ListView grid format to display data from the db using a SqlDataSource. Is there a way when I click edit that only that specific row becomes a listbox
and each column becomes editable, all other rows stays the same.
For example,
Row1
Col1 Edit(Maybe using a dropdown)
Col2 Edit
Col3 Edit
Row 2 Col1 Col2 Col3
Row 3 Col1 Col2 Col3
Here is my code thus far:(This edits everything using a dropdownlist for each field)
<EditItemTemplate>
<tr style="background-color: #999999;">
<td>
<asp:Button ID="UpdateButton" runat="server" CommandName="Update" Text="Update" />
<asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="Cancel" />
</td>
<td>
<div style="overflow:auto; width:300px;">
<asp:DropDownList ID="formtitle" runat="server" DataSourceID="SqlDataSource1" DataTextField="FormTitle" DataValueField="FormTitle" Width="300px" AppendDataBoundItems="True" SelectedValue ='<%# Bind("FormTitle") %>'>
</asp:DropDownList>
</div>
</td>
<td>
<div style="overflow:auto; width:300px;">
<asp:DropDownList ID="formsection" runat="server" DataSourceID="SqlDataSource1" DataTextField="FormSection" DataValueField="FormSection" Width="300px" AppendDataBoundItems="True" SelectedValue ='<%# Bind("FormSection") %>'>
</asp:DropDownList>
</div>
</td>
<td>
<div style="overflow:auto; width:300px;">
<asp:DropDownList ID="subsection" runat="server" DataSourceID="SqlDataSource1" DataTextField="SubSection" DataValueField="SubSection" Width="300px" AppendDataBoundItems="True" SelectedValue ='<%# Bind("SubSection") %>'>
</asp:DropDownList>
</div>
<asp:TextBox ID="SubSectionTextBox" runat="server" Text='<%# Bind("SubSection") %>' />
</td>
<td>
<div style="overflow:auto; width:300px;">
<asp:DropDownList ID="sectionitem" runat="server" DataSourceID="SqlDataSource1" DataTextField="SectionItem" DataValueField="SectionItem" Width="300px" AppendDataBoundItems="True" SelectedValue ='<%# Bind("SectionItem") %>'>
</asp:DropDownList>
</div>
<asp:TextBox ID="SectionItemTextBox" runat="server" Text='<%# Bind("SectionItem") %>' />
</td>
</tr>
</EditItemTemplate>

In order to use a ListBox in the edit row, just replace whatever DropDownList you want with a ListBox. A ListBox will instead show all of the items without the drop-down functionality and it will also allow for multiple selections. It is not however, used as a container for other controls. For example:
<asp:ListBox ID="listbox1" runat="server" DataSourceID="SqlDataSource1" DataTextField="FormTitle" DataValueField="FormTitle"></asp:ListBox>
After clearing up a few things, it sounds like you may want to check out this article titled: In-place editing of ListView subitems. Out of the box, a ListView only allows the editing of an entire row at once, not individual cells. The article I linked explains how that could be done.

Getting database ID of objects in ListView and updating ListView from user control ListView

I am creating a website and am facing the following problem. I have 2 ListViews.
The first ListView is inside a user control called Sidebar.ascx:
<asp:ListView ID="sidebarListView" runat="server" DataKeyNames="Id" DataSourceID="SqlDataSourceSidebar">
<ItemTemplate>
<div class="sidebarItem" runat="server">
<div>
<asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' />
</div>
</div>
</ItemTemplate>
<LayoutTemplate>
<div class="sidebarMain">
<asp:PlaceHolder runat="server" ID="itemPlaceHolder" />
</div>
</LayoutTemplate>
</asp:ListView>
<asp:SqlDataSource ID="SqlDataSourceSidebar" runat="server" ConnectionString="<%$ ConnectionStrings:TudengiDBConnectionString %>" SelectCommand="SELECT [Id], [Name] FROM [Faculties] ORDER BY [Name]"></asp:SqlDataSource>
It has to display only the name.
The second listview is inside my Default.aspx
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:ListView ID="RecentItemsListView" runat="server" DataSourceID="SqlDataSource1"
GroupItemCount="3">
<LayoutTemplate>
<div class="recentItemsMain">
<asp:PlaceHolder runat="server" ID="groupPlaceHolder" />
</div>
<asp:DataPager ClientIDMode="Static" ID="DataPager1" runat="server" PageSize="9">
<Fields>
<asp:NumericPagerField />
</Fields>
</asp:DataPager>
</LayoutTemplate>
<GroupTemplate>
<div class="recentItems">
<asp:PlaceHolder runat="server" ID="itemPlaceHolder" />
</div>
</GroupTemplate>
<ItemTemplate>
<div class="recentItem" runat="server">
<div>
<asp:Image ID="PictureThumb" runat="server" ImageUrl='<%#CreateThumbnail((string)Eval("Picture"),130,130) %>' />
</div>
<asp:Label ID="AuthorLabel" runat="server" Text='<%# Eval("Author") %>' />
<div>
<asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' />
</div>
</div>
</ItemTemplate>
<GroupSeparatorTemplate>
<div class="groupSeparator">
</div>
</GroupSeparatorTemplate>
</asp:ListView>
</ContentTemplate>
</asp:UpdatePanel>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TudengiDBConnectionString %>" SelectCommand="SELECT [Id], [Name], [Faculty_Id], [User_Id], [Author], [Picture], [Location] FROM [Books] ORDER BY [DateAdded] DESC">
What I need is for the ListView in Default.aspx to display the data without a WHERE clause, but when an item is clicked in the Sidebar user control I need to update the Default.aspx ListView to display only the data where the [Faculty_Id] = the ID of the ListView item in the user control.
How can I get the database ID of the ListView object when I can only display the NAME field? Do I have to display the ID as well and then hide the column from users?
What is the correct way to solve a situation like this?
Thanks for helping

<asp:ListView ID="sidebarListView" runat="server" DataKeyNames="Id" DataSourceID="SqlDataSourceSidebar" OnItemCommand="sidebarListView_ItemCommand">
<ItemTemplate>
<div class="sidebarItem" runat="server">
<div>
<asp:LinkButton ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' CommandName="Select" CommandArgument='<%# Eval("Id") %>' />
</div>
</div>
</ItemTemplate>
This is what I ended up with.

Add a hidden-field to your item-template to hold the database ID.
<ItemTemplate>
<asp:HiddenField ID="hdnFacultyID" runat="server" Value='<%# Eval("FacultyID") %>' />
<div class="recentItem" runat="server">
...
</div>
</ItemTemplate>
In the appropriate ListView handlers, you can access the database ID something like this.
((HiddenField)e.item.FindControl("hdnFacultyID")).Value

What you can do is to add an attribute to the NameLabel control.
Call it for example myID:
<asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' myID='<%# Eval("ID") %>'/>
then access that attribute from your code to get your ID:
string ID = NameLabel.Attributes["myID"];

Listview sort code apparently interfering with item processing code

Running VWD 2010 Express on a windows 7 machine.
I have a asp:listview (on a tab) that has column headers that sort the data (with no code on my part). This part works when it is by itself. But it fails when I try to then put in code to support the items in the list. So here is what I have so far:
(1) I can sort the items in a listview by clicking on a header ("title" in this case)
asp:ListView provides a mechanism for sorting the list by clicking on the title without using code behind. We can do this with a button like so:
<asp:Button runat="server" ID="SortTitle" Text="Title" CommandName="Sort" CommandArgument="sTitle" />
No code behind. This title is in the header which is outside the item template. It works fine. I can sort lists ascending and descending to my heart's content by clicking on the associated header. This is good, but I also would like to have the program "do something" when an item in the list is clicked.
(2) I can make something happen when I click on an item in the list.
Fortunately, there is a mechanism for controlling what happens when an item is clicked in the list via the OnItemCommand attribute in the asp:ListView tag.
<asp:ListView runat="server" ID="lvWebsites" DataSourceID="websiteSuggestionsDataSource" OnItemCommand="lv_website_click" >
This works kinda so-so. It does what I want, but it reloads the page (which I don't want to do). It's a separate issue and I may open a different question on that. The main thing is that I can click on the item in the list and it executes some code behind.
The real problem comes in when I use (1) and (2) together. When I do that, it ignores the CommandName="Sort" in the button tag and executes the code behind (lv_website_click) regardless of whether I click on the header (title) or an actual item in the list. It's as if the system makes no distinction between a header in a listview and an actual list item in the listview.
Here's a subset of the actual code I'm using. I'm using tabs and this particular listview is on the first tab so I include that...the entire code is a fair bit longer, but I think you can get the general context with this (and most of the rest is repeats of this code).
<div id='tab-container'>
<div class="tab-content" style="width:1000px">
<h1 class="tab" title="Feedback on the site">Site Feedback</h1>
<asp:ListView runat="server" ID="anID"
DataSourceID="mydatasource"
OnItemCommand="lv_website_click" >
<LayoutTemplate>
<table id="table1" style="background-color:White;border-collapse:collapse;" width="100%">
<tr style="background-color:White">
<td width="75%">
<asp:Button runat="server" ID="SortTitle"
Text="Title" CommandName="Sort" CommandArgument="sTitle" /></td>
<td> <asp:Button runat="server" ID="LinkButton1"
Text="Posted" CommandName="Sort" CommandArgument="sDate" /></td>
<td> <asp:Button runat="server" ID="SortDate"
Text="Status" CommandName="Sort" CommandArgument="sStatus" /></td>
</tr>
<tr runat="server" id="itemPlaceholder">
</tr>
</table>
<asp:DataPager runat="server" ID="datapagerSites" PageSize="10" style="background-color:White" enableviewstate="false"
PagedControlID="lvWebsites" >
<Fields>
<asp:TemplatePagerField>
<PagerTemplate>
<b>
Page
<asp:Label runat="server" ID="CurrentPageLabel"
Text="<%# Container.TotalRowCount>0 ? (Container.StartRowIndex / Container.PageSize) + 1 : 0 %>" />
of
<asp:Label runat="server" ID="TotalPagesLabel"
Text="<%# Math.Ceiling ((double)Container.TotalRowCount / Container.PageSize) %>" />
(
<asp:Label runat="server" ID="TotalItemsLabel"
Text="<%# Container.TotalRowCount%>" />
records)
<br />
</b>
</PagerTemplate>
</asp:TemplatePagerField>
<asp:NextPreviousPagerField
ButtonType="Button"
ShowFirstPageButton="true"
ShowNextPageButton="false"
ShowPreviousPageButton="false" />
<asp:NumericPagerField
PreviousPageText="< Prev 10"
NextPageText="Next 10 >"
ButtonCount="10" />
<asp:NextPreviousPagerField
ButtonType="Button"
ShowLastPageButton="true"
ShowNextPageButton="false"
ShowPreviousPageButton="false" />
</Fields>
</asp:DataPager>
</LayoutTemplate>
<ItemTemplate>
<tr id="Tr1" runat="server" style="background-color:#ECE5B6;" >
<td><asp:Button BackColor="#ECE5B6" CommandName="lcommand" runat="server" ID="Title" Text='<%# Eval("sTitle")%>' CommandArgument='<%# Eval("sID") %>' /></td>
<td><asp:Label runat="server" ID="Label1" Text='<%# Eval("posted")%>' /></td>
<td><asp:Label runat="server" ID="Status" Text='<%# Eval("sStatus")%>' /></td>
</tr>
</ItemTemplate>
<AlternatingItemTemplate>
<tr id="Tr1" runat="server" style="background-color:#FAF8CC;" >
<td><asp:Button BackColor="#FAF8CC" CommandName="lcommand" runat="server" ID="Title" Text='<%# Eval("sTitle")%>' CommandArgument='<%# Eval("sID") %>' /></td>
<td><asp:Label runat="server" ID="Label1" Text='<%# Eval("posted")%>' /></td>
<td><asp:Label runat="server" ID="Status" Text='<%# Eval("sStatus")%>' /></td>
</tr>
</AlternatingItemTemplate>
</asp:ListView>
</div>
</div>
It strikes me I could maybe do both things in my own code to handle the items, but I really don't like that as I would like to use the automatic sorting behavior I get from the Listview control.
I would think OnItemCommand="lv_website_click" in asp:listview tag would apply to the items and the CommandName="Sort" CommandArgument="sTitle" would apply to the headers (used for sorting) because they are outside the itemtemplate. Apparently that is not true.
IS there a way to use both of these (sorting with a click on header AND code behind for items in the list) so they do not conflict with each other?

The solution is in the code-behind.
protected void lv_website_click(object sender, ListViewCommandEventArgs e)
{
if (!e.CommandName.Equals("Sort")) {
int searchID = Convert.ToInt32(e.CommandArgument.ToString());
TableAdapters.SuggestionsTableAdapter sAdapt =
new TableAdapters.SuggestionsTableAdapter();
SuggestionsDataTable tbl = sAdapt.GetDataByID(searchID);
tbMessage.Text = tbl.Rows[0]["message"].ToString();
lbField2.Text = tbl.Rows[0]["field2"].ToString();
lbStuff.Text = tbl.Rows[0]["stuff"].ToString();
}
}
The key is the "if" surrounding the body of the method. If it's not a sort event (i.e. the CommandName is not equal to "Sort" then do whatever it is you're supposed to do when you click on an item. OTHERWISE, if it is a sort, just ignore the code. I misunderstood what was happening here. I thought it was ignoring the sort and executing the other code regardless. What was happening is that if the CommandName is Sort, then it is doing the sort, but it is also executing my behind code (which is where it was having the error).
That is, it was not a problem with the aspx (as I had thought), but with the c# behind.

checkbox.checkchanged event question. How do I find out which Checkbox was checked/unchanged

I'm using a Repeater:
<form id="form1" runat="server">
<div>
<asp:Repeater ID="repeater" runat="server" OnItemDataBound="repeater_ItemDataBound">
<ItemTemplate>
<tr>
<td>
<asp:CheckBox ID="checkbox" runat="server" AutoPostBack="false" OnCheckedChanged="Check_Clicked" data-id='<%# DataBinder.Eval(Container.DataItem, "ProfileID") %>'
Text="I agree" />
</td>
<td>
<asp:Label ID="lblProfileDesc" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "ProfileDesc") %>'></asp:Label>
</td>
</tr>
<br />
</ItemTemplate>
</asp:Repeater>
<asp:Button ID="btn" runat="server" Text="Click" onclick="btn_Click" />
</div>
</form>
I'm handling onCheckedChange however how can I find out which checkbox was clicked? Thanks in advance!

You can try
CheckBox checkBox = (CheckBox)sender;
var id = checkBox.Attributes["data-id"];

Maybe you should redesign your UI architecture, as it's not acceptable to cause a full post back only for a change of a CheckBox (which is a Boolean parameter). I think you can use ajax here:
$(function(){
$('input[type=checkbox]').click(function(){
// Initializing an ajax call here, and updating DOM based on response.
});
});