We Keep Coding

asp.net image src not showing from database in listview

I am facing very rear problem. I am trying to bind images path from database using listview control. Listview gets bind but img is not showing up. When I look at inspect I cant's see src attribute in img tag. Listview gets bind perfectly and path is also correct. If you see below screenshot & see the highlighted line which is that img tag which is missing src attribute.
<div class="row">
<asp:ListView ID="subCategoriesList" runat="server">
<ItemTemplate>
<div class="col-md-3">
<img id="myimag" runat="server" src='<%# Eval("icon") %>' />
<br /><%# Eval("name") %>
</div>
</ItemTemplate>
</asp:ListView>
</div>
ListviewBind Code
private void bindSubCatgoriesRightSide()
{
try {
string constr = ConfigurationManager.ConnectionStrings("conio2").ConnectionString;
using (MySqlConnection con = new MySqlConnection(constr)) {
using (MySqlCommand cmd = new MySqlCommand()) {
cmd.CommandText = "SELECT * FROM subcategory WHERE type = 'product' and category = 'mobile' and status = 'active'";
cmd.Connection = con;
using (MySqlDataAdapter sda = new MySqlDataAdapter(cmd)) {
DataTable dt = new DataTable();
sda.Fill(dt);
subCategoriesList.DataSource = dt;
subCategoriesList.DataBind();
}
}
}
} catch (Exception ex) {
Response.Write(ex);
}
}

I think you're looking at the wrong output section, in your listview item template, you are wrapping the image in <div class="col-md-3"></div ...
but in the screenshot, the image is wrapped in <div class="col-md-6 col-sm-6 col-xs-12 margin-bottom"></div
Unless you are changing the classes with JS

ASP.NET Dropdownlist causing issue

I have 2 dropdownlist on my web form and the second one is synchronised with the first one based upon what value has been chosen.
Everything works well between the 2 of them and am able to use the values from them to carry out my function.
However the first dropdownlist seems to have an effect on my repeater and paginations. Basically it keeps incrementing the pageddatesource and clears the repeater of any data ?
The SelectedIndexChanged is only meant to update the update.panel1 where the second dropdownlist is but then am not sure how it further increments the page numbers and removes data from repeater?
Here is the front end with the dropdownlists.
<section id="section-search">
<div class="fleft">
Start Date:
<asp:TextBox runat="server" ID="txtStartDate" CssClass="txt txt-sml"></asp:TextBox>
<ajaxToolkit:CalendarExtender ID="calStartDate" runat="server" PopupPosition="Right" Animated="true" TargetControlID="txtStartDate" />
End Date:
<asp:TextBox runat="server" ID="txtEndDate" CssClass="txt txt-sml"></asp:TextBox>
<ajaxToolkit:CalendarExtender runat="server" ID="calEndDate" PopupPosition="Right" Animated="true" TargetControlID="txtEndDate"></ajaxToolkit:CalendarExtender>
<hr />
Product Class:
<asp:DropDownList ID="drpProductClass" runat="server" Width="230px" OnSelectedIndexChanged="drpProductClass_SelectedIndexChanged" AutoPostBack="true" />
<hr />
<asp:UpdatePanel ID="updatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
Product:
<asp:DropDownList ID="drpProduct" runat="server" Width="230px" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div class="fright">
<asp:Button runat="server" ID="btnFilter" Text="Search" CssClass="submit" OnClick="btnFilter_Click"/>
</div>
</section>
<section id="section-title">
<h1>Order Search</h1><h2></h2>
</section>
<section class="info-strip tr">
<asp:Literal ID="litResults" runat="server"></asp:Literal>
</section>
<section class="track-table">
<asp:Literal runat="server" ID="litMessage" Visible="false" Text="<div class='wysiwyg'><p>You currently have no orders...</p></div>"></asp:Literal>
<asp:PlaceHolder runat="server" ID="phOrders">
<%--<table>
<thead>
</thead>
<tbody>--%>
<asp:Repeater ID="rprOrders" runat="server" OnItemCommand="rprOrders_ItemCommand" >
Here is my Code behind
protected void SetupControl()
{
if (this.StopProcessing)
{
// Do not process
}
else
{
if (CMSContext.ViewMode == ViewModeEnum.LiveSite)
{
if(!Page.IsPostBack)
{
PopulateProductClass();
PopulateProduct();
PopulateOrders();
}
}
}
}
protected void drpProductClass_SelectedIndexChanged(object sender, EventArgs e)
{
CustomTableItemProvider ctip = new CustomTableItemProvider();
UserInfo user = CooneenHelper.GetUserImpersonisationUser();
QueryDataParameters qdp = new QueryDataParameters();
qdp.Add("#UserID", user.UserID);
DataSet ds = gc.ExecuteQuery("CN_GetEmpIDByUID", qdp, QueryTypeEnum.StoredProcedure, true);
int emplID = Convert.ToInt32(ds.Tables[0].Rows[0]["UserEmployeeID"].ToString());
if (drpProductClass.SelectedValue.ToString() != "0")
{
QueryDataParameters qdp2 = new QueryDataParameters();
qdp2.Add("#WR_ClassID", Convert.ToInt32(drpProductClass.SelectedValue.ToString()));
qdp2.Add("#UserEmployeeID", emplID);
DataSet ds2 = gc.ExecuteQuery("CN_OrdersGetProductByClassID", qdp2, QueryTypeEnum.StoredProcedure, true);
drpProduct.ClearSelection();
drpProduct.DataSource = ds2.Tables[1];
drpProduct.DataTextField = "ProductName";
drpProduct.DataValueField = "SKUNumber";
drpProduct.DataBind();
drpProduct.Items.Insert(0, new ListItem("-- Select Product --", "0"));
updatePanel1.Update();
}
else
{
drpProduct.ClearSelection();
PopulateProduct();
}
}
private void PopulateOrders()
{
CustomerInfo ki = CustomerInfoProvider.GetCustomerInfoByUserID(CooneenHelper.GetUserImpersonisationID());
int nKustomerID = ki.CustomerID;
DataTable dts = new DataTable();
dts.Columns.Add("OrderDate", typeof(string));
dts.Columns.Add("OrderNumber", typeof(string));
dts.Columns.Add("OrderItemSKUName", typeof(string));
dts.Columns.Add("OrderItemSKUID", typeof(string));
dts.Columns.Add("OrderItemStatus", typeof(string));
dts.Columns.Add("OrderItemUnitCount", typeof(string));
QueryDataParameters qdp = new QueryDataParameters();
qdp.Add("#CustomerID", nKustomerID);
DataSet ds = gc.ExecuteQuery("CN_OrderList", qdp, QueryTypeEnum.StoredProcedure, true);
foreach (DataRow dr in ds.Tables[0].Rows)
{
DataRow drNew = dts.NewRow();
drNew["OrderDate"] = ValidationHelper.GetDateTime(dr["OrderDate"], DateTime.Now).ToShortDateString();
drNew["OrderNumber"] = dr["OrderNumber"].ToString();
drNew["OrderItemSKUName"] = dr["OrderItemSKUName"].ToString();
drNew["OrderItemSKUID"] = dr["OrderItemSKUID"].ToString();
drNew["OrderItemStatus"] = dr["OrderItemStatus"].ToString();
drNew["OrderItemUnitCount"] = dr["OrderItemUnitCount"].ToString();
dts.Rows.Add(drNew);
}
PagedDataSource pds = new PagedDataSource();
pds.DataSource = dts.DefaultView;
//DataView view = dts.DefaultView;
//allow paging, set page size, and current page
pds.AllowPaging = true;
pds.PageSize = PerPage;
pds.CurrentPageIndex = CurrentPage;
//show # of current page in label
if (pds.PageCount > 1) litResults.Text += " - Showing page " + (CurrentPage + 1).ToString() + " of " + pds.PageCount.ToString();
//disable prev/next buttons on the first/last pages
btnPrev.Enabled = !pds.IsFirstPage;
btnNext.Enabled = !pds.IsLastPage;
rprOrders.Visible = true;
rprOrders.DataSource = pds;
rprOrders.DataBind();
}

