Create tab dynamically after showing 20 div in first tab.Actually I am generating a div dynamically,there may be 100 div generated dynamically.I want to show 20 div in one tab and if there are 100 div there it will automatically generate 5 tabs with 20 div in each tabs.
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">tab1</li>
<li class="TabbedPanelsTab" tabindex="0">tab2</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<div id="slider1" class="sliderwrapper">
<div class="contentdiv">
12345
</div>
<div class="contentdiv">
12345
</div>
</div>
<div id="paginate-slider1" class="pagination">
</div>
<div id="paginate1-slider1" class="pagination2">
</div>
</div>
</div>
</div>
Here I created a jsFiddle which generates the tabs dynamically based on the number of contentDivs: http://jsfiddle.net/Z6HN9/ , it may help you achieve your goal.
the HTML code:
<div id="tabs">
<ul id="tabLinks"></ul>
</div>
the JavaScript code:
$(function () {
var neededDivCount = 100; // number of contentDivs for test purposes
var divPerTab = 20; // number of contentDivs / tabs for test purposes
// create the conentDivs dynamically for test purposes
for (var i = 1; i <= neededDivCount; i++) {
$("body").append('<div class="contentDiv">div' + i + 'content</div>');
}
// create the tabs and tabLinks based on the number of contentDivs in the document
var neededTabCount = Math.floor(($(".contentDiv").length - 1) / divPerTab) + 1;
for (var i = 1; i <= neededTabCount; i++) {
$("#tabs").append('<div id="tab' + i + '"></div>');
$("#tabLinks").append('<li>tab' + i + '</li>');
}
// loop through the contentDivs and append them to the correct tab
$(".contentDiv").each(function (index) {
var appendToTabIndex = Math.floor(index / divPerTab) + 1;
$(this).appendTo($("#tab" + appendToTabIndex));
});
$("#tabs").tabs();
});
You can use 2 nested repeaters.. The child one is generated from datatable the returns your content records (content divs) and the parent one is dynamically generated from Anonymous types list.
ASPX
<%# Page Language="C#" AutoEventWireup="true" CodeFile="RP.aspx.cs" Inherits="RP" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" language="javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="tabs">
<%-- Tabs Links --%>
<asp:Repeater ID="TablLinkRepeater" runat="server">
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<li><a href="#Tab<%# Eval("TabIndex") %>">Tab
<%# Eval("TabIndex") %></a></li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
<%-- Tabs and Content --%>
<asp:Repeater ID="TabRepeater" runat="server">
<ItemTemplate>
<div id="Tab<%# Eval("TabIndex") %>">
<%-- Show TabIndex just for testing --%>
<h1>
Tab #
<%# Eval("TabIndex") %>
</h1>
<asp:Repeater ID="ContentRepeater" runat="server">
<ItemTemplate>
<div class="Content" id="ContentDiv" runat="server">
<%-- Some content--%>
<asp:Label ID="Name" runat="server" />
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</form>
</body>
</html>
C#
using System;
using System.Collections.Generic;
using System.Data;
using System.Web;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
public partial class RP : System.Web.UI.Page
{
private const int ContentPerTab = 20;
private DataTable SomeDatatable;
protected void Page_Load(object sender, System.EventArgs e)
{
if (!Page.IsPostBack)
{
//1) Load SomeDatatable from Database somehow
// Just for testing : replace with query to DB
SomeDatatable = new DataTable("x");
SomeDatatable.Columns.Add(new DataColumn("ContentIndex", Type.GetType("System.Int32")));
SomeDatatable.Columns.Add(new DataColumn("Name", Type.GetType("System.String")));
for (int x = 1; x <= 50; x++)
{
SomeDatatable.Rows.Add(new object[] {
x,
"Content " + x
});
}
///////////////////
//2) Create a dummy data source for the tab repeater using a list of anonymous types
List<object> TabList = new List<object>();
for (int I = 0; I < Math.Ceiling((decimal)SomeDatatable.Rows.Count / (decimal)ContentPerTab); I++)
{
TabList.Add(new { TabIndex = I });
}
TabRepeater.ItemDataBound += TabRepeater_ItemDataBound;
TabRepeater.DataSource = TabList;
TabRepeater.DataBind();
TablLinkRepeater.DataSource = TabList;
TablLinkRepeater.DataBind();
}
}
protected void TabRepeater_ItemDataBound(object sender, System.Web.UI.WebControls.RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item | e.Item.ItemType == ListItemType.AlternatingItem)
{
int TabIndex = -1;
int.TryParse(DataBinder.Eval(e.Item.DataItem, "TabIndex").ToString(), out TabIndex);
//Copy Content Rows from SomeDatable that belong to this tab
DataTable Dt = SomeDatatable.Clone();
for (Int32 i = TabIndex * ContentPerTab; i <= (TabIndex + 1) * ContentPerTab - 1; i++)
{
if (i >= SomeDatatable.Rows.Count) break;
Dt.ImportRow(SomeDatatable.Rows[i]);
}
// Find the content repeater in this item and use the new datatable as source
Repeater ContentRepeater = (Repeater)e.Item.FindControl("ContentRepeater");
ContentRepeater.ItemDataBound += ContentRepeater_ItemDataBound;
ContentRepeater.DataSource = Dt;
ContentRepeater.DataBind();
}
}
//This handler might be needed for content repeater, included just for testing
protected void ContentRepeater_ItemDataBound(object sender, System.Web.UI.WebControls.RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item | e.Item.ItemType == ListItemType.AlternatingItem)
{
//Read coulmn from Datarow
int ContentIndex = -1;
int.TryParse(DataBinder.Eval(e.Item.DataItem, "ContentIndex").ToString(), out ContentIndex);
// Find some label
Label Name = (Label)e.Item.FindControl("Name");
Name.Text = "Content #" + ContentIndex;
}
}
}
Related
I'm making a rhyme dictionary, and I have a database table with 3 coloumns, the user will search the database and the search keywords will search database where the ending of the word matches with the word in textbox.
When I enter some keyword into textbox
I get ERROR: Incorrect syntax near the keyword 'LIKE'.
This is how my database looks like
Here is how my aspx looks like:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Kafiye Dizini - Türkçe Kafiye Bulma Sözlüğü - Uyak Bulucu Sözlük - İstediğiniz harf ile biten kelimeleri bulan sözlük</title>
<meta name="description" content="İstediğiniz harfler ile biten kelimeleri bulmanızı sağlayan sözlük" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link href="style.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="top">
<div class="email">İletişim: fahrettinveysel#gmail.com</div>
</div>
<div class="leftcontainer">
</div>
<div class="middlecontainer">
<div class="title">Kafiye Dizini</div>
<div class="subtitle">İstediğiniz harf veya hece ile biten kelimeleri bulmanızı sağlayan sözlük</div>
<div class="searchcontainer">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</div>
<div class="resultboxcontainer">
<div id="resultbox1" runat="server"></div>
<div id="resultbox2" runat="server"></div>
<div id="resultbox3" runat="server"></div>
</div>
<div class="idefix"></div>
</div>
<div class="rightcontainer">
<div class="ornekarama">
<div class="ornekaramabaslik">Örnek Arama</div>
<input type="text" class="ornekaramatextbox" value="rop" disabled="disabled" />
<div class="ornekaramasonuclar">filantrop<br />gardırop<br />hipermetrop<br />mikrop<br />mizantrop</div>
</div>
</div>
</div>
</form>
</body>
</html>
and this is my aspx.cs
using System;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
SqlConnection cnn = new SqlConnection("Initial Catalog=kafiyedizini;Data Source=localhost;Integrated Security=SSPI;");
protected void Button1_Click(object sender, EventArgs e)
{
if (TextBox1.Text != "")
{
cnn.Open();
SqlCommand cmd = new SqlCommand("SELECT kelime1,kelime2,kelime3 FROM kelimeler LIKE #arama", cnn);
cmd.Parameters.AddWithValue("#arama", "%" + TextBox1.Text);
SqlDataReader dr = cmd.ExecuteReader();
if (dr.HasRows)
{
while (dr.Read())
{
resultbox1.InnerHtml += dr.GetString(0);
resultbox2.InnerHtml += dr.GetString(1);
resultbox3.InnerHtml += dr.GetString(2);
}
}
cnn.Close();
}
else
{
resultbox1.InnerHtml += "please enter data";
}
}
}
The initial sql statement in your question should look like this
SELECT kelime1,kelime2,kelime3 FROM kelimeler where kelime1 LIKE #arama OR kelime2 LIKE #arama or kelime3 like #arama
You missed the where and the fields you want to use in your like statement.
to have each result in a separate 'box' you better investigate how a GridView works or a DataRepeater.
Closest in your initial code what could work, including support for handling null/emtpy values for one the fields returned, nicely filling the 3 resultboxes:
var f1 = dr.GetString(0);
var f2 = dr.GetString(1);
var f3 = dr.GetString(2);
if (!String.IsNullOrEmpty(f1))
resultbox1.InnerHtml += String.Format("<div>{0}</div>",f1);
if (!String.IsNullOrEmpty(f2))
resultbox2.InnerHtml += String.Format("<div>{0}</div>",f2);
if (!String.IsNullOrEmpty(f3))
resultbox1.InnerHtml += String.Format("<div>{0}</div>",f3);
You are missing WHERE part of the SQL query
Example:
SELECT * FROM test WHERE test.Id LIKE '%asd%'
I also think, dr.Read() executes PER ROW.
Hope this helps
I have an asp.net repeater that displays a title and an image. The image appears based on some of the calculations I do in the repeater ItemDataBound event.
I tried to implement a mouse over using jquery tooltip . But I can only display the title in the tooltip. I would like to display other details bound to the repeater (errorcalls, totalcalls - I use these details to perform calculations in the code behind) too within the tool tip.
Can anyone help me with what I should do ? I have the code below .
Code for the repeater :
<asp:Repeater ID="rptMonitorSummary" runat="server"
OnItemDataBound="rptMonitorSummary_OnItemDataBound">
<ItemTemplate>
<asp:Panel ID="Pnl" runat="server">
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header" title="<%# Eval("Name").ToString()%> ">
<%# Eval("Name").ToString().Length > 9 ?
(Eval("Name") as string).Substring(0, 9) : Eval("Name")%>
</h5>
<div id="divHover">
<asp:Image Width="80px" ID="btnPerformanceImage"
runat="server" Height="45px"></asp:Image>
</div>
</li>
</asp:Panel>
</ItemTemplate>
</asp:Repeater>
Code Behind :
protected void rptMonitorSummary_OnItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
int errorcalls = Convert.ToInt32(DataBinder.Eval(e.Item.DataItem, "ErrorRatingCalls"));
int totalcalls = Convert.ToInt32(DataBinder.Eval(e.Item.DataItem, "TotalCalls"));
float Percentage = 100 - ((((float)errorcalls / (float)totalcalls)) * 100);
if (Percentage == GetMaxMonitorThresholdValuebyLevelId(1))
{
((Image)e.Item.FindControl("btnPerformanceImage")).ImageUrl = "../Images/Level1.png";
}
else if (Percentage >= GetMinMonitorThresholdValuebyLevelId(2))
{
((Image)e.Item.FindControl("btnPerformanceImage")).ImageUrl = "../Images/Level2.png";
}
}
}
Javascript code :
$(function () {
$(document).tooltip();
});
I use the following css for the tool tip :
.ui-tooltip
{
text-align: center;
max-width: 180px;
font: bold 12px "Helvetica Neue", Sans-Serif;
}
I use the references below :
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
So basically the tool tip currently shows info of the title in one line something like :
ABC
I would like to display something like this in multiple lines :
ABC
PassPercentage = 100
jQuery tool tip doesn't allow HTML tags inside title attribute out of the box.
However, you can creates temporary place holder for each text (of repeater item). Then pass the content to tooltip when mouse hovers.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function () {
$(document).tooltip({
items: "h5",
content: function () {
var tooltip = $(this).siblings('.tooltip');
return tooltip.html();
}
});
});
</script>
<asp:Repeater ID="rptMonitorSummary" runat="server" OnItemDataBound="rptMonitorSummary_OnItemDataBound">
<ItemTemplate>
<asp:Panel ID="Pnl" runat="server">
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">
<%# Eval("Name").ToString().Length > 9 ? (Eval("Name").ToString()).Substring(0, 9) : Eval("Name")%>
</h5>
<div class="center">
<asp:Image Width="50px" ID="btnPerformanceImage" runat="server" Height="28px"></asp:Image>
</div>
<div class="tooltip" style="display: none">
<%# Eval("Name") %><br/>
PassPercentage = <asp:Literal runat="server" ID="PassPercentageLiteral" />
</div>
</li>
</asp:Panel>
</ItemTemplate>
</asp:Repeater>
protected void rptMonitorSummary_OnItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
int errorcalls = Convert.ToInt32(DataBinder.Eval(e.Item.DataItem, "ErrorRatingCalls"));
int totalcalls = Convert.ToInt32(DataBinder.Eval(e.Item.DataItem, "TotalCalls"));
float Percentage = 100 - ((((float)errorcalls / (float)totalcalls)) * 100);
var literal = e.Item.FindControl("PassPercentageLiteral") as Literal;
literal.Text = Percentage.ToString();
....
}
}
Perhaps you need to use the custom content function of the jQuery UI Tooltip instead:
http://jqueryui.com/tooltip/#custom-content
Using the $(this).is("h5") call, as in the example above, to customise the content when the user hovers over the h5 tag.
I have problem in implementing google maps api in asp.net. Here is my aspx code:
<%# Page Title="" Language="C#" AutoEventWireup="true" CodeFile="visual_loc.aspx.cs" Inherits="visual_loc" %>
<%--A sample project by Ghaffar khan--%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Your Data on Google Map </title>
<%--Google API reference--%>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false
&key=asdfg" type="text/javascript">
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<form id="form1" runat="server">
<asp:Panel ID="Panel1" runat="server">
<%--Place holder to fill with javascript by server side code--%>
<asp:Literal ID="js" runat="server"></asp:Literal>
<%--Place for google to show your MAP--%>
<div ID="map_canvas" style="width: 100%; height: 728px; margin-bottom: 2px;">
</div>
<br />
</asp:Panel>
<br />
</form>
</body>
</html>
And my code behind: getLocation() is the method which gets the longitude and latitude from my database. createDataTable() is method which create DataTable from those locations.
protected void Page_Load(object sender, EventArgs e)
{
string user_id;
user_id = Request.Cookies["cookie"]["Login"];
getLocation(user_id);
BuildScript( createDataTable());
}
private void BuildScript(DataTable tbl)
{
String Locations = "";
foreach (DataRow r in tbl.Rows)
{
// bypass empty rows
if (r["Latitude"].ToString().Trim().Length == 0)
continue;
string Latitude = r["Latitude"].ToString();
string Longitude = r["Longitude"].ToString();
// create a line of JavaScript for marker on map for this record
Locations += Environment.NewLine + " map.addOverlay(new GMarker(new GLatLng(" + Latitude + "," + Longitude + ")));";
}
// construct the final script
js.Text = #"<script type='text/javascript'>
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById('map_canvas'));
map.setCenter(new GLatLng(52.259, 21.012), 2);
" + Locations + #"
map.setUIToDefault();
}
}
</script> ";
}
whole operation result in displaying empty site with no content. What am i doing wrong?
Problem was that i did wrong directories to my markers, so that cannot be seen on Map. Once i did enter valid directories everything works.
I have the following simple page;
<%# Import namespace="System.IO" %>
<script runat="server">
int pageSize = 10;
int pageNum = 1;
protected override void OnInit(EventArgs e)
{
var currentPage = Directory.GetFiles(#"C:\mypath", "*.pdf").Skip((pageNum - 1) * pageSize).Take(pageSize).OrderBy(c => c).ToArray();
Listview1.DataSource = currentPage;
Listview1.DataBind();
base.OnInit(e);
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test project</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ListView ID="Listview1" runat="server">
<LayoutTemplate>
<table cellpadding="0" cellspacing="0">
<tr>
<td>Titel</td>
<td>Size</td>
</tr>
<asp:PlaceHolder runat="server" ID="itemPlaceholder"></asp:PlaceHolder>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td><a href=''><%#Eval("Name") %></a></td>
<td>0 kb</td>
</tr>
</ItemTemplate>
</asp:ListView>
</form>
</body>
</html>
How do i get Filename, size, path etc into my Listview. If i just had a simple for each directly on the GetFiles, i could do something like
FileInfo f = new FileInfo(pdfFile);
long pdfSize = f.Length;
Response.Write(Path.GetFileName(pdfFile) + " - " + pdfSize.ToString() + "<br/>");
But how do i achive this in my ListView?
You are selecting the paths to the files not the files itself. Hence you cannot get the FileInfo's properties what raises your exception "DataBinding: 'System.String' does not contain a property with the name 'Name'"
This should work:
var currentPage = Directory.GetFiles(#"C:\mypath", "*.pdf").Skip((pageNum - 1) * pageSize).Take(pageSize).OrderBy(c => c).ToArray();
.Skip((pageNum - 1) * pageSize)
.Take(pageSize)
.OrderBy(c => c)
.Select(path => new System.IO.FileInfo(path)).ToArray();
You may need to create a new listviewitem collection and add your values to the collection using a loop. Then add the listviewitems back to the listview.
http://msdn.microsoft.com/en-us/library/system.windows.forms.listview.items.aspx
I have made my own little chat. It it basicly a jQuery that reloads a div by inserting another .aspx site into it.
This is my .aspx site:
<%# Page Title="" Language="C#" MasterPageFile="~/holdOversigt.Master" AutoEventWireup="true"
CodeBehind="chat.aspx.cs" Inherits="HB.chat1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
var reloadtime = 3000;
function load() {
$.ajax({
url: "chat-Content.aspx",
context: document.body,
success: function (data) {
document.getElementById('chat').innerHTML = data;
setTimeout('load()', reloadtime);
}
});
}
window.onload = function () {
setTimeout('load()', reloadtime);
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h1 style="text-align: center; color: #005da3; font-weight: bold">
<strong>Chat rum</strong></h1>
<div id="chat" class="fisk" style="width: 500px; height: 500px">
</div>
<br />
<asp:TextBox ID="txbMessege" runat="server"></asp:TextBox>
<asp:Button ID="btnSend" runat="server" Text="Send" OnClick="btnSend_Click" />
</asp:Content>
THis is the site it inserts into the div:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="chat-Content.aspx.cs" Inherits="HB.chat_Content" %>
<form id="form1" runat="server">
<div>
<asp:ListBox ID="lbChat" runat="server" Rows="10" Width="400px"></asp:ListBox>
</div>
</form>
This is the sites codebehind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace HB
{
public partial class chat_Content : System.Web.UI.Page
{
grjenie31Entities gr;
protected void Page_Load(object sender, EventArgs e)
{
gr = new grjenie31Entities();
var query = from es in gr.chats
where es.id > ((from esh in gr.chats select esh.id).Max() - 15)
orderby es.timestamps descending
select es;
List<chat> list = new List<chat>();
foreach (chat chat in query)
{
list.Add(chat);
}
for (int i = 0; i < list.Count; i++)
{
lbChat.Items.Add("[" + list[i].timestamps + "] " + list[i].personID.ToString() + ": " + list[i].besked);
}
this.lbChat.SelectedIndex = this.lbChat.Items.Count - 1;
}
}
}
I can add new lines until it loads... but when the listbox is showed on the site it give me the follow error:
The state information is invalid for this page and might be corrupted.
Anybody got any idea what i can do about it??
It seems you inserted all page content even ViewState hidden tags.
I think it's better to clear your response and write your html tags which you needed in chat.
Response.Clear();
Response.ContentType = "text/plain";
Response.Write(GetChatResult());
Response.End();