What in the Repeater - c#

An issue has manifested in a particular area of a page I'm working on that utilizes the infamous Repeater. The control is bound to a valid Data Source that does persist through the View State.
The Repeater code is as follows:
<asp:Repeater ID="creditRightItems" runat="server" DataSourceID="sdsOrder">
<HeaderTemplate>
<thead>
<td>Qty Returning:</td>
<td>Price:</td>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><asp:TextBox ID="txtQuantity" runat="server" PlaceHolder="0" CssClass="txtQuantity Credit-Check" data-item='<%# Eval("ProductNum") %>' /><span class="creditX">X</span></td>
<td><span id="ProductPrice" class='Credit-Container price<%# Eval("ProductNum") %>'><%# ConvertToMoney(Eval("Price").ToString()) %></span>
<input type="hidden" id="hfPrice" value="<%# Eval("Price") %>" />
<input type="hidden" id="hfProdNum" value="<%# Eval("ProductNum") %>" />
<input type="hidden" id="hfSKU" value="<%# Eval("SKU") %>" />
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
The issue occurs in code behind when I iterate through the Repeater. Essentially the loop only finds two controls, which may be apart of the issue. However, when I attempt to grab those values from code-behind they return null. If I add a runat="server" then it will actually error the Repeater.
foreach (RepeaterItem item in creditRightItems.Items)
{
TextBox inputQuantity = (TextBox)item.FindControl("txtQuantity");
string quantity = inputQuantity.Text;
TextBox inputProduct = (TextBox)item.FindControl("hfProdNum");
string product = inputProduct.Text;
HtmlInputHidden productPrice = (HtmlInputHidden)item.FindControl("hfPrice");
string price = productPrice.Value;
TextBox inputSKU = (TextBox)item.FindControl("hfSKU");
string sku = inputSKU.Text;
if (string.Compare(quantity, "0") != 0 && string.IsNullOrEmpty(quantity))
items.Add(new Items(product, quantity, price, sku));
}
The question is, how can I get a valid value for:
ProductPrice or hfPrice
hfProdNum
hfSku
For the life of me I can't get them to return a valid content. I've tried:
HiddenField productPrice = (HiddenField).item.FindControl("hfPrice");
string price = productPrice.Value;
HtmlInputHidden productPrice = (HtmlInputHidden).item.FindControl("hfPrice");
string price = productPrice.Value;
I know that FindControl requires the runat so I'm trying to either achieve a way to avoid the Repeater breaking when I add a runat or a way to grab the contents of those inputs.
Any thoughts and help would be terrific.

What you have in your source aren't server controls, so FindControl won't find them.
Why can't you just convert the hidden fields to asp:HiddenField tags?
<asp:HiddenField id='hfPrice' value='<%# Eval("Price") %>' runat='server' />
The runat probably isn't breaking your page; I think it's the single vs double quotes on your Eval call. If you alternate them like I have in this sample, it will work.

Well, without knowing where your code is at exactly, I guess that you should consider doing this manipulation on good event.
Try handling ItemDataBound event. And instead of iterating trought every Rows, do something like :
(VB.net code, sorry)
Private Sub myRepeater_ItemDataBound(sender as object, e as RepeaterItemEventArgs) andles myRepeater.ItemDataBound
If (e.Item IsNot Nothing AndAlso (e.Item.ItemType = ListItemType.Item OrElse e.Item.ItemType = ListItemType.AlternatingItem)) Then
' DO STUFF HERE
Dim productPrice As HtmlInputHidden = (HtmlInputHidden).item.FindControl("hfPrice")
Dim price As String = productPrice.Value
End If
End Sub

So the culprit is due to the quotation and single quote, the error exist when:
value="<%# Eval("Price") %>"
The error no longer occurs, if you do:
value='<%# Eval("Price") %>'
Which alleviates the error in the page breaking, which allows me to properly run FindControl. A careless error on my part, but hopefully this helps someone in the future.

