javascript - I want to display model popup in listview in that model popup i want to display each row data in that model popup -
i trying model popup on click of row dont know how handle , display model popup , how identify row id data of perticular row database. go please try give me suggestion display modelpopup .
below in bootstrap modelbox in place of lable text want display details of row data
this .aspx file :
<!-- listview starting --> <asp:listview runat="server" id="listview1" itemplaceholderid="placeholder4" > <emptydatatemplate> <p class="control-label">oops! no data available</p> </emptydatatemplate> <layouttemplate> <table id="mytable2" class="table table-striped"> <thead> <tr> <th>sno.</th> <th>date</th> <th>subject</th> <th>content</th> <th>acknowledgement</th> </tr> </thead> <tbody> <asp:placeholder id="placeholder4" runat="server"></asp:placeholder> </tbody> </table> </layouttemplate> <itemtemplate> <tr> <td>1</td> <td><%# eval("noti_date") %></td> <td><%# eval("noti_subject") %></td> <td><asp:linkbutton id="linkbutton1" data-toggle="modal" runat="server" data-target="#notifymodal" style="cursor:pointer;" text='<%# eval("noti_content") %>' ></asp:linkbutton></td> <td><span class="glyphicon glyphicon-check green "><%# eval("ack") %></span></td> </tr> </itemtemplate> </asp:listview> <!-- listview end --> <!-- model popup start --> <div class="modal fade" id="notifymodal" tabindex="-1" role="dialog" aria-labelledby="mymodallabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="mymodallabel">notifications</h4> </div> <div class="modal-body"> <table class="table"> <tbody > <tr> <td style="border-top:none"></td><td style="border-top:none"><b><asp:label id="lbl_date" cssclass="red" runat="server" text="22/5/2015"></asp:label></b></td> </tr> <tr> <td style="border-top:none">subject</td> <td style="border-top:none"><asp:label id="lbl_sub" runat="server" text="update status"></asp:label></td> </tr> <tr> <td style="border-top:none">sent by</td> <td style="border-top:none"><asp:label id="lbl_sentby" runat="server" text="info@amcsquare.com"></asp:label></td> </tr> <tr> <td colspan="2" style="border-top:none"><div class="panel panel-default" style="width:100%;"><div class="panel-body"><asp:label id="lbl_content" runat="server" text="this inform update status..."></asp:label></div></div></td> </tr> <tr> <td style="border-top:none"></td> <td style="border-top:none"> <div style="text-align:right;"><button type="button" class="btn btn-danger" data-dismiss="modal">acknowledge</button></div></td> </tr> </tbody> </table> </div> </div> </div> </div> <!-- model popup end --> code behind file :
protected void page_load(object sender, eventargs e) { if (request.isauthenticated) { userid = httpcontext.current.user.identity.name.tostring(); if (!ispostback) { listview1.datasource = updateprofile.getnotifications(userid); listview1.databind(); } } else { response.redirect("/default2.aspx"); } } protected void linkbutton1_click(object sender, eventargs e) { }
for modal pop-up can use following code
<%@ register assembly="ajaxcontroltoolkit" namespace="ajaxcontroltoolkit" tagprefix="cc1" %> <asp:scriptmanager id="scriptmanager1" runat="server"> <!-- modalpopupextender --> <cc1:modalpopupextender id="mp1" runat="server" popupcontrolid="panel1" targetcontrolid="id of button on want show popup" cancelcontrolid="btnclose"> </cc1:modalpopupextender> <asp:panel id="panel1" runat="server" cssclass="modalpopup" align="center" height="153px" width="152px" > <strong>this asp.net ajax modalpopupextender example</strong><br /> <asp:button id="btnclose" runat="server" text="close" /> </asp:panel> <!-- modalpopupextender --> css class
<style type="text/css"> .modalbackground { background-color: black; filter: alpha(opacity=90); opacity: 0.8; } .modalpopup { border: 3px solid black; background-color: #ffffff; padding-top: 10px; padding-left: 10px; width:auto; height:auto; }
Comments
Post a Comment