We had a similar problem and could never figure out the root cause of it, we chalked it up to a bug in WebForms. But we were able to get around the problem by setting ClientIDMode="AutoID" for the control or page, we ended up setting our entire site that way cause we found problems that it happened to solve. Let me know if this works for you too. Wish I could be of greater help.

How to use paging with Repeater control in ASP.NET?

<asp:Repeater ID="RepCourse" runat="server">
<ItemTemplate>
<div style="width:400px"></div>
<div class="course" style="float: left; margin-left: 100px; margin-top: 100px">
<div class="image">
<asp:Image ID="imgteacher" runat="server" Height="150" Width="248" ImageUrl='<%# "ShowImage.ashx?id="+ DataBinder.Eval(Container.DataItem, "CourseID") %>'/>
</div>
<div style="margin-left: 3px; width: 250px">
<div class="name">
<asp:Label runat="server" ID="lblname" Text='<%#Eval("CourseName") %>'></asp:Label>
</div>
<div style="height: 13px"></div>
<div id="teacher">
<%#Eval("UserName") %>
</div>
</div>
<div style="height: 4px"></div>
<div class="date">
<div id="datebegin">
<asp:Label ID="lbldatebegin" runat="server" Text='<%#Eval("BeginDate") %>'></asp:Label>
</div>
<div id="dateend">
<asp:Label ID="lbldateend" runat="server" Text='<%#Eval("ClosingDate") %>'></asp:Label>
</div>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
In my project Repeater Control works fine. And now I need pagination for replacing those data. But I don't have any information about this. May be someone give me advice about this issue.
As shown below picture.

