We Keep Coding

How to display 10 recent news from database using Bootstrap?

I wanted to display 10 recent news from database. I have used LIMIT 10 in sql query to display 10 recent news. I am using bootstrap.
I am getting only 1 news from the database. I know that here I have to use datalist or listview in design. But I don't know how to implement it using Bootstrap.
Default.aspx:
<div class="container">
<h1 class="main-module-title">Recent <span>News</span></h1>
<%-- <asp:datalist runat="server">
<ItemTemplate>--%>
<div class="row-fluid">
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3">
<a href="#">
<asp:Image runat="server" ID="ImgNews" class="img-responsive img-box img-thumbnail"/>
</a>
</div>
<div class="col-xs-12 col-sm-9 col-md-9">
<h4><asp:Label ID="newsheader" runat="server" Text=""></asp:Label></h4>
<p runat="server" style="text-align:justify" id="newscontent"> </p>
</div>
</div>
<hr/>
</div>
<%-- </ItemTemplate>
</asp:datalist>--%>
</div>
Default.aspx.cs:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
MySqlConnection conn = null;
string newsitem = null;
if (!(Request.QueryString["newstitle"] == null))
{
Page.Header.Title = Request.QueryString["newstitle"] + " - DubaiExporters ";
}
else
{
Page.Header.Title = "DubaiExporters - Dubai Business News - UAE Exports";
}
try
{
string connStr = ConfigurationManager.ConnectionStrings["mysqldbeConnectionString"].ToString();
string newssql = null;
newssql = "SELECT * FROM news WHERE status = b'1' AND linkstatus = b'1' ORDER BY datepublished DESC LIMIT 10";
conn = new MySqlConnection(connStr);
MySqlCommand cmd = new MySqlCommand(newssql, conn);
conn.Open();
MySqlDataReader r = cmd.ExecuteReader(CommandBehavior.CloseConnection);
if(r.Read())//while(r.Read())
{
newsheader.Text = HttpUtility.HtmlDecode(r["newstitle"].ToString().Trim()).ToString();
newscontent.InnerHtml = HttpUtility.HtmlDecode(r["newsbrief"].ToString().Trim()).ToString();
ImgNews.ImageUrl = "~/images/newspictures/" + r["image"].ToString();
}
}
catch (MySqlException ex)
{
}
catch (Exception ex)
{
}
finally
{
if (conn != null)
{
conn.Close();
}
}
}
}

try the below template and bind the DataList to DataSource in the Page Load event inside !Page.IsPOstBack condition
<asp:DataList ID="DataList1" runat="server">
<ItemTemplate>
<div class="row-fluid">
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3">
<a href="#">
<asp:Image runat="server" ID="ImgNews" class="img-responsive img-box img-thumbnail" ImageUrl='<%# "~/images/newspictures/" + Eval("image")%>' />
</a>
</div>
<div class="col-xs-12 col-sm-9 col-md-9">
<h4><a href="#">
<asp:Label ID="newsheader" runat="server" Text='<%# Eval("newstitle") %>'></asp:Label></a></h4>
<p runat="server" style="text-align: justify" id="newscontent"><%# Eval("newsbrief") %></p>
</div>
</div>
<hr />
</div>
</ItemTemplate>
</asp:DataList>

How to loop div?

