Wednesday 13 March 2013

how to bind image in datalist control and create paging navigation in datalist in asp.net



 Description:-

 in this example we explain that how to bind image with it's prize in datalist control.you can also paging the datalist and paging in gridview in very simple but in datalist you have to manually create them. we bind the Image and create a paging for DataList control are as shown below example.

What is DataList Control in Asp.Net:-

            DataList is DataSource Control are used to Easily bind Edit and Delete Data with database very Easily.DataList is same like a reapeter Control in Asp.Net.

Here is a some Important Property of DataList Control are:
                                             
DatakeyField:- Get or Set the Key Fields in the datasource specified by the datasource property.

DataKey:- Gets a datakey collections object that store key value of each record in a DataList control.

DataMember:- Gets or sets the datamember to a DataList control.

DataSource:- Gets or sets the sorce containing a list of values used by populatesthe items within the control.

Datasourceid:- Get or set the Id property of the datasorce control that datalist control should be used to retrieve it’s  datasource.

Edititemindex:- Get or set the index number of selected item in the datalist control to Edit.

Items:- Gets a collection of Datalistitems object representing a indivisual items within control.

ItemTemplate:-Get or set the itemtemplate for the item in datalist control.

Repeatcolomn:-get or set the number of colomn should be displayed in datalist control.


SelectedItem:- Get the selected item of the datalist control.


Here is some link that is very useful for same programming like :-

Upload multiple Files with Progressbar upload multiple file at a time with progressbar


Bind country and state in DropdownList in MVC bind dropdownList in MVC4

to show Example of insert,update,delete in gridview using Naming Container please click here Naming Container for insert update Delete in Gridview



apple.aspx:-

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="apple.aspx.cs" Inherits="apple" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <style type="text/css">
.web_dialog_overlay
{
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   height: 100%;
   width: 100%;
   margin: 0;
   padding: 0;
   background: #000000;
   opacity: .15;
   filter: alpha(opacity=15);
   -moz-opacity: .15;
   z-index: 101;
   display: none;
}
.web_dialog
{
   display: none;
   position: fixed;
   width: 380px;
   height: 200px;
   top: 50%;
   left: 50%;
   margin-left: -190px;
   margin-top: -100px;
   background-color: #ffffff;
   border: 2px solid #336699;
   padding: 0px;
   z-index: 102;
   font-family: Verdana;
   font-size: 10pt;
}
.web_dialog_title
{
   border-bottom: solid 2px #336699;
   background-color: #336699;
   padding: 4px;
   color: White;
   font-weight:bold;
}
.web_dialog_title a
{
   color: White;
   text-decoration: none;
}
.align_right
{
   text-align: right;
}

</style>
</asp:Content>


