Question

我一直在努力解决这个问题，所以我整理了一个精简版，以显示我遇到的问题。

从如下所示的成员类这样的通用类开始：

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

}

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

ASIDE：
是否有适用于ASP.NET的JSFiddle工具？我不能让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>

这就是我看到的每个页面如何显示如何使用jQuery访问ASP.NET控件;但是，head部分中引用的ASP.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项目中，您将看到Red Squiggly行：

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

如果您尝试运行它，则会收到相同消息的编译错误。

那么，如何使用jQuery从ListView ItemTemplate控件读取（并最终写入）值到HTML？

为简单起见，我在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.NET，但它是Visual Studio将ASP.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>

Answer 1

这是一个例子。使用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>

如何使用jQuery读/写ListView ItemTemplate字段？

解决！

1 个答案: