0

I'm currently learning jQuery but I have a major concept that I fail to grasp.

Because I work on web applications using ASP.NET I will have to continue doing so, now that I want to implement jQuery UIs into my web application, I am facing a problem.

How do I implement jQuery UI with ASP.NET codes?

For example, I'm currently looking at (http://jqueryui.com/selectable/). This seems to be a very useful plugin for jQuery. Normally, if I want to implement multi-selection in ASP.NET, I would use a LIST and when the form is postback-ed, use the codebehind to get the list of selected items from the asp.net server control.

However, with jQuery UI, how am I going to access the jQuery controls from ASP.NET codebehinds and get the list of selected items from the custom UI?

Improve this question

5 Answers 5

Reset to default
2

You have to give name to html elements. Thus when you submit form you can access you html element value by calling Request["yourHtmlElementName"].

You don't have to use ASP.Net built-in components. It only causes headaches. Go for native html elements

In fact stop using ASP.NET. Move to ASP.NET MVC. It is huge mistake by Microsoft. Postback, server side events are not nature web programming methodologies. Manipulating your html could be done by ajax calls.

I admit that setting myTextBox.Visible = false; is easier then sending ajax request and parsing response json.

So I update my suggestion due to your comment. It could be done by using html template libraries for example Handlebars. For an application side ASP.NET is definitely bad choice. Check out ASP.NET MVC or client side MV* frameworks such as Ember.js

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

+1 for not using ASP.NET built-in components. Their stateful nature may be problematic. Use only JQuery/javascript to manipulate the UI.
The reason I like and use ASP.NET controls is because I can easily manipulate their states from codebehinds, example, if checkbox-A is checked and auto-postbacked, textbox-B can be set to Visible=false and textbox-A can be enabled and etc. If I use native HTML controls, how do I easily get the values entered from the codebehind for processing?
I think it's okay to use ASP.NET built-in components, as long as you use the ones that are less abstracted. For example, asp:Table and asp:Repeater are okay, but GridView is tough to use.
I guess my only choice to build an "interactive and modern" web application is to abandon what I have learnt in the past and go on to learn the younger MVC.
1

There are a few ways to handle it.

You would need to use the <asp:BulletedList> instead of a ListBox

When you run the page you'll notice the BulletList renders to html as a <ul> or <ol> depending on the BulletStyle selection whereas the ListBox renders to <select>

Also, make your life easier, on any asp control you wish to have jQuery/jQueryUI act, set it's ClientIDMode property to Static.

And, like ListBox, BulletedList is also a databound control so you would fill the list server side and transform its appearance using jQueryUI clientside

Example: 

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

Renders to:

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

Which you can now see how you would apply Jquery UI's Selectable

Unfortunately it's not as simple to pass back client side data via postback. I thought it would be a simple matter of looking for jqueryui's ui-selected property, but it's a little more involved.

Example of jQueryUI selection data posted back to server-side:

It requires the addition of a HiddenField to hold the selected item indexes as a csv.

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

And some additional jQuery code that makes use of jQueryUI's selectable stop event. This is used to iterate through a sub-list of selected items to build a CSV of indexes that can be parsed and looped through, server side, to retrieve data from the bulleted list:

$("#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("");
    }
});
Improve this answer

6 Comments

This does not answer my question, even though I would successfully render the control as an official ASP.NET control, I still wouldn't be able to get the "selected items" in the jQuery selectable UI.
what do you mean by 'get' the selected items, do you mean pass the selected item back to the server?
Yes. Say, I select X & Y and click on "Submit Form", how will the "btnSubmit_Click" code know which items are selected?
you have to loop through the list and pick the items with class ui-selected set
If you are using a modern browser, use the developer features to see what's happening to the underlying DOM as you make selections. Typically the F12 key
|
1

In addition to the other responses, if you ever use the Dialog, make sure that you use the appendTo: "form" option.

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

Otherwise postbacks from within the Dialog won't work properly. And it will cause many headaches.

Improve this answer

Comments

0

You're not going to access the jQuery controls from your .NET code. What you'll do is generate the correct HTML structure from your .NET code. In this case it's an ordered list:

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

Aside from setting the ID, that's all you need from .NET. Then from your JavaScript file, attach the plugin through a selector that matches your ID.

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

If you need the information from the selected item in the backend, you will have to make an AJAX call or do something like update a hidden field and post back.

Improve this answer

Comments

0

To generate the HTML markup, you could use a repeater to generate the <li> items from your code-behind. Then to handle posting back the selected value(s) you could include some JavaScript to update the value of an <asp:HiddenField /> control.

ASPX/ASCX markup:

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

Here's an example of the client-side part: http://jsfiddle.net/hK7uT/

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.