How can I add items to a list in my View Model within a View in ASP.Net MVC?

Question

I'm hoping someone can point me in the right direction here. I am trying to add to a list of items in my form. I have searched for a couple days, and tried a lot of variations of things that I have lost track of all the things I havde done. I'm at my wits end.

Some things I have tried: I found a couple answers on here referencing a post from 5 years ago which I tried but couldnt get to work. I tried using ajax I tried using ajax with a partial view

I'm hoping someone can help me with it.

I have a ViewModel like this:

public class CustomerFormViewModel
{
    public Customer Customer { get; set; }

    [Remote("DoesCustomerExist", "Customers", HttpMethod = "POST", ErrorMessage = "There is already a customer by that name. Please enter another name.")]
    public string CustomerName
    {
        get { return Customer.Name; }
        set { Customer.Name = value; }
    }

    public IEnumerable<Key> Keys { get; set; }

    public List<int> KeyIds = new List<int>();
 }

And the Customer model looks like this:

public class Customer
{
    public int Id { get; set; }

    [Required]
    [StringLength(255)]
    public string Name { get; set; }

    public string Address { get; set; }

    public string Country { get; set; }

    public DateTime DateAdded { get; set; }
}

Essentially, in my view, I want to display a form where the admin enters the customers details, and clicks an "add key" button to add items to the list of "KeyIds".

My view is something like this:

@model LowKey.ViewModels.CustomerFormViewModel
@{
    ViewBag.Title = "CustomerForm";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>@Model.Title</h2>

@using (Html.BeginForm("Save", "Customers"))
{
    <div id="customers">
        <div class="form-group">
                @Html.LabelFor(o => o.Customer.Name)
                @Html.TextBoxFor(o => o.Customer.Name, new {@class = "form-control"})
                @Html.ValidationMessageFor(o => o.Customer.Name, "", new {@class = "text-danger"})
        </div>
   </div>
}

Perhaps my domain models are not set up properly, or my viewmodel could be different, but I've tried using a partial view for the KeyList, but I can't seem to get that to work. Any ideas?

First you view model should not contain the data model - just the properties of `Customer` that you need in the view - [What is ViewModel in MVC?](http://stackoverflow.com/questions/11064316/what-is-viewmodel-in-mvc). Next, `KeyIds` needs to be a property, not a field (add `{get; set; }`) otherwise nothing will be bound to it. — , Jul 14 '16 at 02:12
If you just want to add `int` values, then use jquery to dynamically add an `` on each button click. For dynamically adding complex objects, refer the answers [here](http://stackoverflow.com/questions/29161481/post-a-form-array-without-successful/29161796#29161796) and [here](http://stackoverflow.com/questions/28019793/submit-same-partial-view-called-multiple-times-data-to-controller/28081308#28081308) — , Jul 14 '16 at 02:13
I suspect however, that because your view model contains a property `IEnumerable Keys`, that you want to select one or more of those items, in which case, use a listbox or a checked list box in the UI (refer [this answer](http://stackoverflow.com/questions/29542107/pass-list-of-checkboxes-into-view-and-pull-out-ienumerable/29554416#29554416) for an example) — , Jul 14 '16 at 02:48
@StephenMuecke You are right about wanting to select from a list. I am using DropdownListFor with the Keys as the SelectList. For now I'm going to try just adding to the list with jQuery that you suggested and move on from there. Do you think the option of passing a model to a partial view would work here? — Ryan Yearwood, Jul 14 '16 at 12:26
`DropDownListFor()` will only allow you to select one 'Key'. You need to use `ListBoxFor(m => m.KeyIds, new SelectList(Model.Keys, "KeyId", "Name"))` (assuming `Key` contains properties `KeyId` and `Name`), or better, used a list of checkboxes as per the link in my last comment. — , Jul 14 '16 at 12:29

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

the best solution for your work is :

Cookie

using Cookies ! because you have access cookie form ASP(server side) and javascript(client side). so just add your data to cookie ! just need to learn how to use cookie in c# and javascript, this link for c# and this for javascript.
Using Ajax you can use jquery ajax to send info of your customer to the server side (via jquery and ajax) then you save those info in database(via asp.net c#). this link is for learning how to send info with jquery ajax

How can I add items to a list in my View Model within a View in ASP.Net MVC?

1 Answers1