how to bind data to select2 jquery from database in mvc

Question

View:

<select multiple="" id="e2" tabindex="-1" class="select2-hidden-accessible" name="e2" aria-hidden="true">
    <option value="PDS.RICE">PDS.RICE</option>
    <option value="PDS.WHEAT">PDS.WHEAT</option>
    <option value="PDS.DAL CHANNA">PDS.DAL CHANNA</option>
    <option value="PDS.DAL KALA CHANNA">PDS.DAL KALA CHANNA</option>
</select>

Controller:

public ActionResult Getitems()
{
    var items = (from m in db.ItemMasters select m).ToList();
    ViewBag.items = items;
    return View();
}

Model:

public class ItemMaster
{
    [Key]
    public int ItemId { get; set; }
    public string Item_Name { get; set; }
}

I am trying to fetch the data from database in the controller, but unable to bind the ViewBag data to the select2-hidden-accessible in view.

What have you tried? And why are you not using @Html.DropDownListFor() and strongly bind to a model? — user3559349
– user3559349, Commented Dec 16, 2015 at 6:54
i have tried @Html.DropDownListFor(), but did not get the solution. — Vikas Sharma
– Vikas Sharma, Commented Dec 16, 2015 at 7:26

Aliasgar Rajpiplawala · Accepted Answer · 2015-12-17 07:47:57Z

1

You can bind dropdownlist by using ViewBag, below is the code :

Controller :

public ActionResult Getitems()
        {
            var itemList = new List<SelectListItem>
            {
                new SelectListItem
                {
                    Text = "RICE",
                Value = "RICE"
                },
                 new SelectListItem
                {
                    Text = "WHEAT",
                Value = "WHEAT"
                }
            };



            ViewBag.ItemList = new SelectList(itemList, "Value", "Text");
            return View();
        }

View :

Add below scripts in your head tag.

<head>
    <script src="~/Scripts/jquery-1.8.2.js"></script>
    <script src="~/Scripts/select2.js"></script>
    <link href="~/Content/select2.css" rel="stylesheet" />
</head>

 @Html.DropDownList("e2", (SelectList) ViewBag.ItemList, new {@class = "js-example-basic-multiple",multiple="multiple" })

Initialize the select2 plugin.

<script>
        $(".js-example-basic-multiple").select2();
</script>

edited Dec 17, 2015 at 7:47

answered Dec 16, 2015 at 7:53

Aliasgar Rajpiplawala

6568 silver badges26 bronze badges

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

7 Comments

Aliasgar Rajpiplawala Over a year ago

It's a tried and tested code. What exactly you did with the above code?

Aliasgar Rajpiplawala Over a year ago

I have edited my answer please check now and mark as answer if your issue is resolved.

Arijit Mukherjee Over a year ago

hi i tried your code but not working for me any work around?

Aliasgar Rajpiplawala Over a year ago

What is the issue that you are facing?

Arijit Mukherjee Over a year ago

View:

@Html.DropDownList("e2", (SelectList)ViewBag.ItemList, new { @class = "select2-hidden-accessible" }) <script src="~/assets/js/jquery-2.0.3.min.js"></script> <script src="~/assets/js/select2/select2.js"></script> <script>     $("#e2").select2({         placeholder: "Select Commodity",         allowClear: true     }); </script>

|

Collectives™ on Stack Overflow

how to bind data to select2 jquery from database in mvc

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related