Populate (Bind) DataList with Images on Client Side using jQuery AJAX in ASP.Net

DawoodCs

SOLVED CLOSED ACTIVE ANSWERED
User: DawoodCs
Posted: on Sep 11, 2015 05:31 AM
Forum: Data Controls
Answer: 1
Views: 7447

How could I bind images and texts to datalist itemtemplate's image control and label by jquery json?

as your http://www.aspforums.net/Threads/131155/how-can-i-bind-aspnet-datalist-using-jquery-json-and-webservice/ post i tried

like below but its not working..

/*asp.net datalist control with three controls*/

<asp:DataList ID="dlImages" runat="server" RepeatColumns="6">
<ItemTemplate>
<a id="imageLink" href='<%# Eval("ImageName","~/images/fabrics/{0}") %>' title='<%#Eval("Descript") %>' rel="lightbox[Brussels]" runat="server" >
<asp:Image ID="Image1" ImageUrl='<%# Bind("ImageName", "~/images/fabrics/{0}") %>' runat="server" Width="100px" Height="60px" hspace="20px"/><br />
<asp:Label ID="lbl1" runat="server" Text='<%#Eval("ImageAssignedName") %>' Height="30px"></asp:Label>
</a> 
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" VerticalAlign="Bottom"/>
</asp:DataList>

/*Jquery Json call webmethode*/

<script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "WebForm2.aspx/BindDatatable",
                data: "{}",
                dataType: "json",
                success: function (data) {
                    alert(data.d);                    
                    for (var i = 0; i < data.d.length; i++) {
                        alert('Hello')
                    
                        alert(row);
                        var row = $("#imageLink").html(data.d[i].ImageName);
                        row = $("#Image1").html(data.d[i].ImageName);
                        row =  $("#lbl1").html(data.d[i].ImageAssignedName);
                        $("[id*=dlImages]").append(row);                 
                    }                  

                },
                error: function (result) {
                    alert("Error");
                }
            });
        });
</script>

/*c# webmethode*/

 [WebMethod]
        public static UserDetails[] BindDatatable()
        {
            DataTable dt = new DataTable();
            List<UserDetails> details = new List<UserDetails>();

            using (SqlConnection connnection = new SqlConnection(ConfigurationManager.ConnectionStrings["dbconnection"].ConnectionString.ToString()))
            {
                using (SqlCommand cmd = new SqlCommand("SELECT Fabrics.ImageName,Fabrics.Descript,ImageAssignedName from Fabrics", connnection))
                {
                    connnection.Open();
                    SqlDataAdapter da = new SqlDataAdapter(cmd);
                    da.Fill(dt);
                    foreach (DataRow dtrow in dt.Rows)
                    {
                        UserDetails user = new UserDetails();
                        user.ImageName = dtrow["ImageName"].ToString();
                        user.Descript = dtrow["Descript"].ToString();
                        user.ImageAssignedName = dtrow["ImageAssignedName"].ToString();
                        details.Add(user);
                    }
                }
            }
            return details.ToArray();
        }
        public class UserDetails
        {
            public string ImageName { get; set; }
            public string Descript { get; set; }
            public string ImageAssignedName { get; set; }
        }

Download FREE API for Word, Excel and PDF in ASP.Net

Shashika...

0 5

Reply
ANSWER
User: Shashikant
Replied: on Sep 14, 2015 06:46 AM
Modified: on Sep 14, 2015 07:35 AM
Report

Here I have created sample that will help you out.

HTML

<div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                type: "POST",
                url: "Default.aspx/GetImages",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert(response.responseText);
                },
                error: function (response) {
                    alert(response.responseText);
                }
            });
        });

        function OnSuccess(response) {
            var xmlDoc = $.parseXML(response.d);
            var xml = $(xmlDoc);
            var images = xml.find("Images");
            var repeatColumns = parseInt("<%=dlImages.RepeatColumns == 0 ? 1 : dlImages.RepeatColumns %>");
            var rowCount = Math.ceil(images.length / repeatColumns);
            var i = 0;
            while (i < repeatColumns * rowCount) {
                var row = $("[id*=dlImages] tr").eq(0).clone(true);
                for (var j = 0; j < repeatColumns; j++) {
                    var image = $(images[i]);
                    if (image.length == 0) {
                        $("table:last", row).remove();
                    } else {
                        var imgUrl = image.find("ImagePath").text().split('/');
                        imgUrl = $.grep(imgUrl, function (img) {
                            return img != '~';
                        });
                        var url = imgUrl.join('/');
                        $(".name", row).eq(j).html(image.find("ImageName").text());
                        $(".image", row).eq(j).attr('src', url);
                        $(".button", row).eq(j).attr('href', image.find("ImagePath").text());
                    }
                    i++;
                }
                $("[id*=dlImages]").append(row);
            }
            $("[id*=dlImages] tr").eq(0).remove();
            $("[id*=dlImages]").show();
        }
    </script>
    <asp:DataList ID="dlImages" runat="server" RepeatLayout="Table" RepeatColumns="3"
        CellPadding="2" CellSpacing="20">
        <ItemTemplate>
            <table class="item" cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td align="center" class="header">
                        <asp:Label Text='<%# Eval("ImageName") %>' CssClass="name" runat="server" />
                    </td>
                </tr>
                <tr>
                    <td align="center" class="body">
                        <asp:Image CssClass="image" runat="server" Width="100px" Height="100px" />
                    </td>
                </tr>
                <tr>
                    <td class="footer" align="center">
                        <asp:HyperLink Text="View" NavigateUrl='<%# Eval("ImagePath") %>' class="button"
                            runat="server" Target="_blank" />
                        <input type="hidden" class="is_used" value="0" />
                    </td>
                </tr>
            </table>
        </ItemTemplate>
    </asp:DataList>
</div>

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        this.BindDummyItem();
    }
}

private void BindDummyItem()
{
    DataTable dummy = new DataTable();
    dummy.Columns.Add("ImageName");
    dummy.Columns.Add("ImagePath");

    int count = dlImages.RepeatColumns == 0 ? 1 : dlImages.RepeatColumns;
    for (int i = 0; i < count; i++)
    {
        dummy.Rows.Add();
    }
    dlImages.DataSource = dummy;
    dlImages.DataBind();
}

[WebMethod]
public static string GetImages()
{
    return GetImagesData().GetXml();
}

public static DataSet GetImagesData()
{
    DataSet ds = new DataSet();
    DataTable dt = new DataTable("Images");
    dt.Columns.Add("ImageName");
    dt.Columns.Add("ImagePath");
    dt.Rows.Add("Chrysanthemum.jpg", "~/Images/Chrysanthemum.jpg");
    dt.Rows.Add("Desert.jpg", "~/Images/Desert.jpg");
    dt.Rows.Add("Hydrangeas.jpg", "~/Images/Hydrangeas.jpg");
    dt.Rows.Add("Tulips.jpg", "~/Images/Tulips.jpg");
    ds.Tables.Add(dt);
    return ds;
}

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Populate (Bind) DataList with Images on Client Side using jQuery AJAX in ASP.Net

Company

Explore

Follow us

Contact Us