Rendering content in a grid layout - c#

I have a page where i am displaying videos with their title above them. I am currently using a Repeater which renders out a div with the video title and a div with the video iframe html. Everything is coming from a database table where i store the video title and video iframe html.
<asp:Repeater ID="RptVideos" runat="server" OnItemDataBound="RptVideos_ItemDataBound">
<ItemTemplate>
<div class="TrainingVideosVideoContainer">
<div class="Title">
<asp:Label ID="LblVideoTitle" runat="server" />
</div>
<div class="Video">
<asp:Literal ID="LitYoutubeVideo" runat="server" />
</div>
</div>
</ItemTemplate>
My problem being this renders them out one below the other in a list format. I wish to render my videos out in almost a grid format, so two side by side etc. How is best to go about this? HTML Rendering? Repeater? GridVIew?

I found that #Crowcoder was correct in this suggestion to use a DataList control. With this i was able to specify the layout being in a table format with the RepeatColumns being set to 2
<asp:DataList ID="DltVideos" runat="server" OnItemDataBound="DltVideos_ItemDataBound"
RepeatColumns="2" RepeatLayout="Table" Width="100%">
<ItemTemplate>
<div class="TrainingVideosVideoContainer">
<div class="Title">
<asp:Label ID="LblVideoTitle" runat="server" />
</div>
<div class="Video">
<asp:Literal ID="LitYoutubeVideo" runat="server" />
</div>
</div>
</ItemTemplate>
</asp:DataList>

Related

Repeater not firing proper with Divs on page in asp.net

I want to make a slideshow with divs in repeater items. there are two divs with different classes and cannot show page properly with it. Could you help me please to fix the problem?
Design cs is like this:
<div id="wowslider-container1">
<asp:Repeater ID="rpSlideshow" runat="server" >
<ItemTemplate>
<div class="ws_images">
<ul>
<li id="<%# Container.ItemIndex + 1 %>">
<img src="Yazar/data1/images/<%#Eval("Resmi") %>" alt="<%#Eval("AdSoyad") %>" title="<%#Eval("AdSoyad") %>"
id="<%#Eval("SlideID") %>" />
</li>
</ul>
</div>
<div class="ws_bullets">
<div>
<a href="#" title="<%#Eval("SlideID") %>"><span>
<img src="Yazar/data1/tooltips/<%#Eval("Resmi") %>" alt="<%#Eval("AdSoyad") %>" /><%#Eval("SlideID") %></span></a>
</div>
</div>
<div class="ws_shadow">
</div>
</ItemTemplate>
</asp:Repeater>
</div>
PS: I tried to combine divisions like below but it did not work proper.
((HtmlGenericControl)(e.Item.FindControl("myDiv"))).
Attributes["class"] = "id" + indexi++;
You need runat="server" attribute, if you want to access it at code behind.
<div id="myDiv" runat="server">...</div>
TIP: For that purpose, we normally use Panel server control which basically renders html div tag. The advantage is you can use strongly type CssClass property.
<asp:Panel id="MyPanel" runat="server">...</asp:Panel>
Usage: ((Panel)e.Item.FindControl("MyPanel")).CssClass = "id" + indexi++;
Please note that I rename the control id to MyPanel.

ASP.Net Repeater Responsive Controls Binding

I have ASP.Net controls for search attributes with check box options and ASP.NET repeater. For Responsive Design, I have same bindings in two different places to match the design.
Here, CheckBoxList ID=Options1 & ID=Options2 both having same binding but the code will repeat. I have 400 lines to check the conditions for single binding. i have to duplicate all the codes again for the another view. Is there any way to optimize the code to single bind with both views handling. ( Avoid duplicate binding and checking)?
// Desktop View
<div class="hidden-sm hidden-xs narrowSearch">
//Content
<asp:Repeater ID="rptAttributes1" runat="server" EnableViewState="true" OnItemDataBound="rptAttributes_ItemDataBound">
<ItemTemplate>
<li>
<div class="form">
<asp:CheckBoxList ID="Options1" runat="server" AutoPostBack="false" Visible="false"
DataTextField="EnOptionName" DataValueField="SubCategoryAttributeOptionID" Font-Strikeout="False" />
</div>
</li>
</ItemTemplate>
</asp:Repeater>
</div>
// Mobile view
<div class="sec_left hidden-lg hidden-md">
<div class="moremenu narrowSearch">
//Content
<asp:Repeater ID="rptAttribute2" runat="server" EnableViewState="true" OnItemDataBound="rptAttributes_ItemDataBound">
<ItemTemplate>
<li>
<div class="form">
<asp:CheckBoxList ID="Options2" runat="server" AutoPostBack="false" Visible="false"
DataTextField="EnOptionName" DataValueField="SubCategoryAttributeOptionID" Font-Strikeout="False" />
</div>
</li>
</ItemTemplate>
</asp:Repeater>
</div>
</div>
Code Behind:
CheckBoxList chklOptions1 = item.FindControl("Options1") as CheckBoxList;
CheckBoxList chklOptions2 = item.FindControl("Options2") as CheckBoxList;
You can place your repeater (including the declarative code as well as what you have in the code-behind of your page) into a custom user control. Then you put the user control in each section (desktop and mobile) of your page. This is the simplest way to avoid repeated code. Having said this, since you've only provided part of the code that's in the code-behind class of your page, I can't speak to what changes might be required when you move the imperative code you have in your page's code-behind class to the user control.
Good luck!

