locked
ListBox in MVC RRS feed

  • Question

  • User527076549 posted

    HI,

    I am new to MVC,trying to learn

    I want to know

    1.is it possible to create List  at runtime

    2. Add item from textbox into list, same time saving it in DB .

    Tuesday, November 6, 2018 2:36 PM

All replies

  • User-474980206 posted
    Yes, it’s trivial. Just go thru tutorial.
    Tuesday, November 6, 2018 3:13 PM
  • User1520731567 posted

    Hi amithashenoy,

    1.is it possible to create List at runtime

    2. Add item from textbox into list, same time saving it in DB .

    1.About how to create a listbox,even implementing multiple selection and saved in db,you could refer to:

    https://www.codeproject.com/Articles/771999/ASP-Net-MVC-How-to-create-a-ListBox

    https://forums.asp.net/t/2146573.aspx

    2.About adding item from textbox into listbox,the answer from this article:

    <input type="text" id="my-textbox">
    <select id="my-listbox">
      <option>Option 1</option>
      <option>Option 2</option>
    </select>
    <a href="javascript:void(0)" class="action-add-to-list>Add Text To List</a>
    
    <script>
        $('.action-add-to-list').click(function () {
            var newListValue = $('#my-textbox').val();
            if ($.trim(newListValue) != '')
            {
                $('#my-listbox').append('<option>' + newListValue + '</option>');
                $('#my-textbox').val('');
            }
        });
    </script>

    Best Regards.

    Yuki Tao

    Wednesday, November 7, 2018 7:41 AM
  • User-271186128 posted

    Hi Amitha,

    1.is it possible to create List  at runtime

    2. Add item from textbox into list, same time saving it in DB .

    Have you solved your problem? If not, please refer to the following code to use JQuery append method to add listbox and list items, then, using JQuery ajax to call the action method and insert the new items into database.

    Code in .cshtml

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
    
            $("#btnadd").click(function () {
                var value = $("#txtItem").val();
                //check whether the div contain the listbox.
                if ($("#listbox_content").find("select").length == 0) {
                    // using append method to add listbox.
                    $("#listbox_content").append("<select id='listbox' multiple='multiple' style='width:200px'></select>");
                }
                //add item into the listbox.
                $("#listbox_content").find("select").append("<option value='" + value + "'>" + value + "</option>");
    
                //using jquery ajax to call the addItem method to insert data into database.
                $.ajax({
                    url: "/Home/AddItem",
                    type:"Post",
                    datatype: "json",
                    data: { value: value, text: value },
                    success: function (response) {
                        alert(response);
                    },
                    error: function (response) {
                        alert("error");
                    }                
                });
    
            });
        });
    </script>
    
    <input type="text" id="txtItem" value="" /><br />
    <input id="btnadd" type="button" value="Add" />
    <br />
    
    <div id="listbox_content">
    
    </div>

    Code in the AddItem method:

            [HttpPost]
            public ActionResult AddItem(string value, string text)
            {
                //insert the value into database
                return Json("OK", JsonRequestBehavior.AllowGet);
            }

    Best regards,
    Dillion

    Friday, November 16, 2018 9:04 AM