asp.net repeater control scrolling with ajax - asp.net

I want to make repeater data scrollable with ajax scrolling just like facebook do in news feeds here is my code
please help me I want all these fetched with page scroll.
ASPX page
<form id="form1" runat="server">
<asp:Repeater ID="RepDetails" runat="server">
<HeaderTemplate>
<table style=" border:1px solid #df5015; width:500px" cellpadding="0">
<tr style="background-color:#df5015; color:White">
<td colspan="2">
<b>Comments</b>
</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr style="background-color:#EBEFF0">
<td>
<table style="background-color:#EBEFF0;border-top:1px dotted #df5015; width:500px" >
<tr>
<td>
Subject:
<asp:Label ID="lblSubject" runat="server" Text='<%#Eval("Subject") %>' Font-Bold="true"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblComment" runat="server" Text='<%#Eval("Comment") %>'/>
</td>
</tr>
<tr>
<td>
<table style="background-color:#EBEFF0;border-top:1px dotted #df5015;border-bottom:1px solid #df5015; width:500px" >
<tr>
<td>Post By: <asp:Label ID="lblUser" runat="server" Font-Bold="true" Text='<%#Eval("UserName") %>'/></td>
<td>Created Date:<asp:Label ID="lblDate" runat="server" Font-Bold="true" Text='<%#Eval("PostedDate") %>'/></td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</ItemTemplate>
</table>
</asp:Repeater>
code behind file
protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack)
{
BindRepeaterData();
}
}
//Bind Data to Repeater Control
protected void BindRepeaterData()
{
con.Open();
SqlCommand cmd = new SqlCommand("select * from Repeater_Table Order By PostedDate desc", con);
DataSet ds = new DataSet();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(ds);
RepDetails.DataSource = ds;
RepDetails.DataBind();
con.Close();
}
please help me I want all these fetched with page scroll.

I think what you are looking for is typically called "infinite scroll". Try doing a Google search for some examples. Here's one that might be a good start:
http://weedallaboutit.wordpress.com/2011/10/13/infinite-scrolling-with-an-asp-net-webform-jquery-and-a-little-bit-of-code/

Working example:
http://www.aspsnippets.com/Articles/Infinite-scroll-images-like-Bing-and-Google-in-ASPNet.aspx
There is also download option in this page.

Related

How to get value from a listview Asp.Net