I am trying to loop few div's in aspx. This the code I would like to loop:
<div class="col-md-3 product-men">
<div class="men-pro-item simpleCart_shelfItem">
<div class="men-thumb-item">
<img src="uploadImage/3.png" class="pro-image-front" />
<img src="uploadImage/3.png" class="pro-image-back" />
</div>
<div class="item-info-product ">
<h4>Tie Clip</h4>
<div class="info-product-price">
<span class="item_price">RM100</span>
</div>
Add to cart
</div>
</div>
</div>
The page looks like below:
the cart need to loop. I have tried using c# as below:
StringBuilder cart = new StringBuilder();
for (int x = 0; x < 3; x++) {
cart.Append(" <div class=\"col - md - 3 product - men\">");
cart.Append("<div class=\"men - pro - item simpleCart_shelfItem\">");
cart.Append("<div class=\"men - thumb - item\">");
cart.Append("<img src = uploadImage/1.jpg class='pro - image - front />");
cart.Append("<img src = uploadImage/1.jpg class=pro - image - back />");
cart.Append("</div>");
cart.Append(" <div class=\"item - info - product \">");
cart.Append("<h4><a href = \"single.html\" > Tie Clip</a></h4>");
cart.Append("<div class=\"info - product - price\">");
cart.Append("<span class=\"item_price\">RM100</span>");
cart.Append("</div>");
cart.Append("Add to cart");
cart.Append("</div>");
cart.Append("</div>");
cart.Append("</div>");
}
Literal1.Text = cart.ToString();
This don't seem work out.. Any idea how to get this cart loop?

You should use Embedded Code Blocks in the .aspx itself instead of .cs.

You would normally use a asp.net Control for that, like a Repeater.
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div class="col-md-3 product-men">
<div class="men-pro-item simpleCart_shelfItem">
<div class="men-thumb-item">
<img src="uploadImage/<%# Eval("product_image_front") %>" class="pro-image-front" />
<img src="uploadImage/<%# Eval("product_image_back") %>" class="pro-image-back" />
</div>
<div class="item-info-product ">
<h4><%# Eval("product_name") %></h4>
<div class="info-product-price">
<span class="item_price"><%# Eval("product_price") %></span>
</div>
<asp:LinkButton ID="LinkButton1" CommandArgument='<%# Eval("product_id") %>' runat="server" CssClass="item_add single-item hvr-outline-out button2">Add to cart</asp:LinkButton>
</div>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
Then in code behind you would assign a DataSource to the Repeater.
Repeater1.DataSource = source;
Repeater1.DataBind();

Code in aspx Page
<asp:Literal ID="ltrMessage" runat="server"></asp:Literal>
Code Snippet in cs page.
for(int i=0;i<limit;i++)
{
ltrMessage.Text+=#"<div class='col-md-3 product-men'>
<div class='men-pro-item simpleCart_shelfItem'>
<div class='men-thumb-item'>
<img src='uploadImage/3.png' class='pro-image-front' />
<img src='uploadImage/3.png' class='pro-image-back' />
</div>
<div class='item-info-product '>
<h4><a href='single.html'>Tie Clip</a></h4>
<div class=''info-product-price'>
<span class='item_price'>RM100</span>
</div>
<a href='#' class='item_add single-item hvr-outline-out button2'>Add to cart</a>
</div>
</div>
</div>";
}

Implement-Bootstrap-Carousel-slide-from-database-using-Repeater-control-in-ASPNet

