Use jquery to dynamically add collection properties to an object, submit collection properties to the form

1. Set up the model, introduce the constructor, initialize the collection

public class Person
{
Public the person ()//introduces the constructor and initializes the collection. If the constructor is not set, the collection will have an error.
{
Skills = new hashset<string> ();
BirthDate = DateTime.Now.AddDays (-20);
}

public int PersonId {get; set;}

[Required]
public string FirstName {get; set;}

[Required]
public string LastName {get; set;}

[Required]
Public DateTime BirthDate {get; set;}

[Required]
[UIHint ("Booleanbuttonlabel")]//Specify a display template for the specified field. Used for HTML template helper methods, such as HTML. Displayformodel
public bool Likesmusic {get; set;}

[Required]
[EmailAddress]
public string EmailAddress {get; set;}

Public icollection<string> Skills {get; set;}
}

2. Setting the Controller method

Public ActionResult Create ()
{
var person = new person ();
return View (person);
}

[HttpPost]
Public ActionResult Create (person person)
{
if (modelstate.isvalid)
{
_people. ADD (person);
Return redirecttoaction ("Index");
}

return View (person);

}

3. Use scaffolding to generate strongly typed views

@model BootstrapMVC30Days.Models.Person

@using (Html.BeginForm ())
{
@Html. AntiForgeryToken ()

<div class= "Form-horizontal" >

<div class= "Form-group" >
@Html. labelfor (model = model. Likesmusic, htmlattributes:new {@class = "Control-label col-md-2"})
<div class= "Col-md-10" >
<div class= "checkbox" >
@Html. editorfor (model = model. Likesmusic)
@Html. validationmessagefor (model = model. Likesmusic, "", new {@class = "Text-danger"})
</div>
</div>
</div>

<div class= "Form-group" >
@Html. labelfor (model = model. Skills, htmlattributes:new {@class = "Control-label col-md-2"})
<div class= "Col-md-10" >
<div class= "Input-group" >
<span class= "INPUT-GROUP-BTN" >
<button class= "btn btn-default" id= "Add-skill" type= "button" >
<span class= "Glyphicon glyphicon-plus" ></span>
</button>
</span>
<input type= "text" id= "skill" class= "Form-control" placeholder= "Enter and then click + Add"/>

</div>
</div>
</div>

<div id= "Skills-wrapper" ></div>

<div class= "Form-group" >
<div class= "Col-md-offset-2 col-md-10" >
<ul id= "skills-list" class= "List-group" ></ul>
</div>
</div>

<div class= "Form-group" >
<div class= "Col-md-offset-2 col-md-10" >
<input type= "Submit" value= "Create" class= "btn Btn-default"/>
</div>
</div>
</div>

4. Introduce a script at the bottom of the page. Although we have added multiple hidden forms with the same name, the model binding will handle it as a collection.

@section Scripts {
<script>
$ (function () {
$ ("#add-skill"). Click (function () {
Get the value of a text box
var skill = $ ("#skill"). Val ();

Add hidden input to form
$ ("#skills-wrapper"). Append ($ ("<input type= ' hidden ' name = ' skills ' value= '" + Skill + "'/>"));

Add input to list box to display
$ ("#skills-list"). Append ($ ("<li class= ' List-group-item ' >" + skill + "</li>"));

Reset the form, the text box gets the focus
$ ("#skill"). Val (""). Focus;
});

});
</script>
@Scripts. Render ("~/bundles/jqueryval")
}

Use jquery to dynamically add collection properties to an object, submit collection properties to the form