How to import data from DB and show it in Select

Question

User-1404740798 posted

There is 10 data in the table called my item.

I want to fetch these 10 data and select it in select.

How do I implement it? (mvc)

<div class="m-b-2">
                                        <div class="col-12">
                                            <select class="form-control" id="area">
                                                <option value="">1</option>
                                                <option value="">2</option>
                                                <option value="">3</option>
                                                <option value="">4</option>
                                                <option value="">5</option>
                                            </select>
                                        </div>
                                    </div>

Answer 1

User475983607 posted

slkim

There is 10 data in the table called my item.

I want to fetch these 10 data and select it in select.

How do I implement it? (mvc)

<div class="m-b-2">
                                        <div class="col-12">
                                            <select class="form-control" id="area">
                                                <option value="">1</option>
                                                <option value="">2</option>
                                                <option value="">3</option>
                                                <option value="">4</option>
                                                <option value="">5</option>
                                            </select>
                                        </div>
                                    </div>

These are fundamental concepts covered thoroughly  in the Getting Started with MVC tutorials.   Please go through the tutorials before going forward.

https://docs.microsoft.com/en-us/aspnet/mvc/overview/getting-started/getting-started-with-ef-using-mvc/

Answer 2

User-1404740798 posted

I would like to select asynchronous ajax to show the data of the table in my database in select.

What value should I put in the data and load it from the controller?

$('#area').click(function(){
            $.ajax({
                type: "post",
                url: "Leader/Index"
                data: {
                        
                    },
                    dataType: "json",
                    error: function () {
                        alert("error");
                    },
                    success: function (data) {
                        alert(data.message);
                        $('#school').attr("disabled", "true");
                    }
            });
        });

Answer 3

User1520731567 posted

Hi slkim,

According to your code,I modify and make a demo,you could refer to it:

View:

@{
    ViewBag.Title = "Index";
}

<h2>Sequentialfail</h2>

<div class="m-b-2">
    <div class="col-12">
        <select class="form-control" id="area">
            <option value="">1</option>
            <option value="">2</option>
            <option value="">3</option>
            <option value="">4</option>
            <option value="">5</option>
        </select>
    </div>
</div>

@section scripts{
    <script>
        $(function () {
            //$('#area').click(function () {  //I suggest you could fetch data in Initialization function
                $.ajax({
                    type: "get",
                    url: "select",
                    dataType: "json",
                    error: function () {
                        alert("error");
                    },
                    success: function (data) {
                        $('#area').html('');  
                        var options = '';
                        options += '<option value="Select">Select</option>';
                        for (var i = 0; i < data.length; i++) {
                            options += '<option value="' + data[i].Id + '">' + data[i].Text + '</option>';  
                        }  
                        $('#area').append(options);  
                    }
                });
            //});
        })
    </script>

}

Controller:

       public class selectVM
        {
            public int Id { get; set; }
            public string Text { get; set; }

        }

       public ActionResult Index()
        {
            return View();
        }

        public JsonResult select()
        {
            List<selectVM> model = new List<selectVM>();  //here you could select data from db by EF
            model.Add(new selectVM { Id = 1, Text = "aa"});
            model.Add(new selectVM { Id = 2, Text = "bb"});
            model.Add(new selectVM { Id = 3, Text = "cc"});
           return Json(model, JsonRequestBehavior.AllowGet);
        }

How it works:

Best Regards.

Yuki Tao