I am using Bootstrap carousel slider script inside Repeater but its not working proper.The data display at once and stack horizontal ,When I click NEXT or PREVIOUS in the carousel control, the carousel displays correctly but with only one item in every carousel i want to display 3 items in each carousel .
<!-- Begin Carousel -->
<div class="row">
<div id="realto-carousel-afee" class="carousel slide">
<div class="carousel-navigation pull-right"> <a class="serif italic pull-left view-all-carousel" href="properties-grid-layout-2">عرض الكل</a> <a class="left carousel-control pull-left" href="#realto-carousel-afee" data-slide="prev"><i class="fa fa-angle-left"></i></a> <a class="right carousel-control pull-right" href="#realto-carousel-afee" data-slide="next"><i class="fa fa-angle-right"></i></a> </div>
<div class="carousel-inner">
<asp:Repeater runat="server" ID="ProjectsRepater">
<ItemTemplate>
<div <%# Container.ItemIndex == 0 ? "active" : "" %>>
<div class="col-lg-4 col-md-4 col-sm-4 col-sx-12">
<div class="box-container">
<div class="holder"> <a class="overlay" href="" title=""> <span class="more"> <i class="fa fa-zoom-in"></i> </span>
<div class="prop_img"> <img width="370" height="210" src="150w" sizes="(max-width: 370px) 100vw, 370px" /> </div>
</a> <span class="prop-tag">للبيع</span>
<div class="prop-info">
<h3 class="prop-title">
<asp:Label ID="ProjId" runat="server" Visible="false" Text='<%# Eval("ID")%>'></asp:Label>
<asp:Label Text='<%# Eval("ProjectName")%>' ID="lblProjName" runat="server">مشروع 94 حي اللوتس الشمالية 2</asp:Label>
</h3>
<ul class="more-info clearfix">
<li class="info-label clearfix"> <span class="pull-left" style="float:right !important">المساحات</span>
<label id="lblArea" runat="server" class="qty pull-right">2</label>
</li>
<li class="info-label clearfix"> <span class="pull-left" style="float:right !important">نظام السداد</span> <span id="lblPaymentsSystem" runat="server" class="qty pull-right">2</span> </li>
<li class="info-label clearfix"> <span class="pull-left" style="float:right !important">تاريخ الاستلام</span> <span id="lblReceivedDate" runat="server" class="qty pull-right">2</span> </li>
</ul>
</div>
<!-- prop-info -->
</div>
<!-- holder -->
</div>
<!-- box-container -->
</div>
</div>
</ItemTemplate>
</asp:Repeater>
<!-- .carousel-inner -->
</div>
</div>
<!--End Carousel-->
</div>
in this code i select all projects and display them in repeater control by carousel slider
protected void Page_Load(object sender, EventArgs e)
{
// RepeterData();
ProjectsRepater.DataSource = GetAllProjecct();
ProjectsRepater.DataBind();
}
public class Proj
{
public int ID { get; set; }
public string ProjectName { get; set; }
}
public List<Proj> GetAllProjecct()
{
List<Proj> listproj = new List<Proj>();
SqlConnection con = new SqlConnection(System.Web.Configuration.WebConfigurationManager.ConnectionStrings["AlamarConnectionString"].ConnectionString);
SqlCommand com = new SqlCommand("Select ID,ProjectName from Projects", con);
con.Open();
SqlDataReader reader = com.ExecuteReader();
while (reader.Read())
{
Proj cnt = new Proj();
cnt.ID = Convert.ToInt32(reader["ID"]);
cnt.ProjectName = Convert.ToString(reader["ProjectName"]);
listproj.Add(cnt);
}
return listproj;
}

Show product details in page

I need to show products details in a page.
My aspx is like below...
<div class="col-xs-12 col-sm-4 no-margin product-item-holder hover"> <!-- this div will be repeated for each product -->
<div class="product-item">
<div class="image">
<img runat="server" id="img" alt="" src="" />
</div>
<div class="body">
<div class="label-discount clear"></div>
<div class="title">
<a runat="server" id="name" href="single-product.html"></a>
</div>
</div>
<div class="prices">
<div class="price-prev"></div>
<div runat="server" id="price" class="price-current pull-right"></div>
</div>
<div class="hover-area">
<div class="add-cart-button">
Enquiry
</div>
</div>
</div>
and my codebehind is like below...
dbConnection cn = new dbConnection();
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
getLoopData();
}
}
public void getLoopData()
{
cn.con.Open();
cn.cmd.Connection = cn.con;
cn.cmd.CommandText = "select * FROM products";
MySqlDataReader reader = cn.cmd.ExecuteReader();
while (reader.Read())
{
//int id = reader.GetInt32(0);
name.InnerText = reader["InventionName"].ToString();
price.InnerText = reader["Price"].ToString();
img.Src = reader["Picture"].ToString();
}
reader.Close();
cn.con.Close();
}
But it is showing only last product details.
How should I repeat the div for each product and how to show every products in page ??

You can use Asp Repeater to do that.
Check this link out : http://www.w3schools.com/aspnet/aspnet_repeater.asp

You need a datagrid control, repeater or similar to show tabular data.
Right now you only have one control per attribute to show all records, that's why last one wins.

