My web project uses LINQ To SQL to access the data and a repeater control to display it.
To my knowledge, the repeater doesn't have a paging system built into it like a GridView does, so I thought I'd opt for an infinite scroll.
I found this jquery plugin that seemed to work initially although after a few tests, I found that it wasn't "hiding" items anymore.
The project uses a "behind-the-scenes" class where the data access is done, clearing up the page's partial class to handle how the data is displayed:
// App_Code/netGuestData.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using netguestModel;
public class netguestData
{
private netguestEntities ne = new netguestEntities();
public netguestData()
{
//
// TODO: Add constructor logic here
//
}
public IEnumerable<post> GetPosts()
{
var posts = from p in ne.posts
select p;
return posts;
}
}
// ~/Default.aspx.cs
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
loadGuestbook();
}
}
private void loadGuestbook()
{
netguestData nd = new netguestData();
rptGuestbook.DataSource = nd.GetPosts();
rptGuestbook.DataBind();
}
}
Here's the markup...
<asp:Repeater runat="server" ID="rptGuestbook" OnItemCommand="rptGuestbook_ItemCommand"
OnItemDataBound="rptGuestbook_ItemDataBound">
<ItemTemplate>
<div runat="server" id="divPost" class="post">
<div runat="server" id="divAuthor" class="author">
<asp:Panel runat="server" ID="pnlAdmin" CssClass="delete-button" Visible="false">
<asp:Button runat="server" ID="btnDeletePost" CssClass="button" Text="Delete Post"
CommandName="DeletePost" CommandArgument='<%# Eval("postid") %>' />
<asp:Label runat="server" ID="lblShowEmail" Text='<%# Eval("showemail") %>' CssClass="hidden"></asp:Label>
</asp:Panel>
<ul>
<li><span>Posted By: </span>
<%# Eval("postauthor") %><br />
<li>
<asp:HyperLink runat="server" ID="lnkWeb" ImageUrl="~/Images/webicon.png" NavigateUrl='<%# Eval("webaddress") %>'></asp:HyperLink></li>
<li>
<asp:HyperLink runat="server" ID="lnkEmail" ImageUrl="~/Images/emailicon.png" NavigateUrl='mailto: <%# DataBinder.Eval(Container.DataItem, "emailaddress" %>'></asp:HyperLink></li>
</ul>
</div>
<div runat="server" id="divMessage" class="post-message">
<div class="post-date"><span>Posted On:</span> <%# Eval("postdate") %></div>
<%# Eval("postmessage") %></div>
<div class="scroll"></div>
</div>
</ItemTemplate>
</asp:Repeater>
It's all pretty straightforward. To achieve infinite scroll with the repeater, I found this article on dotnetcurry but this just does everything in the _Default partial class which doesn't suit me at all.
I've been trying to figure out how to tweak this example to fit my situation, but so far, I'm coming up empty.
If anyone can help me to make infinite scrolling work on my project - even if you just explain the concept of what I have to do - I'd be very grateful.
Thanks in advance!
Okay so I asked in a group on facebook and someone there suggested lazy loading.
Here's a question I asked a little while ago that has all the details.
NOTE:
After changing my code to take the answer to the question into account, I've noticed that this doesn't add the 2nd/3rd/4th/etc set of 10 rows to the existing set as I had expected.
Related
I'm not sure if this is the right approach, but still went ahead.
The template has these fields
Description [Rich Text]
Images [TreelistEx]
User will select pics from the media library using the TreelistEx field, which later would be displayed in a carousel. User should also be able to edit those images.
My code is not displaying any images.
aspx:
<div class="toggle_1bs">
<asp:Repeater ID="rpImages" runat="server" OnItemDataBound="rpImages_ItemDataBound"
ItemType="Sitecore.Data.Items.Item">
<HeaderTemplate>
<div id="1bs" class="owl-carousel">
</HeaderTemplate>
<ItemTemplate>
<div class="item">
<sc:Image ID="imgMain" Field="Images" runat="server" CssClass="img-full"
Item="<%#Container.DataItem %>"/>
</div>
</ItemTemplate>
<FooterTemplate>
</div>
</FooterTemplate>
</asp:Repeater>
</div>
aspx.cs:
private void BindData()
{
//bind data to the repeater
MultilistField offerImages = (MultilistField)offerDetails.Fields["Images"];
rpImages.DataSource = offerImages.GetItems();
rpImages.DataBind();
}
protected void rpImages_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
var mainItem = (Item)e.Item.DataItem;
if (mainItem != null)
{
var imgMain = (Image)e.Item.FindControl("imgMain");
if(imgMain != null)
{
if (!string.IsNullOrEmpty(MediaManager.GetMediaUrl(mainItem)))
imgMain.DataSource = MediaManager.GetMediaUrl(mainItem);
//Response.Write(MediaManager.GetMediaUrl(mainItem));
}
}
}
There are 2 images added using the treelist control and I can see the html rendered for the 2 images (<div class="item"></div>).
You don't have field which is an Image type field. That's why you cannot use sc:Image like that.
You're getting list of media items from your TreeListEx.
Remove your rpImages_ItemDataBound and try something like this instead:
<ItemTemplate>
<img src='<%# Sitecore.StringUtil.EnsurePrefix('/', Sitecore.Resources.Media.MediaManager.GetMediaUrl((Sitecore.Data.Items.Item)Container.DataItem)) %>' />
</ItemTemplate>
I have the next structure for a menu item:
class MenuItem
{
public string Path, Title;
}
I want to be able to Iterate an object of MenuItem[], creating a new object of asp:HyperLink on each iteration, and to add it to a <ul> list.
One thing that must happen is that each HyperLink will be inside a <li> tag.
How can I do that?
You can use a repeater. In the aspx:
<asp:Repeater ID="repMenuItems" runat="server">
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<li><asp:HyperLink ID="lnkMenuItem" runat="server" Text='<%# Eval("Title") %>' NavigateUrl='<%# Eval("Path")%>'/></li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
And in the codebehind:
repMenuItems.DataSource = arrMenuItem; // your MenuItem array
repMenuItems.DataBind();
Additionaly you should change your class code for using Public Properties instead of Public Members, like this:
public class MenuItem
{
public string Title {get;set;}
public string Path {get;set;}
}
I recommend you to read more about Properties in .NET, a nice feature for object encapsulation http://msdn.microsoft.com/en-us/library/65zdfbdt(v=vs.71).aspx
Hope this helps you
I am trying to access a public bool in the html piece of a custom user control. Here is a portion of my codebehind:
public partial class ToDoList : System.Web.UI.UserControl
{
public bool ShowAddNewButton { get; set; }
public bool CreateMode { get;set;}
protected void Page_Load(object sender, EventArgs e)
{
}
}
Here is my html:
<%# Control Language="C#" AutoEventWireup="True" CodeBehind="ToDoList.ascx.cs" Inherits="ToDoList" %>
<div id="leftNav">
<asp:HiddenField ID="hfNAVItems" runat="server" />
<asp:HiddenField ID="hfRequestID" runat="server" />
<asp:HiddenField runat="server" ID="hdnAllowDragDrop" />
<div class='nav-header'>
<div>
My To-Do List</div>
</div>
<ul id="mainNav" class="nav-item-list">
<li class="nav-item" id="firstNavContainer">
<div>
<span class="nav-item-todos">
<asp:Label Text="" runat="server" ID="lblfirstSectionHeader" /></span>
<% if(ShowAddNewButton)
{ %>
<asp:Button ID="Button1" runat="server" Text="Add New" CssClass="navaddnewrequest todo-button"
OnClick="btnNewToDo_Click" />
<%} %>
</div>
<ul id="todosNav">
<% if (CreateMode)
{ %>
<li class="SelectedNavHeader">New Todo</li>
<% } %>
<asp:Repeater runat="server" ID="rptToDoNavItems">
<ItemTemplate>
<li class="ToDoSelectedNavGroup" runat="server" id="liToDoNavGroupCont">
<asp:Literal runat="server" ID="lblToDoNavGroupDisplay" /></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</li>
</ul>
<ul id="lineItemNav">
<li class="darkgradient header">My Lists</li>
</ul>
</div>
I am getting the following errors:
The name 'ShowAddNewButton' does not exist in the current context
The name 'CreateMode' does not exist in the current context
scratching my head on this one... seems pretty elemental. Would be happy to learn that I am missing something completely obvious.
Thanks in advance
An alternative method to manage this is using Visible property. You'll need to set your li as runat="server"
<asp:Button ID="Button1" runat="server" Text="Add New" CssClass="navaddnewrequest todo-button"
OnClick="btnNewToDo_Click" Visible='<%= ShowAddNewButton %>'/>
....
<li ID="liNewTodo" runat="server" class="SelectedNavHeader"
Visible='<%= CreateMode %>'>New Todo</li>
If memory serves, you can't really mix code-behind properties and server-side script. You have to pick one. But it's been a long time since I tried it, so maybe you can.
It seems to me that, assuming you can do it, the problem is that the server-side script is interpreting your property names as variable names. You could try prefixing them with this or base and seeing if that helps.
I have a search results page where the list views visible property is always false on the first page load even though I set the value to true as seen below. It seems line is being ignored? Is there a reason why this property cannot be set on the first load?
EDIT: Page load Event
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
if (Request.QueryString["query"] != null)
{
_searchTerm = Request.QueryString["query"].ToString();
GetSearchResults();
txtSearchBox.Text = _searchTerm;
}
}
}
ListView Markup
<asp:PlaceHolder runat="server" ID="SearchResults" Visible="false">
...
<asp:ListView id="lvSearch" runat="server">
<LayoutTemplate>
<ul id="SearchResultsList">
<asp:PlaceHolder runat="server" ID="itemPlaceholder"></asp:PlaceHolder>
</ul>
</LayoutTemplate>
<ItemTemplate>
<li class="searchResult">
<h2><%#DataBinder.Eval(Container.DataItem, "Title")%></h2>
<p><%#DataBinder.Eval(Container.DataItem, "HighlightedPreview")%></p>
<%#DataBinder.Eval(Container.DataItem, "URL")%>
</li>
</ItemTemplate>
</asp:ListView>
<div runat="server" id="NoResults" visible="false">
<p>The current search has returned no results. Please enter another search term in the box above.</p>
</div>
</asp:PlaceHolder>
Check that it is not in the DIV-NoResults or some other container that is going invisible.
Is there a way to display a gridview in a tooltip?
In the standard tooltip no, but you'd have to write your own tool tip class to accomplish this.
If you are using jquery you could do this using the QTip Plugin
.
I use QTip in a lot of apps, but I'm not sure this is the best solution.....it's a lot of overhead if this is all you're using it for, and it's really very straightforward to do it from scratch. I'd treat it as a simple tab pane that is toggled by Jquery, using a $(element).show() to make it show.
Here's a tut along those lines: http://spyrestudios.com/how-to-create-a-sexy-vertical-sliding-panel-using-jquery-and-css3/
As an aside, while I know .net has some gridviews available, I'm in love with additional functionality that datatables provides. Far and away, this is the one JQuery plugin that my clients cite as adding true value to their apps.
i am using VS2010 and in VS 2012 intellisense is showing tooltip option in Designer page.
You can use ModalPopup to achieve it and use JavaScript to show it dynamically.
Please try the below sample:
<script type="text/javascript">
function getTop(e)
{
var offset=e.offsetTop;
if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
return offset;
}
function getLeft(e)
{
var offset=e.offsetLeft;
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
return offset;
}
function hideModalPopupViaClient()
{
var modalPopupBehavior = $find('ModalPopupExtender');
modalPopupBehavior.hide();
}
function showModalPopupViaClient(control,id) {
$get("inputBox").innerText="You choose the item "+control.innerHTML;
var modalPopupBehavior = $find('ModalPopupExtender');
modalPopupBehavior.show();
$get(modalPopupBehavior._PopupControlID).style.left=getLeft($get('<%=DataList1.ClientID %>'))+ $get('<%=DataList1.ClientID %>').offsetWidth+"px";
$get(modalPopupBehavior._PopupControlID).style.top=getTop(control)+"px";
}
<body>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager runat="Server" ID="ScriptManager1" />
<input id="Hidden1" runat="server" type="hidden" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DataList ID="DataList1" runat="server" DataSourceID="SqlDataSource1" >
<ItemTemplate>
<div style="border-color:Black;border-width:1px;border-style:solid;">
<asp:Label ID="Label1" Text='<%# Eval("CategoryID") %>' runat="server"></asp:Label>
<asp:HyperLink ID="detail" runat="server" onmouseout="hideModalPopupViaClient()" onmouseover="showModalPopupViaClient(this)">'<%# Eval("CategoryID") %>'</asp:HyperLink>
</div>
</ItemTemplate>
</asp:DataList>
</ContentTemplate>
</asp:UpdatePanel>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM [Categories]"></asp:SqlDataSource>
<asp:Button runat="server" ID="showModalPopupClientButton" style="display:none"/>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server" TargetControlID="showModalPopupClientButton"
PopupControlID="programmaticPopup" RepositionMode="None"
/>
<br />
<div CssClass="modalPopup" id="programmaticPopup" style="background-color:#EEEEEE; filter:alpha(opacity=70);opacity:0.7;display:none;width:50px;padding:10px">
<span id="inputBox" ></span>
<br />
</div>
</form>
Yes, you can get the tooltip in ASP.net grid view. See the below code, which should be included in the GridView1_RowDataBound event:
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) {
if (e.Row.RowType == DataControlRowType.Header) {
for (int i = 0; i < GridView1.Columns.Count; i++) {
e.Row.Cells[i].ToolTip = GridView1.Columns[i].HeaderText;
}
}
}