Question

我每次点击按钮时都试图将用户控件添加到<ul>

这是我所拥有的

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

确实，您无法附加用户控件，因为它不会直接呈现给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

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

<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作为用户控件的父元素，如下所示：

<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文件。

问候！

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

我认为我的问题的答案与此问题的答案相同

https://stackoverflow.com/a/6514849/2616000

根本不可能。因为我的UserControl在这里被认为是ASP.Net服务器端控件

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

3 个答案:

的ClientIDMode

面板/格