Your view/page could be like this:
<asp:Repeater ID="ProductRepeater" runat="server" EnableViewState="False">
<ItemTemplate>
<div class="product-item">
<div class="image">
<img id="img" alt="" src='<%# Eval("Picture") %>' />
///...
</ItemTemplate>
</asp:Repeater>
In your code you could do this:
cn.con.Open();
cn.cmd.Connection = cn.con;
cn.cmd.CommandText = "SELECT InventionName, Price, Picture FROM products";
MySqlDataReader reader = cn.cmd.ExecuteReader();
ProductRepeater.DataSource = reader;
ProductRepeater.DataBind();

You are iterating a list, and assigning data to name, price and img.Src, but you overwrite the values on each iteration, therefore you only have the values from the last element.
You should bind you data source (reader) to an <asp:Repeater>'s DataSource property. In your markup you specify a header (HeaderTemplate), a footer (FooterTemplate) and content (ItemTemplate). You can omit the header and footer template if you don't need them. You can also use an AlternatingItemTemplate if you need to do different things with odd/even rows (e.g. alternating row color in a table).
You can access properties of the databound datatype using the <%# Eval("SomeProperty") %> which is a databinding expression.
HTML markup would be something like this:
<asp:Repeater id="Products" runat="server">
<HeaderTemplate>
</HeaderTemplate>
<ItemTemplate>
<div class="col-xs-12 col-sm-4 no-margin product-item-holder hover"> <!-- this div will be repeated for each product -->
<div class="product-item">
<div class="image">
<img class="img" alt="" src="<%# Eval("Picture") %>" />
</div>
<div class="body">
<div class="label-discount clear"></div>
<div class="title">
<a class="name" href="single-product.html"><%# Eval("InventionName") %></a>
</div>
</div>
<div class="prices">
<div class="price-prev"></div>
<div class="price" class="price-current pull-right"><%# Eval("Price") %></div>
</div>
<div class="hover-area">
<div class="add-cart-button">
Enquiry
</div>
</div>
</div>
</div>
</ItemTemplate>
<FooterTemplate>
</FooterTemplate>
</asp:Repeater>
and wire up the datasource in codebehind like this:
cn.con.Open();
cn.cmd.Connection = cn.con;
cn.cmd.CommandText = "select * FROM products";
MySqlDataReader reader = cn.cmd.ExecuteReader();
Products.DataSource = reader; // rather than iterating manually, you assign the datasource to the repeater.
Products.DataBind();
reader.Close();
cn.con.Close();
Side note: I changed the attribute from id to class on the name, price and img element. Because when this markup is rendered it would have been with multiple elements with the same id, which it shouldn't since id is supposed to be unique according to specification.

Id of repeater control not recognized in .cs file

I have a repeater control inside a carousel which in turn is inside a modal.The problem is that the id of repeater control is not recogized or as it says id dosent exist in current context.
<div class="modal fade gallarymodal" id="mygallary" style=" width:1300px; height:100%;" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog mdialog">
<div class="modal-content" >
<div class="modal-body mbody">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<asp:Repeater ID="repid" runat="server">
<ItemTemplate>
<div class="item" >
<div class="item active">
<asp:Image ID="wtf" runat="server" ImageUrl='<%#Eval("imgPath") %>' Width="1000px" Height="490px" />
</div>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</div>
</div>
</div>
</div>
</div>
And here is my .cs code
public void bindslide()
{
//string str = Session["userid"].ToString();
string str = "22";
sq.connection();
SqlCommand cmd = new SqlCommand("select * from mygallary where regId_img='" + str + "' ", sq.con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
//DataSet ds = new DataSet();
DataTable dt = new DataTable();
da.Fill(dt);
//da.Fill(ds);
if (dt.Rows.Count > 0)
{
repid.DataSource = dt;
repid.DataBind();
sq.con.Dispose();
sq.con.Close();
}
else
{
}
}
I am very much confused why the id repeater control is not recognized.

asp:Repeater ID="wtf"
asp:Image ID="wtf"
maybe the problem both got same id .
try change the id of one of them .
one closing tag on div missing