Select post from DataList on Button click and display on modal popup using jQuery in ASP.Net

micah

SOLVED CLOSED ACTIVE ANSWERED
User: micah
Posted: on Apr 19, 2016 09:16 AM
Forum: Data Controls
Answer: 1
Views: 7102
Sample Code: Download

I have a datalist that displays all records from table but i have a button select on the datalist and i want to use the button to select each record of the column and display it on modal

here is my code

 GetPost2(username);
        }
    }


    public void GetPost2(string username)
    {
        // int followerid;
        //  int followingid;
        string str = ConfigurationManager.ConnectionStrings["conn"].ConnectionString;
        string getADPOST = "GetMessage";
        using (SqlConnection con = new SqlConnection(str))
        {
            con.Open();
            using (SqlCommand cmd = new SqlCommand(getADPOST, con))
            {
                cmd.CommandType = CommandType.StoredProcedure;
                cmd.Parameters.AddWithValue("@UserName", username);
                //  cmd.Parameters.AddWithValue("@Name", username);
                //   cmd.Parameters.AddWithValue("@FriendUserName", username);
                //     cmd.Parameters.AddWithValue("@FollowingId", follower);
                //   
                SqlDataAdapter da = new SqlDataAdapter(cmd);
                DataTable ds = new DataTable();
                da.Fill(ds);



                ShowPost.DataSource = ds;
                ShowPost.DataBind();
            }
        }
    }

HTML

 <!-- Modal share category -->
  <div class="modal  fade" id="myModal9t" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header" style="background-color:#31b0d5">
          <button type="buttonclose" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title" style="color:white">BroadCast this to friends</h4>
           
        </div>
        <div class="modal-body">
          
          
           
           
          
         <div class="col-sm-12">
   
       
       
        <p >
            <asp:TextBox ID="TextBox2" runat="server" placeholder="Add Comment... " TextMode="MultiLine" CssClass="form-control" Height="80px"></asp:TextBox>
        </p>
        <br />
             <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                 <ContentTemplate>
             <asp:FormView ID="ShowPost" runat="server" CssClass=" table table-bordered table-striped table-hover">
          
    <ItemTemplate>
              
                  <!-- Conversations are loaded here -->
       
                  <div class="">
                    <!-- Message. Default to the left -->
                    <div class="" style="margin-bottom:1px; margin-left:8px;  margin-top:8px; margin-right:8px">
                     
  <div class=" " style="">

         <ul class="media-list">
  <li class="media">
      <a class="pull-left" href='<%#getUserHREF1(Container.DataItem)%>'>
   
           
                                       <img src='<%#getSRC(Container.DataItem)%>' class="media-object img-circle img-rounded animated bounce" style="border: medium solid #CCCCFF; width:50px; height:50px; "  />

                                              
                           
                                                        
    </a>
     

    <div class="media-body" >
           
      <h5 class="media-heading">
     <a class="pull-left" href='<%#getUserHREF1(Container.DataItem)%>'>
                                  <asp:Label ID="Label2" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"Name") %>'  Font-Bold="True " ForeColor="#666666" />  
                                  </a>
                                  <i style="margin-right:2px; margin-left:2px; color:Silver" class="fa fa-play"></i>
                 <asp:Label ID="Label11" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"FriendUserName") %>'  Font-Bold="True " ForeColor="Silver" />
       <br />
          
     <asp:Label ID="Label3" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "SendDate","{0:dddd,MMMM dd,yyyy}" ) %>'   Font-Size="X-Small" Font-Bold="True"  ForeColor="Gray" />
         
           <div class="clearfix" ></div>
          
           
      </h5>
          
      
          <asp:Label ID="lblSendDate" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"ContentPost")%>' Font-Names="Comic Sans MS" ></asp:Label>
        &nbsp;<asp:HyperLink ID="HyperLink1" runat="server">Read More...</asp:HyperLink>
              
        <div class=" col-lg-12" style="margin-bottom:2px;margin-top:2px">
             <a href='<%#getUserHREF2(Container.DataItem)%>' class="">
                                                   <img src='<%#getSRCDD(Container.DataItem)%>'  class="img-rounded img-responsive" style=" width:100%" alt=""  />
                                    
                           
                                    </a>
              </div>
            <div class=" col-lg-12" style="margin-top:2px;margin-bottom:2px ">
 


                 <div class=" col-lg-6" style="margin-top:2px">
          <a href='<%#getUserHREF4(Container.DataItem)%>' class="">
                                                   <img src='<%#getSRC4(Container.DataItem)%>'  class="img-rounded img-responsive" style=" width:50%" alt=""  />
                                    
                           
                                    </a>
                 </div>

                
                 <div class=" col-lg-6" style="margin-top:2px">
          <a href='<%#getUserHREF5(Container.DataItem)%>' class="">
                                                   <img src='<%#getSRC5(Container.DataItem)%>'  class="img-rounded img-responsive" style=" width:100%" alt=""  />
                                    
                           
                                    </a>
                 </div>
              </div>
            
           
      
      <!-- Nested media object -->
  

       

        
    </div>
         
      
  </li>
</ul>         
                              
     
          </div>

          
                  </div><!--/.direct-chat-messages-->

                  <!-- Contacts are loaded here -->
                 
                </div><!-- /.box-body -->

                   

                  


                  
                                </ItemTemplate>
