Get JSON result list into existing HTML select?

Question

I have this:

@Html.DropDownList("centres", (List<SelectListItem>)ViewData["centres"])

And I need to update it with data entered into the database with SQL while the program is running, using JQuery:

jQuery(function ($) {
    jQuery("body").on('click', "#create", function () {
        $.getJSON("/Centres/updateList", function (results1) {
// perform update here using results1 from jsonresult updateList in Controller class
        });
    });
});

The results1 is a List from my MVC controller class. I'd like to be able to edit my existing html dropdownlist with these new results. Currently it displays a list of selectListItems, but in updateList in the controller class I am creating a new list, based on a new centre I have just created. My Controller class method looks like this:

public JsonResult updateList()
{
    List<SelectListItem> centres = new List<SelectListItem>();
    SqlConnection conn = new SqlConnection(@"Data Source=(LocalDB)\v11.0;AttachDbFilename=C:\Users\Michael\Documents\Visual Studio 2012\Projects\OneEightyWebApp\OneEightyWebApp\App_Data\OneHoldings.mdf;Integrated Security=True");
    SqlCommand cmd = new SqlCommand("SELECT Centre.Centre_Name, Count(Shop_No) AS Shop_Count FROM Centre LEFT JOIN Space ON Centre.Centre_Name = Space.Centre_Name GROUP BY Centre.Centre_Name;", conn);
    DataTable dt = new DataTable();
    SqlDataAdapter da = new SqlDataAdapter(cmd);
    conn.Open();
    da.Fill(dt);
    conn.Close();
    for (int i = 0; i < dt.Rows.Count; i++)
    {
        centres.Add(new SelectListItem { Text = dt.Rows[i].ItemArray.GetValue(0).ToString(), Value = dt.Rows[i].ItemArray.GetValue(1).ToString() });
    }
    return Json(centres, JsonRequestBehavior.AllowGet);
}

Any ideas?

It's a list. a list of centre names, created in updateList. I create more centres then need to update this <select> with the new centres. — barnacle.m
– barnacle.m, Commented Mar 27, 2013 at 22:34
Please improve your question, post the JSON response/outputted html and specify how the select element should be updated. — Ram
– Ram, Commented Mar 27, 2013 at 22:36

Nate · Accepted Answer · 2013-03-27 23:24:53Z

2

You can rebuild the drop-down list using jquery

$.getJSON("/Centres/updateList", function (results1) {
   //Clear out the old values
   $("#centres").empty();
   //Add the input items back in
   $.each(results1, function (key, val) {
      $("#centres").append($("<option></option>").attr("value", val.Value).text(val.Text));
   });
});

One of the advantages of using MVC is the html it produces is quite simple and can be easily reproduced with simple jQuery commands.

answered Mar 27, 2013 at 23:24

Nate

6614 silver badges7 bronze badges

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

Comments

Gerard · Accepted Answer · 2013-03-28 09:04:23Z

0

You can use the attr function repeatedly, so you can pre-set selections by

if(val.Selected) {
  $("#centres").append($("<option></option>")
      .text(val.Text)
      .attr("value", val.Value)
      .attr("selected", "selected"));
}

answered Mar 28, 2013 at 9:04

Gerard

2,7791 gold badge33 silver badges46 bronze badges

Collectives™ on Stack Overflow

Get JSON result list into existing HTML select?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related