I have a listview in asp.net like this:
<asp:ListView ID="lvLoads" DataKeyNames="BookingId" OnItemCommand="lvLoads_OnItemCommand" runat="server">
<EmptyDataTemplate>
<table>
<tr>
<td>No data was returned.</td>
</tr>
</table>
</EmptyDataTemplate>
<GroupTemplate>
<asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
</GroupTemplate>
<ItemTemplate>
<fieldset>
<table class="table table-striped table-responsive">
<thead>
<tr class="hidden-lg">
<th width="15%">Type</th>
<th width="31%">Details</th>
<th width="25%">Distance/Duration</th>
<th width="21%"> </th>
</tr>
</thead>
<tbody>
<tr>
<td width="15%">
<asp:Label CssClass="hide" ID="lblBokingId" runat="server"><%# Eval("BookingId") %></asp:Label>
<asp:Label ID="lblLoadTypeName" runat="server"> <%# Eval("LoadTypeName") %></asp:Label>
<br>
</td>
<td width="21%">
<asp:LinkButton ID="btnViewMore" CssClass="btn btn-warning" CommandName="ViewMore" runat="server">View More</asp:LinkButton>
</td>
</tr>
</tbody>
</table>
</fieldset>
</ItemTemplate>
</asp:ListView>
Now on click of the button ViewMore i wrote this code to extract listviewItem's value:
var id = ((Label)e.Item.FindControl("lblBookingId")).Text;
var name = ((Label)e.Item.FindControl("lblLoadTypeName")).Text;
But e.Item.FindControl("lblBookingId") always comes null. I checked the page's html by using inspect element of chrome, and i was shocked to see that my id somehow got changed to ContentSection_ctl00_lblLoadTypeName_0
I am really stuck at this. Please help me. Thanx in Advance
I had done some work with your list view and one which i had created to resemble the problem.
Default2.aspx:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<div>
WORKING EXAMPLE
<asp:ListView ID="lvLoads" runat="server">
<LayoutTemplate>
<table border="0" cellpadding="1">
<tr style="background-color: #E5E5FE">
<th align="left">EmployeeId
</th>
<th align="left">LastName
</th>
<th align="left"></th>
</tr>
<tr runat="server" id="itemPlaceholder" />
</table>
</LayoutTemplate>
<ItemTemplate>
<tr id="Tr1" runat="server">
<td id="Td1" runat="server">
<asp:Label ID="lblCustomerID" runat="server" Text='<%# Eval("BookingId") %>'></asp:Label>
</td>
<td id="Td2" runat="server">
<asp:Label ID="lblLastName" runat="server" Text='<%# Eval("LoadTypeName") %>'></asp:Label>
</td>
<td id="Td3" runat="server">
<asp:LinkButton ID="lnkSelect" runat="server" OnClick="btnViewMore_Click" Text="Select" />
</td>
</tr>
</ItemTemplate>
</asp:ListView>
</div>
<div>
ERROR
<asp:ListView ID="ListView1" DataKeyNames="BookingId" OnItemCommand="lvLoads_OnItemCommand" runat="server">
<EmptyDataTemplate>
<table>
<tr>
<td>No data was returned.</td>
</tr>
</table>
</EmptyDataTemplate>
<GroupTemplate>
<asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
</GroupTemplate>
<ItemTemplate>
<fieldset>
<table class="table table-striped table-responsive">
<thead>
<tr class="hidden-lg">
<th width="15%">Type</th>
<th width="31%">Details</th>
<th width="25%">Distance/Duration</th>
<th width="21%"> </th>
</tr>
</thead>
<tbody>
<tr>
<td width="15%">
<asp:Label CssClass="hide" ID="lblBokingId" runat="server"><%# Eval("BookingId") %></asp:Label>
<asp:Label ID="lblLoadTypeName" runat="server"> <%# Eval("LoadTypeName") %></asp:Label>
<br>
</td>
<td width="21%">
<asp:LinkButton ID="btnViewMore" CssClass="btn btn-warning" OnClick="btnViewMore_Click1" runat="server">View More</asp:LinkButton>
</td>
</tr>
</tbody>
</table>
</fieldset>
</ItemTemplate>
</asp:ListView>
</div>
</div>
</form>
Default2.aspx.cs:
public partial class Default2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Class1 obj = new Class1();
lvLoads.DataSource = obj.bind();
lvLoads.DataBind();
ListView1.DataSource = obj.bind();
ListView1.DataBind();
}
protected void lvLoads_OnItemCommand(object sender, ListViewCommandEventArgs e)
{
}
protected void btnViewMore_Click(object sender, EventArgs e)
{
LinkButton btn = sender as LinkButton;
ListViewDataItem item = (ListViewDataItem)(sender as Control).NamingContainer;
Label lblStatus = (Label)item.FindControl("lblLastName");
string message = lblStatus.Text;
}
protected void btnViewMore_Click1(object sender, EventArgs e)
{
LinkButton btn = sender as LinkButton;
ListViewDataItem item = (ListViewDataItem)(sender as Control).NamingContainer;
Label lblStatus = (Label)item.FindControl("lblLoadTypeName");
string message = lblStatus.Text;
}
}
Class1:
public class Class1
{
public int BookingId { get; set; }
public string LoadTypeName { get; set; }
public Class1()
{
}
public List<Class1> bind()
{
List<Class1> data = new List<Class1>();
Class1 obj = new Class1();
obj.BookingId = 1;
obj.LoadTypeName = "Type name1";
data.Add(obj);
obj = new Class1();
obj.BookingId = 2;
obj.LoadTypeName = "Type name2";
data.Add(obj);
obj = new Class1();
obj.BookingId = 3;
obj.LoadTypeName = "Type name3";
data.Add(obj);
obj = new Class1();
obj.BookingId = 4;
obj.LoadTypeName = "Type name4";
data.Add(obj);
return data;
}
}
As you can see in both list view there is only problem related with design which you are using in your list view. Please change design as per your requirement.
You are placing control in further other controls that's why id will change at run time.
hope it will help you.

