jQuery用户界面与ASP.NET

Question

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

因为我在使用ASP.NET的Web应用程序上工作，所以我将不得不继续这么做，现在我想将jQuery UI实现到我的Web应用程序中，但我面临一个问题。

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

例如，我正在查看（http://jqueryui.com/selectable/）。这似乎是一个非常有用的jQuery插件。通常，如果我想在ASP.NET中实现多选，我将使用LIST，并且在表单被回发时，使用代码隐藏从ASP.NET服务器控件获取选定项的列表。

但是，在jQuery UI中，我将如何从ASP.NET代码隐藏中访问jQuery控件，并从自定义UI中获取所选项目的列表？

Answer 1

有几种方法来处理它。

你可能会需要使用<asp:BulletedList>，而不是一个列表框的

当您运行的页面，你会发现BulletList呈现到HTML作为一个<ul>或<ol>取决于BulletStyle选择，而列表框呈现到<select>

此外，让您的生活更轻松，在任何想要让jQuery/jQueryUI采取行动的asp控件上，将它的ClientIDMode属性设置为Static。

而且，像列表框，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> 

渲染到：

<ol id="BulletedList1" style="list-style-type:decimal;"> 
    <li>X</li> 
    <li>Y</li> 
</ol> 

你现在可以看到你将如何应用JQuery UI的可选

不幸的是，通过回发来传回客户端数据并不那么简单。我认为寻找jqueryui的ui选择的财产会很简单，但它有点牵涉其中。

回发到服务器端jQueryUI的选择数据的示例：

它需要加入HiddenField来保存所选择的项目的索引为CSV。

<asp:HiddenField ID="HiddenField1" runat="server" /> 

还有一些额外的jQuery代码，利用jQueryUI的可选停止事件。这是用来通过选定项的子列表中重复，以构建可解析，并通过循环索引，服务器端，要检索的项目符号列表数据的CSV：

$("#BulletedList1").selectable({ 
    stop: function() { 
       //Save some Reference variables 
       var $SetOfSelected = $("li.ui-selected", this); 
       var $hf   = $("#HiddenField1"); 
       var count   = $SetOfSelected.length; 

       // iterate through the list of selected items and build the csv 
       $SetOfSelected.each(function (idx) { 
        var i = $("#BulletedList1 li").index(this) 
        $hf.val((idx == 0) ? i : $hf.val() + ',' + i); 
       }); 

       if (count == 0) 
        $hf.val(""); 
    } 
}); 

Answer 2

你必须给name html元素。因此，当您提交表单时，您可以通过调用Request["yourHtmlElementName"]来访问html元素值。

您不必使用ASP.Net内置组件。它只会导致头痛。去原生html元素

实际上停止使用ASP.NET。移到ASP.NET MVC。这是微软的巨大错误。回传，服务器端事件不是自然web编程方法。操作你的html可以通过ajax调用完成。

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

因此，我更新我的建议，由于您的意见。这可以通过使用html模板库来完成，例如Handlebars。对于应用程序端ASP.NET来说绝对是不错的选择。检查出ASP.NET MVC或客户端MV *框架，如Ember.js

Answer 3

您不打算从.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> 

除了设置ID，这就是所有你需要从.NET。然后从您的JavaScript文件中，通过与您的ID相匹配的选择器附加插件。

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

如果你需要从后端所选项目的信息，你将不得不作出一个AJAX调用或做类似更新的隐藏字段和后回来。

Answer 4

除了其他响应，如果您曾经使用过对话框，请使用appendTo：“form”选项使确定。

$(".mypanel").dialog({ appendTo: "form" }); 

否则，从对话框内回传将无法正常工作。它会引起许多头痛。

Answer 5

要生成HTML标记，可以使用中继器从代码隐藏中生成<li>项。然后为了处理回发选定的值，您可以包含一些JavaScript来更新控件的值<asp:HiddenField />。

ASPX/ASCX标记：

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

的JavaScript：

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

这里的客户端部分的例子：http://jsfiddle.net/hK7uT/