Related

Repeater grouping items from single database

I have a table with headers(example): Group, DisplayName, EditableData, description.
I have been trying for the last few days to learn repeaters to sort the information based on the Group so I can get something that looks like the following layout. This is a user control I am trying to put together.
Group1
------------------
Name1 EditableData Some Description
Name2 EditableData Some Description
Group2
------------------
Name3 EditableData Some Description
Name4 EditableData Some Description
I have looked a the following other examples online:
Nested repeaters - grouping data and
Nested Repeaters in ASP.NET
I believe I do not properly understand how repeaters work enough to deal with nesting or datasource.
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
Group: <%#Eval("Group")%><br />
<%--Nested Repeater would go here for all the children info for each "Group"--%>
</ItemTemplate>
</asp:Repeater>
Using DISTINCT in my SQL to just retrieve "Group" leaves me with the proper groups without repeats and I guess I could just instead set the groups in labels and then later make repeaters for each specific label... This seems terrible when I may later update editableData back to the database.
What I really want I guess is at least a link to a walkthrough that explains how repeaters work along with Eval() and datasources. I mean, code to do everything I need to complete this first step in my project would be perfect ;P But I also want to be able to understand these better as I am probably going to be using them often in the near future.
I once encountered the same issue where I was to sort the data by group and I had to display the common items in a grouped segment.
There are of-course multiple ways of how you retrieve data, for example, you can get Distinct Group Names and bind it to the repeater and then on ItemDataBound event you can execute and get other elements like this:
<asp:Repeater runat="server" ID="rptrGroups" OnItemDataBound="rptrGroups_ItemDataBound">
<ItemTemplate>
<asp:Label runat="server" ID="lblGroupName" Text='<%# Eval("GroupName") %>' />
<asp:GridView runat="server" ID="gv">
</asp:GridView>
</ItemTemplate>
</asp:Repeater>
protected void rptrGroups_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item)
{
var lblGroupName = (Label)e.Item.FindControl("lblGroupName");
GridView gv = (GridView)e.Item.FindControl("table");
var dataTable = FetchDataWithGroupName(lblGroupName.Text); // Method that fetches data with groupname.
gv.DataSource = dataTable;
gv.DataBind();
}
}
This is not a recommended way because it goes to database, runs query, and then fetches data for each item (if you are fetching this data from db). If you have thousands of Groups then it will make db calls for thousands of times which is a bad thing.
The second solution is, you design a model and feed a custom model that will do the job. Let me explain it by a sample model:
public class GroupedModel
{
public string GroupName {get; set;}
public List<NestedData> TableData {get; set;}
}
public class NestedData
{
public string Id {get; set;}
// Your columns here...
}
Then query and initialize list of GroupedModel class then feed it to the repeater. Let me do it with some dummy data.
var tableData = new List<NestedData>();
var nestedData1 = new NestedData { Id = "1" };
var nestedData2 = new NestedData { Id = "2" };
tableData.Add(nestedData1);
tableData.Add(nestedData2);
var groupedModel = new GroupedModel
{
GroupName = "Group1",
TableData = tableData
};
var listGroupedModel = new List<GroupedModel>();
listGroupedModel.Add(groupedModel);
rptrGroups.DataSource = listGroupedModel;
Then modify the markup like this:
<asp:Repeater runat="server" ID="rptrGroups">
<ItemTemplate>
<asp:Label runat="server" ID="lblGroupName" Text='<%# Eval("GroupName") %>' />
<asp:GridView runat="server" ID="gv" DataSource='<%# ((GroupedModel)Container.DataItem).TableData %>'>
</asp:GridView>
</ItemTemplate>
</asp:Repeater>
I find that just using a gridview or list view works rather nice. However, DO NOT attempt to use the grouping feature - as it is for placing items across the page, not down.
Lets make this really simple!
Ok, so I have a list of Hotels, but I want to group by city.
So, you build a query like this:
Dim strSQL As String =
"SELECT ID, FirstName, LastName, HotelName, City FROM tblHotels ORDER BY City, HotelName"
GridView1.DataSource = Myrst(strSQL)
GridView1.DataBind()
Ok, so that fills out our grid view. We get this:
So far, two lines of code!
But, we want to group by City.
So at the forms class level, add simple var:
Public Class HotelGroupGrid
Inherits System.Web.UI.Page
Dim LastCity As String <----- this one
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If IsPostBack = False Then
LastCity = ""
Call LoadGrid()
End If
End Sub
Ok, so now on the data item bind event, simply add a NEW row.
The code looks like this:
If e.Row.RowType = DataControlRowType.DataRow Then
' if grouping = 1 then create a new row!
Dim gvRow As DataRowView = DirectCast(e.Row.DataItem, DataRowView)
If gvRow("City") <> LastCity Then
LastCity = gvRow("City")
' insert a new row for grouping header
Dim MyRow As New GridViewRow(-1, -1, DataControlRowType.DataRow, DataControlRowState.Normal)
Dim MyCel As New TableCell()
'MyCel.Width = Unit.Percentage(100)
Dim MyTable As Table = e.Row.Parent
MyCel.ColumnSpan = MyTable.Rows(0).Controls.Count
Dim MyLable As New Label
MyLable.Text = "<h2>" & gvRow("City") & "</h2>"
MyCel.Controls.Add(MyLable)
MyRow.Cells.Add(MyCel)
MyTable.Rows.AddAt(MyTable.Rows.Count - 1, MyRow)
End If
End If
Now, above is a "bit" of a chunk to chew on - but still not a lot of code.
So, now when we run above, we get this:
Our grid view markup looks like this:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ID">
<Columns>
<asp:BoundField DataField="City" HeaderText="City" InsertVisible="False" ReadOnly="True" SortExpression="ID" />
<asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" ReadOnly="True" SortExpression="ID" />
<asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" />
<asp:BoundField DataField="LastName" HeaderText="LastName" SortExpression="LastName" />
<asp:BoundField DataField="HotelName" HeaderText="HotelName" SortExpression="HotelName" />
</Columns>
</asp:GridView>
So, not too bad.
If you decide to use a listview? Then the code becomes quite a bit less, but the markup for listview is quite a handfull.
All we do is create a row that is our heading, and now show, or hide that row based on the start of new grouping.
So, if one decides to use a list view? Then we get this:
(I assume you use the databind wizards - your not possibly typing in the markup by hand - right? - saving world poverty here)
So, for a list view (and I think the list view is BETTER, since the layout options for that heading row is wide open to any kind markup and extra controls you dream up.
So, the markup (generated - and then chopped out the fat) is this:
<asp:ListView ID="ListView1" runat="server" DataKeyNames="ID">
<EmptyDataTemplate>
<table runat="server" style="">
<tr><td>No data was returned.</td></tr>
</table>
</EmptyDataTemplate>
<ItemTemplate>
<tr id="GroupHeading" runat="server" style="display:none">
<td colspan="4">
<h2><asp:Label ID="City" runat="server" Text='<%# Eval("City") %>' /></h2>
</td>
</tr>
<tr>
<td><asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' /></td>
<td><asp:Label ID="FirstNameLabel" runat="server" Text='<%# Eval("FirstName") %>' /></td>
<td><asp:Label ID="LastNameLabel" runat="server" Text='<%# Eval("LastName") %>' /></td>
<td><asp:Label ID="HotelNameLabel" runat="server" Text='<%# Eval("HotelName") %>' /></td>
</tr>
</ItemTemplate>
<LayoutTemplate>
<table id="itemPlaceholderContainer" runat="server" border="0" style="">
<tr runat="server">
<th runat="server">ID</th>
<th runat="server">FirstName</th>
<th runat="server">LastName</th>
<th runat="server">HotelName</th>
</tr>
<tr id="itemPlaceholder" runat="server">
</tr>
</table>
</LayoutTemplate>
</asp:ListView>
Now no question that the listview spits out a lot more markup - but we now have a full row for the heading. So we get this:
But, now our code simply will hide or show that "extra" row we have in the marketup.
And it quite simple now:
If e.Item.GetType = GetType(ListViewDataItem) Then
Dim MyRow As HtmlTableRow = e.Item.FindControl("GroupHeading")
Dim lblCity As Label = MyRow.FindControl("City")
If lblCity.Text <> LastCity Then
LastCity = lblCity.Text
' Hide/show group heading
MyRow.Style("display") = "normal"
Else
MyRow.Style("display") = "none"
End If
End If
So the trick in most cases is to simply layout that extra row item, and then on the item data bound event you simply hide or show that heading part.

Accessing SelectedItem from DDL within Repeater's ItemCommand

Hey all — I'm trying to access the SelectedItem value from a DropDown list that is housed within a Repeater, but I am receiving a Null Exception that is thrown. This repeater would iterate over upwards of 10 "products". Here is the code from my Web Form:
<asp:repeater ID="rptProducts" runat="server" OnItemDataBound="rptProducts_ItemDataBound" OnItemCommand="rptProducts_ItemCommand">
<ItemTemplate>
<div class="col-md-8 col-md-offset-2 product">
<img src="<%# Eval("ImageFile") %>" class="col-xs-12" alt="<%# Eval("Name") %> Product Image"/>
<h3><%# Eval("Name") %></h3>
<p><%# Eval("ShortDescription") %></p>
<asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList>
<asp:Button ID="Button1" runat="server" Text="Add to Cart" CommandName="click" CommandArgument='<%# Eval("Name") %>' UseSubmitBehavior="false" />
</div>
</ItemTemplate>
</asp:repeater>
And the code from the .cs file where I'm trying to access DropDownList1's SelectedItem value.
protected void rptProducts_ItemCommand(object sender, CommandEventArgs e)
{
Repeater rpt = (Repeater)sender;
DropDownList productDDL = (DropDownList)rpt.Items[0].FindControl("DropDownList1");
int Qty = Convert.ToInt32(productDDL.SelectedItem.Text);
Debug.WriteLine(rpt.ID);
if (e.CommandName == "click")
{
Debug.WriteLine("Clicked " + e.CommandArgument.ToString() + "; Quantity: " + Qty);
}
}
The Exception is being thrown at this line:
int Qty = Convert.ToInt32(productDDL.SelectedItem.Text);
I'm trying to prep that data to be pushed into a Session state, so I'm testing to ensure it is accessible. Is there something I'm missing and or a better way to access that specific value?
In rptProducts_ItemCommand event you are using fixed item index 0, you need to select the item that fired item command
Below line of code will select the current triggered item.
DropDownList productDDL = (DropDownList)((RepeaterCommandEventArgs)e).Item.FindControl("DropDownList1");

Cannot set value of ListView Item

I am having trouble setting the value of a textbox inside a nested listview (listview inside a lsitview). What I am trying to do is pull values of two textboxes (which is working fine), multiply them together, and set that value to the third textbox (where I am having the trouble).
here is the listview setup that I have:
<asp:ListView ID="LV_Tickets" runat="server" ClientIDMode="Static" DataSourceID="SQL_Tickets" InsertItemPosition="FirstItem" OnPreRender="LV_Tickets_PreRender" DataKeyNames="TicketNum">
<SelectedItemTemplate>
<asp:ListView ID="LV_TicketProd" runat="server" DataKeyNames="ChargeID" DataSourceID="SQL_TicketProducts" InsertItemPosition="LastItem" OnPreRender="LV_TicketProd_PreRender" OnItemInserted="LV_TicketProd_ItemInserted" OnItemInserting="LV_TicketProd_ItemInserting" OnItemUpdated="LV_TicketProd_ItemUpdated" OnItemUpdating="LV_TicketProd_ItemUpdating">
<InsertItemTemplate>
<td>
<asp:TextBox ID="HoursOrCubesTextBox" runat="server" style="height: 20px; width: 165px;" Text='<%# Bind("HoursOrCubes") %>' OnTextChanged="HoursOrCubes_TextChanged" AutoPostBack="true" />
</td>
<td>
<asp:TextBox ID="RateTextBox" runat="server" style="height: 20px; width: 120px;" Text='<%# Bind("Rate") %>' OnTextChanged="Rate_TextChanged" AutoPostBack="true" />
</td>
<td>
<asp:TextBox ID="LineTotalTextBox" runat="server" style="height: 20px; width: 120px;" Text='<%# Bind("LineTotal") %>' />
</td>
</ InsertItemTemplate>
</ SelectedItemTemplate>
The current way that I am getting the values from HoursOrCubesTextBox and RateTextBox is:
protected void HoursOrCubesTextBox_TextChanged(object sender, EventArgs e)
{
ListView LV_TicketProd = (ListView)Session["TicketProd"];
TextBox HoursOrCubesTextBox = (TextBox)(LV_TicketProd.InsertItem.FindControl("HoursOrCubesTextBox"));
string HoC = HoursOrCubesTextBox.Text //This here is getting the value from the textbox.
}
But when I try to do the opposite to set the value of the textbox nothing happens:
TextBox LineTotalTextBox = (TextBox)(LV_TicketProd.InsertItem.FindControl("LineTotalTextBox"));
LineTotalTextBox.Text = FinalValue; //FinalValue is the two values multiplied together.
I have check that the values coming from the textboxes are correct, and that when I multiply them together I get a value that is an integer. So I am not entirely sure why I cannot set the value of the LineTotalTextBox. Any help will be greatly appreciated.
Don't try reading & writing into the item template. That's the ListView's job.
Read & write the data source which the ListView is bound to.
I'd show examples if what I mean, but I can't figure your code.... Are you filling the ListView from an SQL db or from User input?
I figured out how to fix this problem. What I did was set the two textboxes HoursOrCubes and Rate to autopostback, then did the multiplication and setting of the textbox in the onload function.

Firing different linkbuttons in a Repeater and saving the value of each in an arraylist

Im using a repeater to display some products in an online shop for a school project. This is how the front end looks with the repeater
<asp:Repeater ID="Repeater1" runat="server" OnItemCommand="rptList_ItemCommand">
<ItemTemplate>
<span style="float:left; padding:25px;" class="backgrnd">
<asp:ImageButton ID="imgProd" runat="server" style="width:150px; height:150px;" ImageUrl='<%# DataBinder.Eval(Container.DataItem, "productImg")%>' CommandArgument='<%# DataBinder.Eval(Container.DataItem, "productID")%>' CommandName="ViewIndividProd"/><br />
<p style="clear:left;">
<asp:Label ID="lbName" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "productName")%>' /><br />
<asp:Label ID="lbUnitPrice" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "unitPrice")%>'/><br />
<asp:Label ID="lbRatings" runat="server" Text=''>Ratings</asp:Label><br />
<asp:LinkButton ID="linkCart" runat="server" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "productID")%>' CommandName="AddToCart">Add to Cart</asp:LinkButton>
</p>
</span>
</ItemTemplate>
</asp:Repeater>
As you can see I've added on the OnItemCommand in the Repeater tag so that this is invoked whenever one of the buttons(image/link) is fired. That works perfectly fine for both commandname AddToCart and ViewIndividProd. However, i want to store the the productid of a specific item that was invoked by the particular button. In my case now, it only stores ONE productid in the arraylist at a time and 'forgets' the productid that was stored previously when another linkbutton is clicked.
Question How do i make it such that everytime a linkbutton in the repeater is fired, it remembers the productid pertaining to the linkbutton that was fired and save these ids into the arraylist?
This is how the back end looks
ArrayList cart = new ArrayList();
protected void rptList_ItemCommand(object sender, RepeaterCommandEventArgs e) {
if (e.CommandName == "ViewIndividProd") {
Session["productID"] = e.CommandArgument.ToString();
Response.Redirect("IndividProduct.aspx");
}
if (e.CommandName == "AddToCart") {
string prodid = e.CommandArgument.ToString();
cart.Add(prodid);
Session["ShoppingCart"] = cart;
Response.Redirect("IndividCat.aspx");
}
msg.Text = "Shopping cart: " + String.Join(",", cart.ToArray());
}
Your feedback would be much appreciated.
You need to understand the Asp.net Page life cycle.
A new instance of your Page object is created on every request.
Values from your input are populated into it.
Your array list is getting recreated every time.
If you want the values to persist, you will have to store your arraylist in the ViewState or the Session
Refer: How to: Save Values in View State
void Page_Load(object sender, EventArgs e)
{
if (ViewState["arrayListInViewState"] != null)
{
PageArrayList = (ArrayList)ViewState["arrayListInViewState"];
}
else
{
// ArrayList isn't in view state, so we need to create it from scratch.
PageArrayList = CreateArray();
}
// Code that uses PageArrayList.
}
We can store comma separated or JSON value in either Session or hidden variable (If you are on the same page and opening new page in different tab then we can use hidden variable also). So every time an button has been click we can append the product id.

