Asp.net programming we consider all important topic for knowledge about controls,web Services, JSON, Ajax, database, and interview related Question. In this Asp.net and sql server tutorial blog we give many examples of jquery as like How Play YouTube Video in Your Asp.net Website by URL, How to Play YouTube Videos in Asp.net by using Jquery , Jquery Change div background on mouseover in asp.net , JQuery UI Datepicker (Calendar) etc.

Thursday, February 19, 2015

ASP.Net DataList Item in jQuery Dialog Modal popup on button click

ASP.Net DataList Item in jQuery Dialog Modal popup on button click:



DataList Item in jQuery Dialog Modal popup:


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
        rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $("[id*=lnkSelect]").live("click", function () {
            $("#item").html($("[id*=lblItem]", $(this).closest("tr")).html());
            $("#price").html($("[id*=lblPrice]", $(this).closest("tr")).html());
            $("#dialog").dialog({
                title: "Selected Row",
                buttons: {
                    Ok: function () {
                        $(this).dialog('close');
                    }
                }
            });
            return false;
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:DataList ID="DataList1" runat="server">
        <ItemTemplate>
            Item:
            <asp:Label ID="lblItem" runat="server" Text='<%# Eval("Item") %>'></asp:Label><br />
            Price:
            <asp:Label ID="lblPrice" runat="server" Text='<%# Eval("Price") %>'></asp:Label><br />
            <asp:LinkButton ID="lnkSelected" runat="server" Text="Select"></asp:LinkButton>
        </ItemTemplate>
    </asp:DataList>
    <div id="dialog" style="display: none">
        Item:<span id="item"></span><br />
        Price:<span id="price"></span>
    </div>
    </form>
</body>
</html>

How to Display items in PopUp from DataList Button Click in Asp.net:

page.aspx.cs C# code for bind datalist:


protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            DataTable dt = new DataTable();
            dt.Columns.AddRange(new DataColumn[2] { new DataColumn("Item"), new DataColumn("Price") });
            dt.Rows.Add("Shirt", 0);
            dt.Rows.Add("Football", 1000);
            dt.Rows.Add("Bat", 500);
            DataList1.DataSource = dt;
            DataList1.DataBind();     
        }

}

No comments:

Post a Comment