基于ASP.NET的jQuery用户界面

我目前正在学习jQuery，但我有一个主要的概念没有掌握

因为我使用ASP.NET处理web应用程序，所以我必须继续这样做，现在我想在web应用程序中实现jQueryUI，我面临一个问题

如何使用ASP.NET代码实现jQuery UI

例如，我目前正在研究（）。这似乎是一个非常有用的jQuery插件。通常，如果我想在ASP.NET中实现多重选择，我会使用列表，当表单发回时，使用codebehind从ASP.NET服务器控件获取所选项目的列表

---

但是，对于jQuery UI，如何从ASP.NET codebehinds访问jQuery控件并从自定义UI获取所选项目的列表？

您必须为html元素指定

名称。因此，当您提交表单时，您可以通过调用
Request[“yourHtmlElementName”]
来访问html元素值

您不必使用ASP.Net内置组件。它只会引起头痛。选择本机html元素

事实上，停止使用ASP.NET。移动到ASP.NET MVC。这是微软的一个巨大错误。回发、服务器端事件不是本质上的web编程方法。操作html可以通过ajax调用完成

我承认设置
myTextBox.Visible=false比发送ajax请求和解析响应json更容易

由于您的评论，我更新了我的建议。例如，可以通过使用html模板库来实现。对于应用程序端来说，ASP.NET绝对不是一个好选择。签出或客户端MV*框架，例如
您必须为html元素指定
名称。因此，当您提交表单时，您可以通过调用
Request[“yourHtmlElementName”]
来访问html元素值

您不必使用ASP.Net内置组件。它只会引起头痛。选择本机html元素

事实上，停止使用ASP.NET。移动到ASP.NET MVC。这是微软的一个巨大错误。回发、服务器端事件不是本质上的web编程方法。操作html可以通过ajax调用完成

我承认设置
myTextBox.Visible=false比发送ajax请求和解析响应json更容易

由于您的评论，我更新了我的建议。例如，可以通过使用html模板库来实现。对于应用程序端来说，ASP.NET绝对不是一个好选择。签出或客户端MV*框架，如
您将无法从.NET代码访问jQuery控件。您要做的是从.NET代码生成正确的HTML结构。在这种情况下，它是一个有序列表：

<ol id="selectable">
  <li class="ui-widget-content">Item 1</li>
  <li class="ui-widget-content">Item 2</li>
  <li class="ui-widget-content">Item 3</li>
  <li class="ui-widget-content">Item 4</li>
  <li class="ui-widget-content">Item 5</li>
  <li class="ui-widget-content">Item 6</li>
  <li class="ui-widget-content">Item 7</li>
</ol>


第1项
第2项
第3项
第4项
第5项
第6项
第7项

除了设置ID之外，您还需要从.NET获得这些信息。然后从JavaScript文件中，通过与您的ID匹配的选择器附加插件

<script>
  $(function() {
    $( "#selectable" ).selectable();
  });
</script>


$（函数（）{
$（“#可选”）.selective（）；
});

如果您需要后端中所选项目的信息，则必须进行AJAX调用或执行类似更新隐藏字段和回发之类的操作。
您无法从.NET代码访问jQuery控件。您要做的是从.NET代码生成正确的HTML结构。在这种情况下，它是一个有序列表：

<ol id="selectable">
  <li class="ui-widget-content">Item 1</li>
  <li class="ui-widget-content">Item 2</li>
  <li class="ui-widget-content">Item 3</li>
  <li class="ui-widget-content">Item 4</li>
  <li class="ui-widget-content">Item 5</li>
  <li class="ui-widget-content">Item 6</li>
  <li class="ui-widget-content">Item 7</li>
</ol>


第1项
第2项
第3项
第4项
第5项
第6项
第7项

除了设置ID之外，您还需要从.NET获得这些信息。然后从JavaScript文件中，通过与您的ID匹配的选择器附加插件

<script>
  $(function() {
    $( "#selectable" ).selectable();
  });
</script>


$（函数（）{
$（“#可选”）.selective（）；
});

如果您需要后端中所选项目的信息，则必须进行AJAX调用或执行类似更新隐藏字段和回发之类的操作。
有几种方法可以处理它

您需要使用
而不是列表框

运行页面时，您会注意到，根据BulletStyle的选择，BulletList会以
或
的形式呈现为html，而列表框则呈现为

另外，为了让您的生活更轻松，在任何希望使用jQuery/jQueryUI操作的asp控件上，将其ClientIDMode属性设置为Static

而且，与ListBox一样，BulletedList也是一个数据绑定控件，因此您可以填充列表服务器端，并使用jQueryUI客户端转换其外观

例如：

<asp:BulletedList ID="BulletedList1" runat="server" ClientIDMode="Static" BulletStyle="Numbered">
    <asp:ListItem Text="X" Value="X"></asp:ListItem>
    <asp:ListItem Text="Y" Value="Y"></asp:ListItem>
</asp:BulletedList>

有几种方法可以解决这个问题

您需要使用
而不是列表框

运行页面时，您会注意到，根据BulletStyle的选择，BulletList会以
或
的形式呈现为html，而列表框则呈现为

另外，为了让您的生活更轻松，在任何希望使用jQuery/jQueryUI操作的asp控件上，将其ClientIDMode属性设置为Static

而且，与ListBox一样，BulletedList也是一个数据绑定控件，因此您可以填充列表服务器端，并使用jQueryUI客户端转换其外观

例如：

<asp:BulletedList ID="BulletedList1" runat="server" ClientIDMode="Static" BulletStyle="Numbered">
    <asp:ListItem Text="X" Value="X"></asp:ListItem>
    <asp:ListItem Text="Y" Value="Y"></asp:ListItem>
</asp:BulletedList>

除了其他响应之外，如果您使用该对话框，请确保使用appendTo:“form”选项

否则，对话框内的回发将无法正常工作。而且它会引起很多麻烦。
除了其他响应之外，如果您使用该对话框，请确保使用appendTo:“form”选项

否则，对话框内的回发将无法正常工作。及
$( ".mypanel" ).dialog({ appendTo: "form" });

<ol id="selectable">
   <asp:Repeater ID="rptSelectOptions" runat="server">
       <ItemTemplate>
           <li class="ui-widget-content"><%#Eval("Name")%></li>
       </ItemTemplate>
   </asp:Repeater>
<ol>
<asp:HiddenField ID="hdnSelectedValues" runat="server"  />

$(function() {
   $( "#selectable" ).selectable({
      stop: function() {
         var res = "";
         $( ".ui-selected", this ).each(function() {
           var index = $( "#selectable li" ).index( this );
           res += " #" + ( index + 1 );
         });
         $('[id$=hdnSelectedValues]').val(res);
       }
    });
});