Select All Checkbox feature in gridview not being implemented

I am having header in gridview that labels as "xls" and a checkbox, that when selected should select all the checkbox columns in gridview and unchecking the xls column should uncheck all the columns.
I am following two links:
Link-1
Here, the totalChkBoxes variable is coming null (despite my gridview has rows). In fact when debugging the JS, code inside parseInt and below line is coming as ''
Link-2
Here also the GridView2 variable is coming null.
One common change that i am doing in both the JS is replacing the <%=.....%> by <%#....%>
Please guide as to what i am doing wrong. You can also help by giving some suitable link to implement the desired functionality
CODE UPDATED WITH MY WORKING JS
<script type="text/javascript" language="javascript">
function checkAllBoxes() {
var gvControl = document.getElementById("gvSample");
//this is the checkbox in the item template.
var gvChkBoxControl = "chkSelectItem";
//Header Template checkbox.
var mainChkBox = document.getElementById("chkBoxAll");
//Array of Inputs in gridview.
var inputTypes = gvControl.getElementsByTagName("input");
for (var i = 0; i < inputTypes.length; i++) {
//if the input type is a checkbox and the id of it is what we set above
//then check or uncheck according to the main checkbox in the header template
if (inputTypes[i].type == 'checkbox' && inputTypes[i].id.indexOf(gvChkBoxControl, 0) >= 0)
inputTypes[i].checked = mainChkBox.checked;
}
}
GRIDVIEW CODE
<asp:TemplateField>
<HeaderTemplate>
<table style="width: 15px" cellpadding="0" cellspacing="0">
<tr>
<td>
<asp:Label ID="lblXls" runat="server" Text="xls"></asp:Label>
<br />
<input id="chkBoxAll" type="checkbox" onclick="checkAllBoxes()" />
</td>
</tr>
</table>
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkSelectItem" runat="server" />
</ItemTemplate>
</asp:TemplateField>
Thanks!
Try changing your parseInt to something like this to see if it helps at all. I know it's only a small change, but small things tend to break JS code:
var totalChkBoxes = parseInt("<%=gvTest.Rows.Count%>");
Secondly, if you have runat="server" on the checkbox in the header, you may need to change this line if your JSFunction:
var mainChkBox = document.getElementById("<%=chkBoxAll.UniqueID%>");

Categories