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/