locked
jqueryui selectmenu load data from database? RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    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

  • Question
    Sign in to vote
    0
    Sign in to vote
    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

  • Question
    Sign in to vote
    0
    Sign in to vote
    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
  • Question
    Sign in to vote
    0
    Sign in to vote
    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
  • Question
    Sign in to vote
    0
    Sign in to vote
    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