</asp:FormView>
                 </ContentTemplate>
                 <Triggers>
                   
                 </Triggers>
        </asp:UpdatePanel>

</div>
        </div>
          <div class="clearfix"></div>
        <div class="modal-footer">
            <asp:LinkButton ID="LinkButton6" runat="server" CssClass="btn btn-twitter" Font-Bold="True"><i class="fa fa-share-square-o" style="font-weight: bold; margin-right:3px; font-size: large;"></i>BroadCast</asp:LinkButton>
          
     
        </div>
      </div>
      
    </div>
  </div>

 <!-- Trigger the modal with a button -->

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

dharmend...

0 5

Reply
ANSWER
User: dharmendr
Replied: on Apr 20, 2016 04:57 AM
Modified: on Sep 15, 2017 02:14 AM
Report

Hi micah,

I have created sample refer the below code.

HTML

<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.7.2/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">
        $(function () {
            $("[id*=btnSelect]").click(function () {
                $("#name").html($("[id*=lblName]", $(this).closest("tr")).html());
                $("#userName").html($("[id*=lblUserName]", $(this).closest("tr")).html());
                $("#friendUserName").html($("[id*=lblFriendUserName]", $(this).closest("tr")).html());
                $("#contentPost").html($("[id*=lblContentPost]", $(this).closest("tr")).html());
                $("#imageName1").html($("[id*=lblImageName1]", $(this).closest("tr")).html());
                $("#imageName2").html($("[id*=lblImageName2]", $(this).closest("tr")).html());
                $("#imageName3").html($("[id*=lblImageName3]", $(this).closest("tr")).html());
                $("#imageName4").html($("[id*=lblImageName4]", $(this).closest("tr")).html());
                $("#dialog").dialog({
                    title: "View Details",
                    width: 400,
                    buttons: {
                        Ok: function () {
                            $(this).dialog('close');
                        }
                    },
                    modal: true
                });
                return false;
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:DataList ID="DataList1" runat="server">
        <ItemTemplate>
            <b>Name:</b>&nbsp;<asp:Label ID="lblName" runat="server" Text='<%# Eval("Name") %>'></asp:Label><br />
            <b>UserName:</b>&nbsp;<asp:Label ID="lblUserName" runat="server" Text='<%# Eval("UserName") %>'></asp:Label><br />
            <b>FriendUserName:</b>&nbsp;<asp:Label ID="lblFriendUserName" runat="server" Text='<%# Eval("FriendUserName") %>'></asp:Label><br />
            <b>ContentPost:</b>&nbsp;<asp:Label ID="lblContentPost" runat="server" Text='<%# Eval("ContentPost") %>'></asp:Label><br />
            <b>ImageName1:</b>&nbsp;<asp:Label ID="lblImageName1" runat="server" Text='<%# Eval("ImageName1") %>'></asp:Label><br />
            <b>ImageName2:</b>&nbsp;<asp:Label ID="lblImageName2" runat="server" Text='<%# Eval("ImageName2") %>'></asp:Label><br />
            <b>ImageName3:</b>&nbsp;<asp:Label ID="lblImageName3" runat="server" Text='<%# Eval("ImageName3") %>'></asp:Label><br />
            <b>ImageName4:</b>&nbsp;<asp:Label ID="lblImageName4" runat="server" Text='<%# Eval("ImageName4") %>'></asp:Label><br />
            <asp:Button ID="btnSelect" runat="server" Text="Select"></asp:Button>
        </ItemTemplate>
    </asp:DataList>
    <div id="dialog" style="display: none">
        <b>Name:</b>&nbsp;<span id="name"></span><br />
        <b>UserName:</b>&nbsp;<span id="userName"></span><br />
        <b>FriendUserName:</b>&nbsp;<span id="friendUserName"></span><br />
        <b>ContentPost:</b>&nbsp;<span id="contentPost"></span><br />
        <b>ImageName1:</b>&nbsp;<span id="imageName1"></span><br />
        <b>ImageName2:</b>&nbsp;<span id="imageName2"></span><br />
        <b>ImageName3:</b>&nbsp;<span id="imageName3"></span><br />
        <b>ImageName4:</b>&nbsp;<span id="imageName4"></span><br />
    </div>
    </form>
</body>
</html>

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[8] 
        { 
            new DataColumn("Name"), 
            new DataColumn("UserName"),
            new DataColumn("FriendUserName"),
            new DataColumn("ContentPost"),
            new DataColumn("ImageName1"),
            new DataColumn("ImageName2"),
            new DataColumn("ImageName3"),
            new DataColumn("ImageName4") 
        });
        dt.Rows.Add("Name1", "UserName1", "FriendUserName1", "ContentPost1", "ImageName11.jpg", "ImageName21.jpg", "ImageName31.jpg", "ImageName41.jpg");
        dt.Rows.Add("Name2", "UserName2", "FriendUserName2", "ContentPost2", "ImageName12.png", "ImageName22.png", "ImageName32.png", "ImageName42.png");
        dt.Rows.Add("Nam3", "UserName3", "FriendUserName3", "ContentPost3", "ImageName13.gif", "ImageName23.gif", "ImageName33.gif", "ImageName43.gif");
        DataList1.DataSource = dt;
        DataList1.DataBind();
    }
}

Screenshot

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

Select post from DataList on Button click and display on modal popup using jQuery in ASP.Net

Company

Explore

Follow us

Contact Us