如何将用户控件附加到 jQuery 中的列表

Question

我试图在每次单击按钮时向 <ul> 添加用户控件

这是我的

$(document).ready(function () {
$('#btnAddSupplement').click(function () {
        $('#supplementList').append(
                $('<li>').val(<uc1:OrderEntrySupplements runat="server" ID="OrderEntrySupplements" />)
            );
    });
});

<ul id="supplementList" style="list-style-type: none">
  <li>
    <uc1:OrderEntrySupplements runat="server" ID="OrderEntrySupplements" />
  </li>
</ul>
<button id="btnAddSupplement" type="button" class="btn btn-success">Add Supplement</button>

Answer 1

似乎无法添加 uc3，所以我更改了您的代码。试试这个。样式只是为了视觉效果所以你可以在这里看到。

$(document).ready(function () {
$('#btnAddSupplement').click(function () {
        $('#supplementList').append(
                '<li><uc1:OrderEntrySupplements runat="server" ID="OrderEntrySupplements" /></li>');
    });
});

#OrderEntrySupplements{
height: 10px;
  display:block;
  background-color :#f33;
  width: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="supplementList" style="list-style-type: none">
  <li>
    <uc1:OrderEntrySupplements runat="server" ID="OrderEntrySupplements" />
  </li>
</ul>
<button id="btnAddSupplement" type="button" class="btn btn-success">Add Supplement</button>

Answer 2

我想我的问题的答案会和这个一样

根本不可能。因为我这里的UserControl算是一个ASP.Net服务器端控件

Answer 3

确实不能附加用户控件，那是因为它没有直接呈现给 HTML。

例如，如果您有以下用户控件：

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="ucUserControl1.ascx.vb" Inherits="UserControls_ucUserControl1" %>

<h1>Im an User Control</h1>
<asp:Button ID="btnA" runat="server" Text="Im button A inside User Control"></asp:Button>

并将其包含在您的页面表单中，例如：

<form id="form1" runat="server">    
   <uc:uc1 id="userControl1" runat="server"/>       
</form>

它将呈现如下：

<h1>Im an User Control</h1>
<input type="submit" name="userControl1$btnA" value="Im button A inside User Control" id="userControl1_btnA" />

用户控件的包含很干净，DOM 中没有 userControl1，只有里面的输入，所以你不能通过 JQuery 选择器搜索它。

不要惊慌您仍然可以使用两种解决方法！

ClientIDMode

您可以使用属性用户控件来设置嵌套子控件 (ClientIDMode) 的 ID：

<uc:uc1 id="userControl1" runat="server" ClientIDMode="AutoID"/>

当您将用户控件的 ClientIDMode 设置为 AutoID 时，呈现的 HTML 如下所示：

<h1>Im an User Control</h1>
<input type="submit" name="userControl1$btnA" value="Im button A inside User Control" id="userControl1_btnA" />

所以输入的 ID 中有一个引用用户控件的字符串！现在，您终于可以在 JQuery:

中执行此操作了

$(document).ready(function () {
$('#btnAddSupplement').click(function () {
        var elementsInsideUserControl=$("[id^=userControl1_]"); //matches elements with id attribute starting with 'userControl1_'
        $('#supplementList').append(
                $('<li>').val(elementsInsideUserControl);
            );
    });
});

Panel/Div

您可以在用户控件中添加一个 Panel/Div 作为用户控件的父元素，如下所示：

<asp:Panel ID="userControlPanel" runat="server">
    <h1>Im an User Control</h1>
    <asp:Button ID="btnA" runat="server" Text="Im button A inside User Control"></asp:Button>
</asp:Panel>

Panel 控件呈现为 Div，因此呈现的 HTML 如下所示：

<div id="userControl1_userControlPanel">

    <h1>Im an User Control</h1>
    <input type="submit" name="btnA" value="Im button A inside User Control" id="btnA" />

</div>

最后，您可以在 JQuery 中搜索您想要的第一个位置：

$(document).ready(function () {
$('#btnAddSupplement').click(function () {
        $('#supplementList').append(
                $('<li>').val($("#userControlPanel"))//Check for rendered id of panel to search!
            );
    });
});

请记住，您无法通过这种方式从用户控件导入嵌入的 javascript 文件。

此致！

如何将用户控件附加到 jQuery 中的列表

How to append a user control to a list in jQuery

jquery

user-controls

webforms

ClientIDMode

Panel/Div