drop down list Selected index changed event not working

On my form,I am having one drop down list.I have filled drop down list on page load event.Even i have check if not is post back.My drop down list's auto post back property is true.But still the event is not firing.I have to show some value in text box on selected index changed of drop down list.
my design code is as below:
enter code here
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div>
<table class="tblContentcss">
<tr>
<td class="tdContent1css">
<asp:Label runat="server" ID="lblUserRole" Text="Role"></asp:Label>
</td>
<td class="tdContent2css">
:
</td>
<td class="tdContent3css">
<asp:TextBox runat="server" ID="txtUserRole" Text="User" ReadOnly="true"></asp:TextBox>
</td>
</tr>
<tr>
<td class="tdContent1css">
<asp:Label runat="server" ID="lblUserID" Text="User ID"></asp:Label>
</td>
<td class="tdContent2css">
:
</td>
<td class="tdContent3css">
<asp:DropDownList ID="ddlUserID" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlUserID_SelectedIndexChanged">
</asp:DropDownList>
</td>
</tr>
<tr>
<td class="tdContent1css">
<asp:Label runat="server" ID="lblUserName" Text="User Name"></asp:Label>
</td>
<td class="tdContent2css">
:
</td>
<td class="tdContent3css">
<asp:TextBox runat="server" ID="txtUserName" AutoPostBack="true"></asp:TextBox>
</td>
</tr>
<tr>
<td class="tdContent1css">
<asp:Label runat="server" ID="lblUserPassword" Text="Password"></asp:Label>
</td>
<td class="tdContent2css">
:
</td>
<td class="tdContent3css">
<asp:TextBox runat="server" ID="txtPassword" TextMode="Password"></asp:TextBox>
</td>
</tr>
<tr>
<td class="tdContent1css">
<asp:Label runat="server" ID="Label1" Text="Password"></asp:Label>
</td>
<td class="tdContent2css">
:
</td>
<td class="tdContent3css">
<asp:Button runat="server" ID="btnSave" Text="Save" OnClick="btnSave_Click" />
</td>
</tr>
</table>
</div>
</asp:Content>
and in.cs on page_load
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
fillUserID();
}
}
protected void ddlUserID_SelectedIndexChanged(object sender, EventArgs e)
{
fillUserID();
SqlConnection con = dal.GetConnection();
dsUserName = new DataSet();
query = "SELECT CUSTID,(FNAME+' '+MNAME+' '+LNAME) AS USERNAME FROM CUSTOMER where CUSTID=" + Convert.ToInt32(ddlUserID.SelectedValue) + "";
dsUserName = dal.ReturnDataset(query, con);
if (dsUserName.Tables.Count > 0 && dsUserName.Tables[0].Rows.Count > 0)
{
txtUserName.Text = dsUserName.Tables[0].Rows[0]["USERNAME"].ToString();
}
}
what is the problem,i am not getting.
Suggest me any solution
When the autopostback is set True, after the page is rendered, a javascript is added on the onchange event of the dropdown (SELECT in HTML) to trigger the postback,
View the source after the page is rendered and check whether the javascript is getting added to the onchange event of the dropdown.
If you are adding some javascript on the onchange event of the dropdown in the code-behind, that might also stop the page to postback.
I get that from this link: https://www.codeproject.com/Questions/138183/Drop-down-selected-index-change-event-not-working

how to create dynamic textbox,dropdownlist in asp.net

I want to create dynamic 2 textbox and 2 dropdownlist below each textbox and dropdownlist in button click. This is the code i am using which creates dynamic textbox and dropdownlist but its creating control in horizontal way.I want creation of dynamic controls in a vertical manner which will be coming under textbox and dropdown.
<div id="dvContainer" runat="server">
<table align="center" cellpadding="0" cellspacing="0" width="90%">
<tr>
<td>
<table width="100%">
<tr>
<td align="center">Date</td>
<td>
<asp:TextBox ID="TextBox1" runat="server" Width="150px"> </asp:TextBox>
</td>
<td align="center">Time</td>
<td>
<asp:TextBox ID="TextBox2" runat="server" Width="150px"></asp:TextBox>
</td>
<td align="center">Godown</td>
<td>
<asp:DropDownList ID="DropDownList1" runat="server" Width="150px">
</asp:DropDownList>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><table width="100%">
<tr>
<td align="center">Item</td>
<td align="center">QTY</td>
<td align="center">Unit</td>
<td align="center">Available</td>
<td align="center"></td>
</tr>
<tr>
<td align="center">
<asp:DropDownList ID="DropDownList2" runat="server" Width="150px">
</asp:DropDownList>
</td>
<td align="center">
<asp:TextBox ID="TextBox3" runat="server" Width="150px"></asp:TextBox>
</td>
<td align="center">
<asp:DropDownList ID="DropDownList3" runat="server" Width="150px">
</asp:DropDownList>
</td>
<td align="center">
<asp:TextBox ID="TextBox4" runat="server" Width="150px"></asp:TextBox>
</td>
<td align="center">
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</td>
</tr>
</table></td>
</tr>
</table>
</div>
This is the code i am using in cs page
public partial class StockEntry : System.Web.UI.Page
{
protected System.Web.UI.WebControls.DropDownList Ddl_Item;
protected System.Web.UI.WebControls.TextBox Txt_Quantity;
protected System.Web.UI.WebControls.DropDownList Ddl_Unit;
protected System.Web.UI.WebControls.TextBox Txt_Available;
protected void Page_Load(object sender, EventArgs e)
{
}
int countTimes = 0;
protected void Button1_Click(object sender, EventArgs e)
{
if (ViewState["countTimes"] == null)
{
countTimes = 1;
}
else
{
countTimes = Convert.ToInt32(ViewState["countTimes"]);
}
for (int i = 0; i < countTimes; i++)
{
Ddl_Item = new DropDownList();
Ddl_Item.ID = "Ddl_Item" + i;
Ddl_Item.Width = 180 + i;
Txt_Quantity = new TextBox();
Txt_Quantity.ID = "Txt_Quantity" + i;
Txt_Quantity.Width = 180 + i;
Ddl_Unit = new DropDownList();
Ddl_Unit.ID = "Ddl_Unit" + i;
Ddl_Unit.Width = 180 + i;
Txt_Available = new TextBox();
Txt_Available.ID = "Txt_Available" + i;
Txt_Available.Width = 180 + i;
dvContainer.Controls.Add(Ddl_Item);
dvContainer.Controls.Add(Txt_Quantity);
dvContainer.Controls.Add(Ddl_Unit);
dvContainer.Controls.Add(Txt_Available);
}
countTimes = countTimes + 1;
ViewState.Add("countTimes", countTimes);
}
}
You are adding your controls in the div, not in the table and next to each other. To add some html structure around controls, you can create literal object with your html in its text, and add them before/after your controls (for example you can add <br/> )
I think what you want is HtmlGenericControl http://msdn.microsoft.com/en-us/library/system.web.ui.htmlcontrols.htmlgenericcontrol.aspx
This will allow you to add the table that you require to set your layout, you could of course wrap each control in a div and control your layout using CSS.

Add a new row in a gridview

