locked
How to import data from DB and show it in Select RRS feed

  • 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>

    Tuesday, January 15, 2019 6:47 AM

Answers

  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 16, 2019 6:35 AM

All replies

  • 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/

    Tuesday, January 15, 2019 6:57 PM
  • 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");
                        }
                });
            });

    Wednesday, January 16, 2019 1:04 AM
  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 16, 2019 6:35 AM