Binding data to a ListBox and posting the list to database mvc5

Question

Im developing an mvc5 application with code first approach. In one of my views i have a textbox, a add button, a save button, a delete button and a listbox.

When i enter a value in textbox(a text) and click add button it should be added to the listbox and show the text. Hence there'll be multiple text in this listbox. And also i should be able to delete a record/records in listbox using delete button.

After that i want to post this list to server. Majority of tasks in this scenario can be done using Jquery i suppose.

upto now what i have done

in _AttributeCreate partial view

@model eKnittingData.AttributeViewModel

@using (Html.BeginForm("Save", "Attribute"))
{ 
   @Html.TextBox("abc")
   <input type="button" name="AddText" value="Add Text" id="AddText" />

    @Html.ListBoxFor(a => a.typevalue, new SelectList(Model.typevalue, "Id", "Text"))


    <input type="submit" value="Save" id="btn" class="btn btn-success" onclick="disableBtn()" />
}  

script to append items

<script>
        $('#AddText').click(function () {
            $('#typevalue').append(
                new Option($('input[name=abc]').val()));
        });  
</script>

AttributeViewModel

public class AttributeViewModel
{
    public IEnumerable<String> typevalue { get; set; }
}

But this is not working. Pls guide me on how to do this(including delete functionality and final post functionailty). Thanks in advance!

Answer 1

You have a few issues with you code and implementation. @Html.ListBoxFor(a => a.typevalue, new SelectList(Model.typevalue, "Id", "Text")) will not work because typevalue is IEnumerable<String> and string does not contain properties named Id and Text. While you could just use @Html.ListBoxFor(a => a.typevalue, null) a listbox is not appropriate from what your trying to do. A listbox (<select multiple> element) only posts back the values of its selected options so unless all options are selected when the form is submitted, you will not get the results you expect.

From the comments you are wanting to dynamically add new items to add to the typevalue collection, and have the ability to delete them. Your html should be something like

@using (Html.BeginForm("Save", "Attribute"))
{
  <input type="text" id="newtypevalue" />
  <input type="button" value="Add Text" id="addtypevalue" />
  <div id="typevaluelist">
    // Generate inputs for existing items and in case of returning the view
    foreach(var item in Model.typevalue)
    {
      <div class="typevalue">
        <input type="text" name="typevalue" value="@item" />
        <button type="button" class="delete">Delete</button>
      </div>
    }
  </div>
  ....
}
// Hidden template for adding new items (outside the form element)
<div id="new" style="display:none;">
  <div class="typevalue">
    <input type="text" name="typevalue" />
    <button type="button" class="delete">Delete</button>
  </div>
</div>

and add the following scripts for adding and deleting items

$('#addtypevalue').click(function() {
  var clone = $('#new').clone().children('div'); // copy the template
  clone.find('input').val($('#newtypevalue').val()); // update text
  $('#typevaluelist').append(clone); // add it to the DOM
  $('#newtypevalue').val(''); // clear initial text box
});
$('#typevaluelist').on('click', '.delete', function() {
  $(this).closest('.typevalue').remove(); // remove it from the DOM
});

Refer this fiddle