next code shows a table filled (a gridview) with 5 columns and several rows. It's running well
while (drCLientes.Read())
{
GridView gv = new GridView();
gv.ID = "myGridID";
cong.Open();
da = new OleDbDataAdapter(sql, cong);
ds = new DataSet("Clientes");
da.Fill(ds, "Clientes");
cong.Close();
gv.DataSource = ds.Tables["Clientes"];
gv.DataBind();
}
After this code, the result is this:
Table that I have
Now I need to add a new row, in the first position. The first column empty. The second and third one columns must be combined. The same with the 4th and 5th ones. Here is an image with the table that I need:
Table that I need
Regards
You need to use Repeater instead of GridView.
<asp:Repeater ID="repList" runat="server" OnItemCommand="repList_ItemCommand">
<HeaderTemplate>
<table cellpadding="3" cellspacing="0" border="1" style="border-collapse: collapse;"
width="100%">
<thead style="text-align: center;" class="Gridheader">
<tr>
<td rowspan="2">Sequence</td>
<td colspan="4">Student</td>
<td colspan="3">Lesson</td>
<td rowspan="2">Point</td>
</tr>
<tr>
<td>Name</td>
<td>Surname</td>
<td>Age</td>
<td>Class</td>
<td>Name</td>
<td>Teacher</td>
<td>Time</td>
</tr>
</thead>
<tbody>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td align="center">
<asp:Label ID="lblSequence" runat="server" >
</asp:Label>
</td>
<td>
<asp:Label ID="lblStudentName" runat="server" >
</td>
<td>
<asp:Label ID="lblStudentSurname" runat="server" >
</td>
<td>
<asp:Label ID="lblStudentAge" runat="server" >
</td>
<td>
<asp:Label ID="lblLessonClass" runat="server" >
</td>
<td>
<asp:Label ID="lblLessonName" runat="server" >
</td>
<td>
<asp:Label ID="lblLessonTeacher" runat="server" >
</td>
<td>
<asp:Label ID="lblLessonTime" runat="server" >
</td>
<td>
<asp:Label ID="lblLessonPoint" runat="server" >
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</tbody>
</table>
</FooterTemplate>
</asp:Repeater>
and Code Behind;
public void rptr_OnItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
System.Data.Common.DbDataRecord objRow = (System.Data.Common.DbDataRecord)e.Item.DataItem;
Label lblAnswer = e.Item.FindControl("lblSequence") as Label;
lblAnswer.Text = objRow["Sequence"].ToString();
Label lblStudentName = e.Item.FindControl("lblStudentName") as Label;
lblStudentName.Text = objRow["StudentName"].ToString();
...
..
.
}
}

Can't access Subitems in ListView while looping

I am trying to loop over a ListView with a foreach statement, but I can't seem to get the Subitems of item. No success with a For statement either.
IntelliSense doesn't propose it on both ways.
Code Behind:
protected void btnNext_Click(object sender, EventArgs e)
{
foreach (ListViewItem item in ListView1.Items)
{
item. *(here a should get the Subitems)*
}
}
ASPX
<asp:ListView ID="ListView1" runat="server" DataSourceID="ObjectDataSource1">
<LayoutTemplate>
<table>
<tr>
<th>Customer</th>
<th>Item No</th>
</tr>
<asp:PlaceHolder runat="server" ID="itemPlaceholder"></asp:PlaceHolder>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td>
<%# Eval("CustomerName") %>
</td>
<td>
<%# Eval("Item") %>
</td>
</tr>
</ItemTemplate>
</asp:ListView>
you have to change your aspx page as below
<asp:ListView ID="ListView1" runat="server" DataSourceID="ObjectDataSource1">
<LayoutTemplate>
<table>
<tr>
<th>Customer</th>
<th>Item No</th>
</tr>
<asp:PlaceHolder runat="server" ID="itemPlaceholder"></asp:PlaceHolder>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td>
<asp:Label ID="lblCustomerName" Text='<%# Eval("CustomerName") %>' runat="server"></asp:Label>
</td>
<td>
<asp:Label ID="lblItem" Text='<%# Eval("Item") %>' runat="server"></asp:Label>
</td>
</tr>
</ItemTemplate>
</asp:ListView>
Now you have to use for each loop as below in code behind file
string strProductNames = string.Empty;
foreach (ListViewItem item in ListView1.Items)
{
Label lblCustomerName= (Label)item.FindControl("lblCustomerName");
// strProductNames = strProductNames + lblCustomerName.Text + "<br/>";
// you can get values in lblCustomerName.Text. use this value as per your requirement
}
Hope this will helps you..happy coding
you should use loop throug listview.items
for (int j = 0; j < this.listView1.Items.Count; j++)
{
ListViewItem item =
(ListViewItem)this.listView1.ItemContainerGenerator.ContainerFromIndex(j);
}
Get data being bound to ListView on DataBound event
you would treat the code inside of your loop the same way that it would be handled inside of the listView1_ItemDataBound event.

Resources