<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

    <script type="text/javascript" language="javascript">

        function Enterno() {

            var name = prompt("how many piece u wat to purchase?", "");
            var grid = document.getElementById("tt");
            grid.value = name;
            if (name != '' && name != null) {
                return true;
            }
            else {
                return false;
            }

        }


        function ShowDialog(id) {
          
            if (window.XMLHttpRequest)
            {
                xmlhttp=new XMLHttpRequest();
            }
            else
            {
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    document.getElementById("print").innerHTML=xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET","feature.aspx?id="+id,true);
            xmlhttp.send();

            $("#overlay").show();
            $("#dialog").fadeIn(300);

  
        }

        function HideDialog() {
            $("#overlay").hide();
            $("#dialog").fadeOut(300);
        }

</script>
<asp:DataList ID="DataList1" runat="server" RepeatColumns="3"
                    onitemdatabound="DataList1_ItemDataBound" Width="373px" BackColor="White"
                    BorderColor="#336666" BorderStyle="Double" BorderWidth="3px" CellPadding="10"
                    Font-Bold="True" Font-Italic="False" Font-Overline="False"
                    Font-Strikeout="False" Font-Underline="False" ForeColor="#99CCFF"
                    GridLines="Horizontal" AllowPaging="True" PageSize="1"
                  DataKeyField="id">
              
                    <FooterStyle BackColor="White" ForeColor="#333333" />
                    <ItemStyle BackColor="White" ForeColor="#333333" />
                    <SelectedItemStyle BackColor="#339966" Font-Bold="True" ForeColor="White" />
                    <HeaderStyle BackColor="#336666" Font-Bold="True" ForeColor="White" />
                               <ItemTemplate>
                               <asp:HiddenField Value='<%# Eval("image") %>' ID="HiddenField1" runat="server" />
                               <asp:HiddenField Value='<%# Eval("productname") %>' ID="HiddenField2" runat="server" />
             <asp:HiddenField Value='<%# Eval("prize") %>' ID="HiddenField3" runat="server" />
                   <div style="border:solid 1px blue;text-decoration:blink"> <asp:Image ID="Image1" runat="server" AlternateText="hi" Width="230" Height="200"   />
                    <div id="overlay" class="web_dialog_overlay"></div>
 
<div id="dialog" class="web_dialog">
   <table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
      <tr>
         <td class="web_dialog_title">Online Survey</td>
         <td class="web_dialog_title align_right">
            <input type="button"  id="btnclose" value="close" onclick="HideDialog();"  />
         </td>
      </tr>
      <tr>
      <td>
      <div id="print" style="font-size: medium; color: #00FF00; text-decoration: blinkmargin: auto; padding: inherit; table-layout: auto; border-collapse: separate; border-spacing: inherit"></div>
      </td>
      </tr>
      </table>
</div>
            <br /><%# Eval("prize") %> <br />
                       <asp:LinkButton ID="LinkButton1" runat="server" OnClientClick="return Enterno();" OnClick="add" CommandArgument='<%# Eval("id") %>'>Add To Cart</asp:LinkButton>
                       &nbsp;&nbsp&nbsp;&nbsp <input type="button"  onclick="ShowDialog('<%# Eval("id") %>    ')" value="show Feature" />
                     
                     
                     
</div>
                     
         </ItemTemplate>
       
       
                </asp:DataList>
                <center>
                <asp:ImageButton ID="prev" Width="100" Height="60" runat="server" ImageUrl="~/image/peevious.jpeg" OnClick="btnprev_Click" />
        <asp:Label ID="lblCurrentPage" runat="server" Font-Bold="True" ForeColor="#FFFF66"></asp:Label>


    <asp:ImageButton ID="next" Width="100" Height="60" runat="server" ImageUrl="~/image/next.jpeg" OnClick="btnnext_Click" />
  
    </center>
     <input type="text" id="tt" name="tt" style="border-style: solid; border-width: thin; background-color: #000000; border-color: #000000" />
 
</asp:Content>




apple.aspx.cs


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
public partial class apple : System.Web.UI.Page
{
    PagedDataSource pagedData = new PagedDataSource();
    int CurPage = 1;

    protected void Page_Load(object sender, EventArgs e)
    {
        doPaging();

    }

    public DataTable getTheData()
    {
        string con = @"Data Source=SQLDB;Initial Catalog=Demo;User ID=Demod;Password=Demo1@";

        string q1 = "select * from nokia where category = 'apple'";

        DataSet ds = new DataSet();
        //SqlDataAdapter da = new SqlDataAdapter();
        SqlConnection cn = new SqlConnection(con);

        SqlCommand cmd = new SqlCommand(q1, cn);

        // SqlConnection myConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString);

        SqlDataAdapter objSQLAdapter = new SqlDataAdapter(q1, cn); objSQLAdapter.Fill(ds, "nokia");


        return ds.Tables[0];

    }

    void doPaging()
    {

        pagedData.DataSource = getTheData().DefaultView;

        pagedData.AllowPaging = true;
        pagedData.PageSize = 6;



        try
        {
            if (Request["Page"].ToString() != null)
            {
                CurPage = Int32.Parse(Request["Page"].ToString());
            }
            else
            {
                CurPage = 1;
            }

            pagedData.CurrentPageIndex = CurPage - 1;

        }

        catch

        (Exception ex)
        {

            pagedData.CurrentPageIndex = 0;

        }


        lblCurrentPage.Text = "Page: " + CurPage.ToString() + " of " + pagedData.PageCount.ToString(); ;

        DataList1.DataSource = pagedData;
        DataList1.DataBind();

    }


    protected void btnprev_Click(object sender, EventArgs e)
    {
        Response.Redirect(Request.CurrentExecutionFilePath + "?Page=" + (CurPage - 1));
    }

    protected void btnnext_Click(object sender, EventArgs e)
    {
        Response.Redirect(Request.CurrentExecutionFilePath + "?Page=" + (CurPage + 1));
    }

    protected void bsrc_Click(object sender, EventArgs e)
    {
        //Response.Redirect(Request.CurrentExecutionFilePath + "?Page=" + (CurPage + 1));
    }


    protected void DataList1_ItemDataBound(object sender, DataListItemEventArgs e)
    {
        HiddenField hf = e.Item.FindControl("HiddenField1") as HiddenField;
        if (hf != null)
        {
            string val = hf.Value;

            Image img = e.Item.FindControl("Image1") as Image;
            img.ImageUrl = "~/" + val;
        }


    }


    protected void add(object sender, EventArgs e)
    {
        string id = ((LinkButton)sender).CommandArgument;
        string path = null;
        string name = null;
        string p = null;
        string qu = Request.Form["tt"];
        foreach (DataListItem li in DataList1.Items)
        {
            if (DataList1.DataKeys[li.ItemIndex].ToString().Equals(id))
            {
                HiddenField img = (HiddenField)li.FindControl("HiddenField1");
                path = img.Value;
                HiddenField pnm = (HiddenField)li.FindControl("HiddenField2");
                name = pnm.Value;
                HiddenField prize = (HiddenField)li.FindControl("HiddenField3");
                p = prize.Value;
            }
        }
        string con = @"Data Source=SQLDB;Initial Catalog=Demo;User ID=Demod;Password=Demo1@";
        string q1 = "insert into manage(image,pnm,prize,quantity) values('" + path + "','" + name + "','" + p + "','" + qu + "')";
        SqlConnection cn = new SqlConnection(con);

        SqlCommand cmd = new SqlCommand(q1, cn);

        cn.Open();

        int i = cmd.ExecuteNonQuery();
        if (i > 0)
        {
            ClientScript.RegisterClientScriptBlock(this.GetType(), "key", "<script> alert('added successfully');</script>");
        }

    }


}

0 comments:

Post a Comment