Adding 'Show More' functionality to a ASP Repeater

To put it as simple as I can. I have a website and the homepage is populated with an ASP Repeater control. This shows details of people you follows activities on the site within the last 30 days.
My problem being I dont want my homepage to be too long on loading if you follow lots of people and they have been participating in lots of recent activities, meaning the repeater will be extremely long and hence my page being stretched.
What I want is for the repeater to show say 15 items/rows then below this is a 'Show more' link which will show either show the rest or each time you click shows another 15 (either/or I will be happy with!)
Here is my repeater code...
<asp:Repeater ID="RptNewsFeed" runat="server"
onitemdatabound="RptNewsFeed_ItemDataBound">
<ItemTemplate>
<div class="NewsFeedItem">
<div class="ProfileImageContainer">
<asp:HyperLink ID="HlkProfileImageLink" runat="server" EnableViewState="false">
<asp:Image ID="ImgProfileImage" runat="server" EnableViewState="false" />
</asp:HyperLink>
</div>
<div class="ProfileLinkContainer">
<asp:HyperLink ID="HlkProfileLink" runat="server" EnableViewState="false" CssClass="ActionDoneBy"></asp:HyperLink>
<asp:Label ID="LblAction" runat="server" EnableViewState="false" CssClass="Action"></asp:Label>
<asp:HyperLink ID="HlkActionObjectLink" runat="server" EnableViewState="false" CssClass="ActionDone"></asp:HyperLink>
</div>
<div class="TimeContainer">
<asp:Label ID="LblActionTime" runat="server" EnableViewState="false"></asp:Label>
</div>
</div>
</ItemTemplate>
Thanks in advance for any help provided!

Show a Loading Message using master pages while page loads data asp.net