There's no built-in pagination in the Repeater control, but based on this article, you can achieve pagination in the Repeater control by creating another Repeater control for pages and use PagedDataSource as it's source.
First, add this to your markup:
<div style="overflow: hidden;">
<asp:Repeater ID="rptPaging" runat="server" OnItemCommand="rptPaging_ItemCommand">
<ItemTemplate>
<asp:LinkButton ID="btnPage"
style="padding:8px;margin:2px;background:#ffa100;border:solid 1px #666;font:8pt tahoma;"
CommandName="Page" CommandArgument="<%# Container.DataItem %>"
runat="server" ForeColor="White" Font-Bold="True">
<%# Container.DataItem %>
</asp:LinkButton>
</ItemTemplate>
</asp:Repeater>
</div>
Next, add the following property in your code behind:
//This property will contain the current page number
public int PageNumber
{
get
{
if (ViewState["PageNumber"] != null)
{
return Convert.ToInt32(ViewState["PageNumber"]);
}
else
{
return 0;
}
}
set { ViewState["PageNumber"] = value; }
}
Finally add the following methods:
protected void Page_Load(object sender, EventArgs e)
{
BindRepeater();
}
private void BindRepeater()
{
//Do your database connection stuff and get your data
SqlConnection cn = new SqlConnection(yourConnectionString);
SqlCommand cmd = new SqlCommand();
cmd.Connection = cn;
SqlDataAdapter ad = new SqlDataAdapter(cmd);
cmd.CommandText = "Select * from YourTable";
//save the result in data table
DataTable dt = new DataTable();
ad.SelectCommand = cmd;
ad.Fill(dt);
//Create the PagedDataSource that will be used in paging
PagedDataSource pgitems = new PagedDataSource();
pgitems.DataSource = dt.DefaultView;
pgitems.AllowPaging = true;
//Control page size from here
pgitems.PageSize = 4;
pgitems.CurrentPageIndex = PageNumber;
if (pgitems.PageCount > 1)
{
rptPaging.Visible = true;
ArrayList pages = new ArrayList();
for (int i = 0; i <= pgitems.PageCount - 1; i++)
{
pages.Add((i + 1).ToString());
}
rptPaging.DataSource = pages;
rptPaging.DataBind();
}
else
{
rptPaging.Visible = false;
}
//Finally, set the datasource of the repeater
RepCourse.DataSource = pgitems;
RepCourse.DataBind();
}
//This method will fire when clicking on the page no link from the pager repeater
protected void rptPaging_ItemCommand(object source, System.Web.UI.WebControls.RepeaterCommandEventArgs e)
{
PageNumber = Convert.ToInt32(e.CommandArgument) - 1;
BindRepeater();
}
Please give it a try and if you faced any issue just inform me.
Edit: Alternative Solution
Another excellent solution can be found Here, this solution includes the Navigation buttons of pages. You'll need to download files from that link to see a functional pagination and just replace the DataList control with your Repeater control.
Hope this helps.

On link click from menu BindDataList

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.

Displaying multiple image from SQL Server 2008

I need to display multiple images from a database table and bind it to a repeater, how do I go about doing it?
This is my current code, but I have no idea on how to proceed to display images
Below is my method to load data to the repeater:
public void loadNoofNewJobsCompany()
{
DateTime lastlogged = Convert.ToDateTime(Session["LastLoginstaff"]);
string sqlStr = "SELECT * FROM Job ";
sqlStr += "WHERE ";
sqlStr += "UpdatedDateCmpRep <= #loggedin";
SqlCommand cmd = new SqlCommand(sqlStr, cnn);
cmd.Parameters.AddWithValue("#loggedin", lastlogged);
try
{
cnn.Open();
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
da.Fill(dt);
Label2.Text = dt.Rows.Count.ToString();
PagedDataSource pgdsc = new PagedDataSource();
pgdsc.DataSource = dt.DefaultView;
repeater1.DataSource = pgdsc;
repeater1.DataBind();
}
catch (Exception ex)
{
Response.Write("Error: " + ex.Message);
}
finally
{
if (cnn != null)
{
cnn.Close();
}
}
}
This is the repeater:
<asp:Repeater ID="repeater1" runat="server">
<ItemTemplate>
<div class="boxgrid caption">
<%--<img src="../../img/google.png" style="text-align:center"/>--%>
<div class="cover boxcaption">
<p>
<a href='../Job/ViewJobDetail.aspx?ID=<%# DataBinder.Eval(Container.DataItem, "JobID")%>' class="headerlink">
<%# getTitle(Eval("JobName").ToString()) %>
</a>
</p>
<p>
Salary Range:
<%# DataBinder.Eval(Container.DataItem, "JobSalaryRange")%>
</p>
... (more stuff - not relevant here) .....
</div>
</div>
</ItemTemplate>
</asp:Repeater>

For displaying images in gridview we need to create a Handler to read binary data from database.
here is good example of it.

I am assuming that the images are stored in the database.
Write .ashx(Http handler) to display the image.You can render the image using Response Header in the .ashx file directly from the database and use that .ashx file as follow in your repeater,the images will get displayed.
<img src="displayImage.ashx?id=111" style="text-align:center"/>

one more good example to look at
Display Images from database in ASP.NET GridView using HttpHandler