c# - How do I read/write ListView ItemTemplate field using jQuery? -
i have been struggling this, put stripped down version show problems having.
start generic class member class shown below:
public class member { public member() { number = string.empty; name = string.empty; email = string.empty; phone = string.empty; } public string number { get; set; } public string name { get; set; } public string email { get; set; } public string phone { get; set; } public string linknumber { { var result = string.empty; if (!string.isnullorempty(number)) { result = string.format("<a class=\"showpopup\" id=\"{0}\">{0}</a>", number); } return result; } } } i want display in asp.net framework 4.6 webform using listview control.
aside:
there jsfiddle tool works asp.net? can't asp.net render there, post html here, in sections.
in head of document, have simple javascript , css:
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.js"></script> <script> $(document).ready(function () { $('div.popup_hider').hide(); $('div.popup_box').hide(); //on click hide message , //on click show hider div , message $('.showpopup').click(function () { $('div.popup_hider').fadein("slow"); $('div.popup_box').fadein("slow"); $('tdmember').val($('#<%=lnkmembernumber.clientid%>').val()); $('tdname').val($('#<%=lnkmembername.clientid%>').val()); $('tdphone').val($('#<%=lnkmemberphone.clientid%>').val()); $('tdemail').val($('#<%=lnkmemberemail.clientid%>').val()); }); $('#tdcancel').click(function () { $('div.popup_hider').fadeout("slow"); $('div.popup_box').fadeout("slow"); }); $('#tdsave').click(function () { $('div.popup_hider').fadeout("slow"); $('div.popup_box').fadeout("slow"); $('lnkmembernumber').val($('tdmember').val()); $('lnkmembername').val($('tdname').val()); $('lnkmemberphone').val($('tdphone').val()); $('lnkmemberemail').val($('tdemail').val()); }); }); </script> <style> div.popup_box { background-color: #888888; display: table; filter: alpha(opacity=100); border: 1px solid #999999; margin: auto; opacity: 1; position: fixed; z-index: 11; -moz-opacity: 1; } div.popup_hider { background-color: #004392; filter: alpha(opacity=55); height: 100%; left: 0px; opacity: .55; position: fixed; top: 0px; width: 100%; z-index: 10; -moz-opacity:.55; } </style> the controls referenced above defined in html below:
<body> <form id="form1" runat="server"> <div> <div class="popup_hider"></div> <div class="popup_box"> <table> <tr> <td>member:<br /><input type="text" id="tdmember" /></td> <td>name<br /><input type="text" id="tdname" /></td> </tr> <tr> <td>phone:<br /><input type="tel" id="tdphone" /></td> <td>email:<br /><input type="email" id="tdemail" /></td> </tr> <tr> <td><a id="tdsave">save</a></td> <td><a id="tdcancel">cancel</a></td> </tr> </table> </div> <asp:listview id="listview1" runat="server"> <layouttemplate> <table border="1"> <tr> <th><asp:linkbutton runat="server" id="lnkmembernumber">member</asp:linkbutton></th> <th><asp:linkbutton runat="server" id="lnkmembername">name</asp:linkbutton></th> <th><asp:linkbutton runat="server" id="lnkmemberphone">phone</asp:linkbutton></th> <th><asp:linkbutton runat="server" id="lnkmemberemail">email</asp:linkbutton></th> </tr> <tr id="itemplaceholder" runat="server" class="listview"></tr> </table> </layouttemplate> <itemtemplate> <tr> <td><asp:label runat="server" clientidmode="static" id="lblmembernumber"><%#eval("linknumber") %></asp:label></td> <td><asp:label runat="server" clientidmode="static" id="lblmembername"><%#eval("name") %></asp:label></td> <td><asp:label runat="server" clientidmode="static" id="lblmemberphone"><%#eval("phone") %></asp:label></td> <td><asp:label runat="server" clientidmode="static" id="lblmemberemail"><%#eval("email") %></asp:label></td> </tr> </itemtemplate> </asp:listview> </div> </form> </body> that how every page see shows how access asp.net controls jquery; however, asp.net controls referenced in head section part of itemtemplate, not visible inside html:
$('tdmember').val($('#<%=lnkmembernumber.clientid%>').val()); $('tdname').val($('#<%=lnkmembername.clientid%>').val()); $('tdphone').val($('#<%=lnkmemberphone.clientid%>').val()); $('tdemail').val($('#<%=lblemail.clientid%>').val()); if put visual studio 2015 project, see red squiggly lines read:
the name 'xxx' not exist in current context
you compilation error same message if try running it.
so, how can read (and write) values listview itemtemplate control html using jquery?
to make simple, populated static data in page_load event:
private list<member> _roster; protected void page_load(object sender, eventargs e) { if (!ispostback) { if (_roster == null) { _roster = new list<member>(); _roster.add(new member() { name = "john doe", number = "abc123", email = "jdoe@email.com", phone = "5551234" }); _roster.add(new member() { name = "jane doe", number = "abc124", email = "janed@email.com", phone = "5551111" }); _roster.add(new member() { name = "jenny", number = "abc1233", email = "jenny@hotmail.com", phone = "8675309" }); } listview1.datasource = _roster; listview1.databind(); } } solved!
https://jsfiddle.net/jp2code/z7tpuagf/
this should working example below. not have asp.net in it, visual studio compile asp.net controls down to.
var rownumber; $(document).ready(function () { $('div.popup_hider').hide(); $('div.popup_box').hide(); $('[id^=listrow_]').click(function () { //loop al span elements in td , fill textboxes $(this).find('td span').each(function (index, value) { if (index == 0) { $("#tdmember").val($(value).text()); } else if (index == 1) { $("#tdname").val($(value).text()); } else if (index == 2) { $("#tdphone").val($(value).text()); } else if (index == 3) { $("#tdemail").val($(value).text()); } }); // row number hardcode elements rownumber = this.id.split("_")[1]; }); //on click hide message , //on click show hider div , message $('.showpopup').click(function () { $('div.popup_hider').fadein("slow"); $('div.popup_box').fadein("slow"); }); $('#tdcancel').click(function () { $('div.popup_hider').fadeout("slow"); $('div.popup_box').fadeout("slow"); }); $('#tdsave').click(function () { $('div.popup_hider').fadeout("slow"); $('div.popup_box').fadeout("slow"); //and reverse, find row id listrow_ + rownumber , update values in cell $('#listrow_' + rownumber).find('td span').each(function (index, value) { if (index == 0) { $(value).text($("#tdmember").val()); } else if (index == 1) { $(value).text($("#tdname").val()); } else if (index == 2) { $(value).text($("#tdphone").val()); } else if (index == 3) { $(value).text($("#tdemail").val()); } }); }); });a.fake-link { text-decoration: underline; cursor: pointer; } div.popup_box { background-color: #888888; display: table; filter: alpha(opacity=100); border: 1px solid #999999; margin: auto; opacity: 1; position: fixed; z-index: 11; -moz-opacity: 1; } div.popup_hider { background-color: #004392; filter: alpha(opacity=55); height: 100%; left: 0px; opacity: .55; position: fixed; top: 0px; width: 100%; z-index: 10; -moz-opacity:.55; }<div> <div class="popup_hider" style="display: none;"></div> <div class="popup_box" style="display: none;"> <table> <tbody><tr> <td>member:<br><input type="text" id="tdmember"></td> <td>name<br><input type="text" id="tdname"></td> </tr> <tr> <td>phone:<br><input type="tel" id="tdphone"></td> <td>email:<br><input type="email" id="tdemail"></td> </tr> <tr> <td><a id="tdsave" class="fake-link">save</a></td> <td><a id="tdcancel" class="fake-link">cancel</a></td> </tr> </tbody></table> </div> <table border="1"> <tbody><tr> <th><a id="listview1_lnkmembernumber" href="javascript:__dopostback('listview1$lnkmembernumber','')">member</a></th> <th><a id="listview1_lnkmembername" href="javascript:__dopostback('listview1$lnkmembername','')">name</a></th> <th><a id="listview1_lnkmemberphone" href="javascript:__dopostback('listview1$lnkmemberphone','')">phone</a></th> <th><a id="listview1_lnkmemberemail" href="javascript:__dopostback('listview1$lnkmemberemail','')">email</a></th> </tr> <tr id="listrow_0" class="listrow"> <td><a class="fake-link"><span id="listview1_lblmembernumber_0" class="showpopup">abc123</span></a></td> <td><span id="listview1_lblmembername_0">john doe</span></td> <td><span id="listview1_lblmemberphone_0">5551234</span></td> <td><span id="listview1_lblmemberemail_0">jdoe@email.com</span></td> </tr> <tr id="listrow_1" class="listrow"> <td><a class="fake-link"><span id="listview1_lblmembernumber_1" class="showpopup">abc124</span></a></td> <td><span id="listview1_lblmembername_1">jane doe</span></td> <td><span id="listview1_lblmemberphone_1">5551111</span></td> <td><span id="listview1_lblmemberemail_1">janed@email.com</span></td> </tr> <tr id="listrow_2" class="listrow"> <td><a class="fake-link"><span id="listview1_lblmembernumber_2" class="showpopup">abc321</span></a></td> <td><span id="listview1_lblmembername_2">jenny</span></td> <td><span id="listview1_lblmemberphone_2">8675309</span></td> <td><span id="listview1_lblmemberemail_2">jenny@hotmail.com</span></td> </tr> </tbody></table> </div>
here example. add unique class name , id <tr> using row index listview.
<tr id="listrow_<%# container.dataitemindex %>" class="listrow"> then jquery can bind onclick event row , loop <span> elements in table cells.
<script type="text/javascript"> $(document).ready(function () { $('.listrow').click(function () { //loop al span elements in td $(this).find('td span').each(function (index, value) { alert($(value).text()); }); //or use row number stuff , hardcode elements var rownumber = this.id.split("_")[1]; var lbl1 = "maincontentpane_listview1_lblmemberemail_" + rownumber; alert($("#" + lbl1).text()); }); }); </script> the problem using clientidmode="static". listview (and other controls loop data generate content) create unique id per row , control within row. looks this: maincontentpane_listview1_lblmembername_1.
that why getting errors when using <%=lnkmembernumber.clientid%>. not exist outside of listview , not accessible, static clientid.
also enabling clientidmode="static" in repeater element result in multiple id's same , not want.
update
<script type="text/javascript"> //set rownumber global variable var rownumber; $(document).ready(function () { $('.listrow').click(function () { //loop al span elements in td , fill textboxes $(this).find('td span').each(function (index, value) { if (index == 0) { $("#tdmember").val($(value).text()); } else if (index == 1) { $("#tdname").val($(value).text()); } else if (index == 2) { $("#tdphone").val($(value).text()); } else if (index == 3) { $("#tdemail").val($(value).text()); } }); //or use row number stuff , hardcode elements, we'll use rownumber later rownumber = this.id.split("_")[1]; var lbl1 = "maincontentpane_listview1_lblmemberemail_" + rownumber; var lbl1text = $("#" + lbl1).text(); }); $('#tdsave').click(function () { $('div.popup_hider').fadeout("slow"); $('div.popup_box').fadeout("slow"); //and reverse, find row id listrow_ + rownumber , update values in cell $('#listrow_' + rownumber).find('td span').each(function (index, value) { if (index == 0) { $(value).text($("#tdmember").val()); } else if (index == 1) { $(value).text($("#tdname").val()); } else if (index == 2) { $(value).text($("#tdphone").val()); } else if (index == 3) { $(value).text($("#tdemail").val()); } }); }); }); </script> 
Comments
Post a Comment