It's just a simple form where you enter your first name and last name, and then use a multiselect dropdown to pick your favorite bands.
Home
and enter your First name, Last name and select your favorite Car.
Step 1: First Create PersonController.css
[HttpGet]
public ActionResult Index()
{
return View(new PersonModel());
}
[HttpPost]
public JsonResult BadSave(string first, string last, List<string> favoriteBands)
{
Console.WriteLine(first);
Console.WriteLine(last);
Console.WriteLine(String.Join(" ",favoriteBands));
return Json(new { result = "saved the bad way" });
}
[HttpPost]
public JsonResult GoodSave(PersonModel model)
{
Console.WriteLine(model.First);
Console.WriteLine(model.Last);
Console.WriteLine(String.Join(" ", model.FavoriteBands));
return Json(new { result = "saved the good way" });
}
Step 2 : Create PersonModel.css Model
public class PersonModel
{
[DisplayName("First Name")]
public string First { get; set; }
[DisplayName("Last Name ")]
public string Last { get; set; }
[DisplayName("Favorite Car")]
public List<string> FavoriteBands { get; set; }
}
Step 3 : Create the View ie Index.cshtml
@model MVCJsonPost.Models.PersonModel
@{
ViewBag.Title = "Home";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Home</h2>
<div>
@Html.LabelFor(m => m.First)
@Html.EditorFor(m => m.First)
</div>
<div>
@Html.LabelFor(m => m.Last)
@Html.EditorFor(m => m.Last)
</div>
<div>
@Html.LabelFor(m => m.FavoriteBands)
@Html.DropDownListFor(m => m.FavoriteBands, new SelectList(
new List<Object>{
new { value = 0 , text = "Honda City" },
new { value = 1 , text = "Renault fluence" },
new { value = 2 , text = "Hyundai xcent"}
},
"value",
"text",
Model.FavoriteBands),
new { multiple = "multiple" })
</div>
<div>
<input type="button" value="Bad Submit" id="bad" />
<input type="button" value="Good Submit" id="good" />
</div>
<label id="result"></label>
Step 4: Create the js file i.e person.js in Script Folder
$(document).ready(function () {
$('#good').click(function () {
var request = new PersonModel();
debugger;
$.ajax({
url: "Person/GoodSave",
dataType: 'json',
contentType: "application/json",
type: "POST",
data: JSON.stringify(request), //Ahhh, much better
success: function (response) {
$("#result").text(response.result);
}
});
});
$('#bad').click(function () {
var request = new PersonModel();
debugger;
$.ajax({
url: "Person/BadSave",
dataType: 'json',
type: "POST",
data: "first=" + request.First + "&last=" + request.Last + "&favoriteBands=" + request.FavoriteBands, //How do you encode an array?? This doesn't even work right
success: function (response) {
$("#result").text(response.result);
}
});
});
});
function PersonModel() {
var self = this;
self.First = $("#First").val();
self.Last = $("#Last").val();
self.FavoriteBands = $.map($('#FavoriteBands option:selected'),
function (e) { return $(e).val(); });
}
Run The Application and fill the form and place some breakpoint to test and debug line by line
Done :)
Home
and enter your First name, Last name and select your favorite Car.
Step 1: First Create PersonController.css
[HttpGet]
public ActionResult Index()
{
return View(new PersonModel());
}
[HttpPost]
public JsonResult BadSave(string first, string last, List<string> favoriteBands)
{
Console.WriteLine(first);
Console.WriteLine(last);
Console.WriteLine(String.Join(" ",favoriteBands));
return Json(new { result = "saved the bad way" });
}
[HttpPost]
public JsonResult GoodSave(PersonModel model)
{
Console.WriteLine(model.First);
Console.WriteLine(model.Last);
Console.WriteLine(String.Join(" ", model.FavoriteBands));
return Json(new { result = "saved the good way" });
}
Step 2 : Create PersonModel.css Model
public class PersonModel
{
[DisplayName("First Name")]
public string First { get; set; }
[DisplayName("Last Name ")]
public string Last { get; set; }
[DisplayName("Favorite Car")]
public List<string> FavoriteBands { get; set; }
}
Step 3 : Create the View ie Index.cshtml
@model MVCJsonPost.Models.PersonModel
@{
ViewBag.Title = "Home";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Home</h2>
<div>
@Html.LabelFor(m => m.First)
@Html.EditorFor(m => m.First)
</div>
<div>
@Html.LabelFor(m => m.Last)
@Html.EditorFor(m => m.Last)
</div>
<div>
@Html.LabelFor(m => m.FavoriteBands)
@Html.DropDownListFor(m => m.FavoriteBands, new SelectList(
new List<Object>{
new { value = 0 , text = "Honda City" },
new { value = 1 , text = "Renault fluence" },
new { value = 2 , text = "Hyundai xcent"}
},
"value",
"text",
Model.FavoriteBands),
new { multiple = "multiple" })
</div>
<div>
<input type="button" value="Bad Submit" id="bad" />
<input type="button" value="Good Submit" id="good" />
</div>
<label id="result"></label>
Step 4: Create the js file i.e person.js in Script Folder
$(document).ready(function () {
$('#good').click(function () {
var request = new PersonModel();
debugger;
$.ajax({
url: "Person/GoodSave",
dataType: 'json',
contentType: "application/json",
type: "POST",
data: JSON.stringify(request), //Ahhh, much better
success: function (response) {
$("#result").text(response.result);
}
});
});
$('#bad').click(function () {
var request = new PersonModel();
debugger;
$.ajax({
url: "Person/BadSave",
dataType: 'json',
type: "POST",
data: "first=" + request.First + "&last=" + request.Last + "&favoriteBands=" + request.FavoriteBands, //How do you encode an array?? This doesn't even work right
success: function (response) {
$("#result").text(response.result);
}
});
});
});
function PersonModel() {
var self = this;
self.First = $("#First").val();
self.Last = $("#Last").val();
self.FavoriteBands = $.map($('#FavoriteBands option:selected'),
function (e) { return $(e).val(); });
}
Run The Application and fill the form and place some breakpoint to test and debug line by line
Done :)