I have spent hours Googling and searching past questions but have struggled to get anywhere with those answers (be it I can't get it into my solution correctly or it isn't suitable for me as they don't have master pages).
My question is, I have a couple of asp.net pages which can take a while to load (sometimes 5 seconds+) as there is a lot of data being requested from a database on the Page_Load method. To stop users from thinking that the page has crashed and either refreshing the page or doing something else, I want to put up a Loading message hiding everything else on the page (apart from the menu) while it loads.
I am using ASP.Net 4.0 with master pages and coding in C#.
The one where I get the most success is using the UpdatePanel on my master page where the content template covers the contentplaceholder, however I know this is not the best way to go about it and anyway it only shows up once, i.e. The user logs in, the loading message appears and once all the data has loaded on the home page (dashboard.aspx) the loading message disappears, which is kind of what I want. However if the user goes away from that page and then clicks home the loading message never appears again, just takes a while to load. It also never appears for any other page that takes a noticeable time to load.
Below is the body of the master.aspx
<body>
<form runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div class="page">
<div class="header">
<div class="title">
<h1>
Header
</h1>
</div>
<div class="loginDisplay">
<asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
<AnonymousTemplate>
[ Log In
]
</AnonymousTemplate>
<LoggedInTemplate>
Welcome <span class="bold">
<asp:LoginName ID="HeadLoginName" runat="server" />
</span>! [
<asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out"
LogoutPageUrl="~/Default.aspx" />
]
</LoggedInTemplate>
</asp:LoginView>
</div>
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false"
IncludeStyleBlock="false" Orientation="Horizontal" OnMenuItemClick="NavigationMenu_MenuItemClick">
<Items>
<asp:MenuItem Text="Home" />
<asp:MenuItem Text="About" />
</Items>
</asp:Menu>
</div>
</div>
<div class="main">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<asp:Panel ID="Panel1" runat="server" HorizontalAlign="Center">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/loader.gif" />
</asp:Panel>
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanelAnimationExtender ID="UpdatePanel1_UpdatePanelAnimationExtender"
runat="server" Enabled="True" TargetControlID="UpdatePanel1">
</asp:UpdatePanelAnimationExtender>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
</form>
And below is the page for the dashboard.aspx (a page which has a long loading time)
<asp:Panel ID="PanelWelcome" runat="server">
<h1>
Welcome
<asp:Label ID="LabelUserName" runat="server" Text="[User Name]" /> to your
personal Dashboard.</h1>
<table width="100%" cellpadding="5px">
<tr>
<td style="width: 70%" valign="top">
<asp:Panel ID="Panel2" runat="server">
<p>
</p>
<h4>
Up and Coming </h4>
<br />
<asp:GridView ID="GridViewItin" runat="server" Width="100%" HorizontalAlign="Left"
OnRowDataBound="GridViewItin_RowDataBound">
</asp:GridView>
</asp:Panel>
</td>
<td style="width: 30%">
<asp:Panel ID="PanelProfile" runat="server">
<asp:ImageButton ID="ImageButtonProfile" runat="server" ImageUrl="~/Images/BlankProfile.jpg"
Width="150px" /><br />
<h4>
Name:</h4>
<asp:Label ID="LabelPARname" runat="server" Text="[Person Name]"></asp:Label>
<h4>
Company:</h4>
<asp:Label ID="LabelBARname" runat="server" Text="[Company Name]"></asp:Label>
<h4>
Date of Birth:</h4>
<asp:Label ID="LabelPARdob" runat="server" Text="[DOB]"></asp:Label><br />
<asp:LinkButton ID="LinkButtonProfilePage" runat="server" OnClick="LinkButtonProfilePage_Click">More details...</asp:LinkButton>
</asp:Panel>
</td>
</tr>
</table>
</asp:Panel>
Could you please show me the best way to go about it and where I am going wrong? Also how I can hide the ContentTemplate when the UpdateProgress template is showing that would be great?
Thanks.
Okay so I figured it out what I was doing wrong, I thought I would post what I did to hopefully help someone else who might end up with the same issues...
Basically I hadn't thought about it logically. There are controls outside the update panel such as a NavigationMenu which would never fire the update progress because they had nothing to do with the Panel! I had to add triggers to the update panel to deal with all the things that happen outside the panel.
So, in my master page I had the following code
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="NavigationMenu" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdateProgress ID="progress" runat="server" DynamicLayout="true" DisplayAfter="0">
<ProgressTemplate>
<div id="overlay">
<div id="modalprogress">
<div id="theprogress">
<asp:Image ID="loader" runat="server" ImageAlign="AbsMiddle" ImageUrl="~/images/loader.gif" />
Please wait...
</div>
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanelAnimationExtender ID="UpdatePanel1_UpdatePanelAnimationExtender"
runat="server" Enabled="True" TargetControlID="UpdatePanel1">
</asp:UpdatePanelAnimationExtender>
Hopefully that will help someone else!
You can use UpdateProgress control. You can get it From Toll box under Ajax Extensions Tab.
I am describing you a scenario:
Suppose I have One Upadate Panel name UpdatePnl1 , In that I have a Button Say GO.when we hit on go it should redirect to another page. before that it will promt you please wait.
Now my Code will be like that
<asp:UpdatePanel ID="UpdatePnl1" runat="server">
<ContentTemplate>
<asp:Button ID="BtnGO" runat="server" Text="GO" onclick="BtnGO_Click"/>
</ContentTemplate>
</asp:Updatepanel>
Button click code:
protected void BtnGO_Click(object sender, EventArgs e)
{
Response.Redirect("Example.aspx");
}
Now here is the code for UpdateProgress what you need to add
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePnl1" >
<ProgressTemplate>
<asp:Label ID="LblWaitMsg" runat="server" Text="Processing Request, Please Wait..."></asp:Label>
</ProgressTemplate>
</asp:UpdateProgress>
Note: Your page Should contain ScriptManager.

Dynamic Id property on items in ListView

I am developing a simple message board in ASP.NET Web forms and I list all posts in a ListView controller. My code looks something like this:
<ItemTemplate>
<article class="post">
<div class="postinfo">
<div class="postauthor">
Author: <strong><%# Eval("Author") %></strong>
</div>
<div class="postdate">
Date: <strong><%# Eval("PostDate", "{0:D}") %></strong>
</div>
<div class="postvotes">
<asp:Button class="postupvote" id='up<%# Eval("Id") %>' runat="server" />
<asp:Label ID="postvotescount_<%# Eval("Id") %>" class="postvotescount" runat="server" Text="<%# Eval("Votes") %> votes"></asp:Label>
<asp:Button class="postdownvote" id='down<%# Eval("Id") %>' runat="server" />
</div>
</div>
<div class="postcontent"><%# Eval("Text") %></div>
</article>
</ItemTemplate>
My problem is the voting functionality. I want to have css id properties, containing the unique database id of the post. That way I will know the Id of the post, it was voted for. So is this possible and if not, how can I achieve this?
Thanks!
You could use ClientIdMode and set it to predictable
http://msdn.microsoft.com/en-us/library/system.web.ui.clientidmode.aspx
<asp:ListView ID="ListView1"
ClientIDMode="Predictable"
ClientIDRowSuffix="ProductID"
DataSourceID="XmlDataSource1" runat="server" >
<ItemTemplate>
</ItemTemplate>
</asp:ListView>
This assumes you are using .Net 4.0 or above.

Categories