locked
jqueryui selectmenu load data from database? RRS feed

  • Question

  • User-1796506859 posted

    Hi Folks,

    I have an MVC application (VS2017) and on one of the mvc pages I have a jquery UI select menu.   The issue that I have is that I need to fetch data from the database when the selectmenu is created but the documentation seems to contain a few gaps.

    Does anyone know how this should be done correctly, a quick google returns very limited results on this control.  In the jquery UI autocomplete() function there is a Source: function that one can use to access the database.  So I am looking for something similar.

    $('#mycontrol').selectmenu({ 
    
      // When the control is created, fetch some data, format into label/value pairs, 
      // add to select, choose first item.
      create: function(evt,ui) {
    
          $.ajax({
             // get data....
             success: function(data) {
                 //put data into selectmenu and select first item.
           }
      });
    
    }});
    Monday, December 4, 2017 11:18 PM

Answers

  • User-1796506859 posted

    Hi folks,

    I just thought I would provide an update on my solution for this.  I tried two techniques.

    The first technique was to read the data from a database into a List<ListDataItem> array   (ListDataItem is just Id/Description), then return this in the Model when the view is created.

    @Html.DropDownList("MyList", (SelectList)new SelectList(Model.MyListItems.OrderBy(o => o.Value), "key", "value"), htmlAttributes: new { @class = "form-control" })

    The second approach was to write a jquery load method for the control, this did an ajax postback to a controller method which returned the above list as json. In the success method I then do a $each to load the select with data.  In this example I am styling the select list using the chosen jquery plugin.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 26, 2018 12:11 AM

All replies

  • User-474980206 posted
    You just update the <select> the selectmenu is attached to and use the Selectmenu refresh method.
    Tuesday, December 5, 2017 1:22 AM
  • User61956409 posted

    Hi AndyW2009,

    The issue that I have is that I need to fetch data from the database when the selectmenu is created but the documentation seems to contain a few gaps.

    If you’d like to dynamically generate options for your <select> element and attach jQuery ui selectmenu to it, you can refer to the following sample code.

    View:

    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Test</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <link rel="stylesheet" href="/resources/demos/style.css">
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script>
            $(function () {
                $.getJSON("/Home/optionslist", "", function (item) {
    
                    $.each(item, function (index, data) {
                        //alert(data.text + ";" + data.val);
                        $("#mycontrol").append("<option value='" + data.val + "'>" + data.text + "</option>");
                    });
    
                    $("#mycontrol").selectmenu();
                   
                });
            })
        </script>
    </head>
    <body>
        <div> 
            <select id="mycontrol">
                
            </select>
        </div>
    </body>
    </html>
    

    Controller:

    public JsonResult optionslist()
    {
        var options = new List<soption>();
        options.Add(new soption() { text = "option1", val = "opt1" });
        options.Add(new soption() { text = "option2", val = "opt2" });
        options.Add(new soption() { text = "option3", val = "opt3" });
        //my options is for test
    
        //in your controller, you can fetch data from your database 
    
        return Json(options, JsonRequestBehavior.AllowGet);
    }
    
    public class soption
    {
        public string text { get; set; }
        public string val { get; set; }
    }
    

    Test result:

    With Regards,

    Fei Han

    Tuesday, December 5, 2017 2:31 AM
  • User-1796506859 posted

    Hi folks,

    I just thought I would provide an update on my solution for this.  I tried two techniques.

    The first technique was to read the data from a database into a List<ListDataItem> array   (ListDataItem is just Id/Description), then return this in the Model when the view is created.

    @Html.DropDownList("MyList", (SelectList)new SelectList(Model.MyListItems.OrderBy(o => o.Value), "key", "value"), htmlAttributes: new { @class = "form-control" })

    The second approach was to write a jquery load method for the control, this did an ajax postback to a controller method which returned the above list as json. In the success method I then do a $each to load the select with data.  In this example I am styling the select list using the chosen jquery plugin.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 26, 2018 12:11 AM