I have this code:
$(document).ready(function () {
$('#Priroda').hide();
$('#priroda_').click(function () {
$('#Znamenitosti').hide();
$('#Priroda').show();
});
$('#znamenitosti_').click(function () {
$('#Priroda').hide();
$('#Znamenitosti').show();
});
});
</script>
<div class="meni">
<nav>
<ul>
<li class="active">Info</li>
<li>Znamenitosti</li>
<li>Priroda</li>
<li>Noken Zivot</li>
</ul>
</nav>
</div>
where I have few categories in the menu. When i click on specific category, i want to show the (div) tag for that specific category within the same .aspx page, and the other (div) tags for the other categories should be hidden.
This is the (div) tag for the category "Priroda":
<div class="Priroda" id="Priroda">
<asp:DataList ID="DataList1" runat="server" RepeatColumns="7" CellPadding="3">
<ItemTemplate>
<div class="boxButton">
<ul class="Gallery">
<li><a id="A1" href='<%# Eval("ime","~/Sliki/Ohrid/Priroda/{0}") %>' title='<%# "Од "+ Eval("userid")+ ", на " + Eval("datum")+ ", " + Eval("opis")%>' rel="FaceBox[gallery1]" runat="server" >
<asp:Image ID="Image1" ImageUrl='<%# Bind("ime", "~/Sliki/Ohrid/Priroda/{0}") %>' runat="server" Width="140" Height="140" AlternateText='<%# Bind("imeslika") %>' />
</a></li></ul></div>
</ItemTemplate>
</asp:DataList>
</div>
For binding the DataList i used this code in .cs file:
protected void BindDataList1()
{
String strConnString = System.Configuration.ConfigurationManager
.ConnectionStrings["makbazaConnectionString"].ConnectionString;
SqlConnection con = new SqlConnection(strConnString);
con.Open();
//Query to get ImagesName and Description from database
SqlCommand command = new SqlCommand("SELECT ime, imeslika, kategorija, datum, opis, slikapateka, userid FROM Ohrid WHERE kategorija='Priroda'", con);
SqlDataAdapter da = new SqlDataAdapter(command);
DataTable dt = new DataTable();
da.Fill(dt);
dlImages.DataSource = dt;
dlImages.DataBind();
con.Close();
}
Now i don't know how to call BindDataList1(); to show me data when i click on that category. I have different BindDataLists for each category. Can you tell me how to call specific BindDataList for the category that is selected from the menu? For example when i click on link Priroda show me the (div) tag Priroda and BindDalaList1();, when i click on link Znamenitosti show me the (div) tag Znamenitosti and BindDalaList2();
I think a simple way to do this would be to run your databind functions for all categories at once, for example in the PreRender event of "DataList1", so all of the data is on the page, and each bit is just hidden or shown through your jQuery.
Alternatively, could you use instead of tags, and have an OnClick property set to call your DataBind1 method.
Related
I am doing a little school project with ASP.NET, and I'm trying to get all products from the Database, show it and have "Add to card" button for every one of them. I managed to do all this, except adding the button. I have a function that gets all the products and I'm binding it with ASP Repeater. The problem is, when I try to add a button, it says that I need to use the form tag first, when I add the form tag it says it needs to have runat="server", but when I add it, it says I can't have more than one runat="server". The Repeater tag is using it also, and I'm stuck. Can anyone suggest something? Thank you!
private void bindPopularProducts()
{
String CS = ConfigurationManager.ConnectionStrings["DatabaseConnectionString1"].ConnectionString;
using (SqlConnection con = new SqlConnection(CS))
{
using (SqlCommand cmd = new SqlCommand("SELECT * FROM Food", con))
{
using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
{
DataTable fFood = new DataTable();
sda.Fill(fFood);
popularFood.DataSource = fFood;
popularFood.DataBind();
}
}
}
}
and this
<asp:Repeater ID="popularFood" runat="server">
<ItemTemplate>
<div class="col-md-4">
<div><%# Eval("name") %></div>
<div><asp:Image ID="foodImage" runat="server" ImageUrl='<%# "~/images/food/" + Eval("image").ToString() %>' Visible="true" CssClass="img-responsive" /></div>
<div>
<div class="col-md-4 text-left"><%# "$"+Eval("price_small")+"/small" %></div>
<div class="col-md-8 text-right">
</div>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
I'm trying to put the button inside the text-right div
Within your Repeater's ItemTemplate, add a button. In the button, set the CommandArgument to some key value that uniquely identifies the product.
<asp:Button ID="Button1" runat="server" Text="Click Me" CommandArgument='<%# Eval("Product.Key") %>' OnClick="Button1_Click" />
In your code, the event handler can use the button's CommandArgument to get the product key and execute your "Add to card" method.
protected void Button1_Click(object sender, EventArgs e)
{
string myProductKey;
// Use "myProductKey" to do something with the Product record...
myProductKey = ((Button)sender).CommandArgument;
}
I have a repeater that I populate from a database:
using (SqlConnection conn = new SqlConnection(connString))
{
SqlCommand cmd = new SqlCommand(#"SELECT CommunityName, CID, Budget FROM Donation WHERE Year = year(getdate()) ORDER BY CommunityName", conn);
conn.Open();
SqlDataAdapter adp = new SqlDataAdapter(cmd);
DataSet myDataSet = new DataSet();
adp.Fill(myDataSet);
myRep.ItemDataBound += new RepeaterItemEventHandler(myRep_ItemDataBound);
myRep.DataSource = myDataSet;
myRep.DataBind();
}
void myRep_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
var textbox = e.Item.FindControl("community");
textbox.ClientIDMode = ClientIDMode.Static;
textbox.ID = "community" + (e.Item.ItemIndex + 1);
}
Repeater:
<asp:UpdatePanel ID="UpdatePanel" runat="server" UpdateMode="Always">
<ContentTemplate>
<asp:Repeater ID="myRep" runat="server">
<ItemTemplate>
<div class="form-group">
<asp:Label ID='thisLbl' runat="server" Text='<%# Eval("CommunityName") %>' />
<asp:TextBox runat="server" ID="community" Text='<%# Eval("Budget") %>' CssClass="form-control" />
</div>
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
This creates 6 textboxes with labels and values, now my question is how do I detect which of these boxes belongs to the record it was initially pulled from in the database? I want to be able to modify the value in these boxes and hit a button to save them back to the database but I can't seem to wrap my head around getting them to the proper records.
Should I set the ID of the textbox to something I can parse through and match with the proper record? In the ItemDataBound?
You have to put a hidden field inside the repeater item template that takes the value from budget, and another hidden field to keep the CID value that has to be read in the post back request. Of course you need also a button and its click event handler.
<asp:Repeater ID="myRep" runat="server">
<ItemTemplate>
<div class="form-group">
<asp:Label ID='thisLbl' runat="server" Text='<%# Eval("CommunityName") %>' />
<asp:TextBox runat="server" ID="txtBudget" Text='<%# Eval("Budget") %>' CssClass="form-control" />
<asp:HiddenField runat="server" ID="hdOriginalBudget" Value='<%# Eval("Budget") %>' />
<asp:HiddenField runat="server" ID="hdCID" Value='<%# Eval("CID") %>' />
</div>
</ItemTemplate>
</asp:Repeater>
<br />
<asp:Button ID="btn" runat="server" OnClick="btn_Click" />
In your code behind you need to loop inside the repeater to check whether the text box has been changed by comparing its value to the hidden field. After you save the budget value in the database you need to realign the hidden field value to the the new value entered by the user, otherwise you will always save that value after each post back:
protected void btn_Click(object sender, EventArgs e)
{
foreach (RepeaterItem item in myRep.Items)
{
var txtBudget = item.FindControl("txtBudget") as TextBox;
var hdOriginalBudget = item.FindControl("hdOriginalBudget") as HiddenField;
var hdCID = item.FindControl("hdCID") as HiddenField;
if (txtBudget.Text != hdOriginalBudget.Value)
{
//If you enter here means the user changed the value of the text box
using (SqlConnection conn = new SqlConnection(connString))
{
SqlCommand cmd = new SqlCommand(#"UPDATE Donation SET Budget = #Budget WHERE CID = #CID", conn);
cmd.Parameters.Add(new SqlParameter("#Budget", int.Parse(txtBudget.Text)));
cmd.Parameters.Add(new SqlParameter("#CID", int.Parse(hdCID.Value)));
conn.Open();
cmd.ExecuteNonQuery();
}
//After you write in the database realign the values
hdOriginalBudget.Value = txtBudget.Text;
}
}
}
Take care that my code is missing the most basic validation, so if the user writes an invalid value in the textbox (for example "yyy") it breaks. So please don't put it in production as it is!
I am trying to fill li and ul of an HTML file using my database.
single category representing multiple items in database.
I have taken the li items in a string, I am replacing [food] with CATEGORY name and [itemTemplate] with ITEMS. The issue in my code is the category name is repeating
Every time as new item display. I have to show category name once and add all related items within that category.
String liTemplate = "<li><h4 class='menu-title-section'> <h4 class='menu-title-section'><a href='#appetizers'>[food]</a></h4>[itemTemplate]</li>";
String itemTemplate = "SOME ITEM TEMPLETE";
DataTable dt = dm.GetData("spTestMenu")
StringBuilder sb = new StringBuilder();
sb.Append("<ul class='our-menu'>");
String liTemplateWorkingCopy = String.Empty, itemTemplateWorkingCopy = String.Empty
foreach (DataRow level1DataRow in dt.Rows)
{
liTemplateWorkingCopy = liTemplate;
itemTemplateWorkingCopy = itemTemplate;
SubCategoryName = level1DataRow["MealSubCatName"].ToString();
if (!previusSubCat.Equals(SubCategoryName))
{
liTemplateWorkingCopy = liTemplateWorkingCopy.Replace("[food]", level1DataRow["MealSubCatName"].ToString());
previusSubCat = SubCategoryName;
}
itemTemplateWorkingCopy = itemTemplateWorkingCopy.Replace("[foodtitle]", level1DataRow["itemName"].ToString());
itemTemplateWorkingCopy = itemTemplateWorkingCopy.Replace("[imgsrc]", level1DataRow["imageURL"].ToString());
itemTemplateWorkingCopy = itemTemplateWorkingCopy.Replace("[price]", level1DataRow["Price"].ToString());
liTemplateWorkingCopy = liTemplateWorkingCopy.Replace("[itemTemplate]", itemTemplateWorkingCopy);
sb.Append(liTemplateWorkingCopy);
foodMenu.Text = sb.ToString();
}
You can set runat="server" for <li> or <ul>..
<li class="abc" runat="server" id="first"></li>
I would suggest using a ListView control for this. This way you can maintain the HTML outside of your code; it's cleaner that way and much more elegant.
Group your rows by the 'MealSubCatName' column, and use LINQ to create an anonymous object:
C#
var grouped = dt.AsEnumerable().GroupBy(c => c["MealSubCatName"].ToString())
.Select(g => new
{
category = g.FirstOrDefault()["MealSubCatName"].ToString(),
items = g.Select(r => new {
title = r["itemName"].ToString(),
image = r["imageURL"].ToString()
})
});
lvFood.DataSource = grouped;
lvFood.DataBind();
ASPX
<asp:ListView ID="lvFood" runat="server">
<LayoutTemplate>
<ul>
<asp:PlaceHolder runat="server" ID="groupPlaceholder" />
</ul>
</LayoutTemplate>
<GroupTemplate>
<asp:PlaceHolder runat="server" ID="itemPlaceholder" />
</GroupTemplate>
<ItemTemplate>
<li>
<h4 class="menu-title-section">
<%# Eval("category") %>
</h4>
</li>
<asp:Repeater ID="rpt" runat="server" DataSource='<%# Eval("items") %>'>
<ItemTemplate>
<img src="<%# Eval("image")%>" alt="<%# Eval("title")%>" />
<strong><%# Eval("title")%></strong><br />
</ItemTemplate>
</asp:Repeater>
</ItemTemplate>
</asp:ListView>
Add a div with runat server and assign a Id to that div and do something like this I did this trick here www.journeycook.com Check menu of this website.
Suppose you have a div with id link and runat server in ul tag
<ul>
<div runat="server" id="link">
</div>
</ul>
Now add c# code for fetch data using SqlDataReader class and using while loop do something like this
link.innerhtml+="<li>dr["yourcolumn"].ToString()</li>";
I hope it will give you some help
I am using facebox on my asp.net web site for my image gallery. when i am uploading images to the gallery, they are saved on my disc and url data is stored in my sql database. After the uploading, my gallery displays thumbnails from the images but not in the order as they are uploaded. I want to display the last uploaded image as first in the gallery (order by last uploaded), but i don't know what i should add in the code.
This is the code:
<body style="background-color:black">
<script type="text/javascript" charset="utf-8">
$(function () {
$('[rel^="FaceBox"]').FaceBox();
});
</script>
<form id="form1" runat="server">
<div class="Znamenitosti" id="Znamenitosti">
<asp:DataList ID="dlImages" runat="server" RepeatColumns="7" CellPadding="3" >
<ItemTemplate>
<div class="boxButton">
<ul class="Gallery" >
<li><a id="A1" href='<%# Eval("ime","~/Sliki/Ohrid/Znamenitosti/{0}") %>' title='<%# "Од "+ Eval("userid")+ ", на " + Eval("datum")+ ", " + Eval("opis")%>' rel="FaceBox[gallery1]" runat="server" >
<asp:Image ID="Image1" ImageUrl='<%# Bind("imethumb", "~/Sliki/Ohrid/Znamenitosti/thumb/{0}") %>' runat="server" Width="140" Height="140" AlternateText='<%# Bind("imeslika") %>' />
</a></li></ul></div>
</ItemTemplate>
</asp:DataList>
</div>
Cs code:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindDataList();
}
}
protected void BindDataList()
{
String strConnString = System.Configuration.ConfigurationManager
.ConnectionStrings["makbazaConnectionString"].ConnectionString;
SqlConnection con = new SqlConnection(strConnString);
con.Open();
if (Request.QueryString["ID"] == "Znamenitosti")
{
//Query to get ImagesName and Description from database
SqlCommand command = new SqlCommand("SELECT ime, imethumb, imeslika, kategorija, datum, opis, slikapateka, thumbpateka, userid FROM Ohrid WHERE kategorija='Znamenitosti' AND grad='Ohrid' ", con);
SqlDataAdapter da = new SqlDataAdapter(command);
DataTable dt = new DataTable();
da.Fill(dt);
dlImages.DataSource = dt;
dlImages.DataBind();
}
.
.
.
.
con.Close();
}
Is datum your date field?
If so just modify your sqlcommand:
SELECT ime, imethumb, imeslika, kategorija, datum, opis, slikapateka, thumbpateka, userid FROM Ohrid WHERE kategorija='Znamenitosti' AND grad='Ohrid' ORDER BY DESC datum
Cheers,
Bartek
<asp:Repeater ID="rp1" runat="server">
<ItemTemplate>
<ul>
<li>
<%#Module(Convert.ToInt32(Eval("id")),Eval("university").ToString()) %>
<asp:Repeater ID="rp2" runat="server">
<ItemTemplate>
<ol>
<li id="sublist" runat="server">
<%#Eval("college") %>
</li>
</ol>
</ItemTemplate>
</asp:Repeater>
</li>
</ul>
</ItemTemplate>
</asp:Repeater>
C# CODE
public string Module(int id,string university)
{
con = new SqlConnection(ConStr);
con.Open();
cmd = new SqlCommand("SELECT college FROM tbluniversity where id=" + id, con);
da = new SqlDataAdapter(cmd);
con.Close();
ds = new DataSet();
da.Fill(ds);
//Here I want to find the inner repeator of current row then bind this dataset to that.
how to find Repeator
return university;
}
you have to add a ItemCreated event and you can use e.Item.FindControl method to find your inner repeater using its id