我如何读/写listviewitemtemplate字段使用jQuery

本文关键字：字段 jQuery listviewitemtemplate 何读 | 更新日期: 2023-09-27 18:06:09

我一直在努力解决这个问题，所以我把一个简化的版本放在一起，以显示我遇到的问题。

从一个泛型类开始，如成员类，如下所示:

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
    {
        get
        {
            var result = String.Empty;
            if (!String.IsNullOrEmpty(Number))
            {
                result = String.Format("<a class='"showpopup'" id='"{0}'">{0}</a>", Number);
            }
            return result;
        }
    }
}

我想在ASP中显示它。. NET Framework 4.6 WebForm使用ListView控件

除了

:
是否有一个JSFiddle工具可以与ASP.NET一起工作?我找不到ASP。. NET在那里渲染，所以我把HTML放在这里，分成几部分。

在文档的HEAD中，我有一些简单的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 the message and the
        //on click show the hider div and the 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>

上面引用的控件在下面的HTML中定义:

<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>

这就是我看到的每个页面如何访问ASP。. NET控件使用jQuery;然而，ASP。在header部分引用的。NET控件是ItemTemplate的一部分，所以实际上在HTML中是不可见的:

$('tdMember').val($('#<%=lnkMemberNumber.ClientID%>').val());
$('tdName').val($('#<%=lnkMemberName.ClientID%>').val());
$('tdPhone').val($('#<%=lnkMemberPhone.ClientID%>').val());
$('tdEmail').val($('#<%=lblEmail.ClientID%>').val());

如果你把它放到Visual Studio 2015项目中，你会看到红色的弯弯曲曲的线条，上面写着:

名称"xxx"在当前上下文中不存在

你得到一个编译错误与相同的消息，如果你试着运行它。

所以，我怎么能读(并最终写)值从listviewitemtemplate控件到HTML使用jQuery?

为了简单起见，我在Page_Load事件中填充了静态数据:

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();
    }
}

解决!

https://jsfiddle.net/jp2code/z7tpuagf/

这应该是下面的一个工作示例。它没有任何ASP。但是它是Visual Studio将要编译的asp.net。. NET控件下到。

var rowNumber;
$(document).ready(function () {
    $('div.popup_hider').hide();
    $('div.popup_box').hide();
    $('[id^=listRow_]').click(function () {
        //loop al span elements in the td and fill the 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());
            }
        });
        // get row number to hardcode the elements
        rowNumber = this.id.split("_")[1];
    });
    //on click hide the message and the
    //on click show the hider div and the 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 now we do the reverse, find the row ID with listRow_ + rowNumber and update the values in the 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>

我如何读/写listviewitemtemplate字段使用jQuery

下面是一个例子。通过使用ListView中的行索引，为<tr>添加唯一的类名和ID。

<tr id="listRow_<%# Container.DataItemIndex %>" class="listRow">

然后jQuery可以将onclick事件绑定到行并循环表单元格中的<span>元素。

<script type="text/javascript">
    $(document).ready(function () {
        $('.listRow').click(function () {
            //loop al span elements in the td
            $(this).find('td span').each(function (index, value) {
                alert($(value).text());
            });
            //or use the row number to do stuff and hardcode the elements
            var rowNumber = this.id.split("_")[1];
            var lbl1 = "mainContentPane_listView1_lblMemberEmail_" + rowNumber;
            alert($("#" + lbl1).text());
        });
    });
</script>

问题是你正在使用ClientIDMode="Static"。通常，ListView(以及所有其他循环数据以生成内容的控件)将为每行和行内的控件创建一个唯一的id。它看起来像这样:mainContentPane_listView1_lblMemberName_1 .

这就是为什么你得到错误时使用<%=lnkMemberNumber.ClientID%>。它不存在于ListView之外，因此即使使用静态ClientID也无法访问。

在中继器元素中启用ClientIDMode="Static"也会导致多个ID完全相同，这不是你想要的。

<script type="text/javascript">
    //set the rowNumber as global variable
    var rowNumber;
    $(document).ready(function () {
        $('.listRow').click(function () {
            //loop al span elements in the td and fill the 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 the row number to do stuff and hardcode the elements, but we'll use the 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 now we do the reverse, find the row ID with listRow_ + rowNumber and update the values in the 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>