JSON in the asp.net mvc c#
Controller:
using System.Web.Mvc;
using JsonBindingExample.Models;
namespace JsonBindingExample.Controllers
{
public class HomeController : Controller
{
public ActionResult CreatePerson()
{
return View();
}
[HttpPost]
public ActionResult CreatePerson(Person person)
{
return Json("ok");
}
}
}
Model:
namespace JsonBindingExample.Models
{
public class Person
{
public int Id { get; set; }
public string Name { get; set; }
public string Age { get; set; }
public string PhoneNumber { get; set; }
}
}
Script:[External Javascript]
MyScript.js:
$(document).ready(function () {
$('#save').click(function () {
var person = { Id: 100, Name: $('#Name').val(), Age: $('#Age').val(), PhoneNumber: $('#PhoneNumber').val() };
$.ajax({
url: '/Home/CreatePerson',
type: "POST",
data: JSON.stringify(person),
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (result) { $('#message').html('Person Saved' + result).fadeIn(); },
error: function () { $('#message').html('Error Occurred').fadeIn(); }
});
return false;
});
});
View:
Refer the external javascript file as MyScript.js in the view.
Note:Create a Strongly-Typed View
@model JsonBindingExample.Models.Person
@{
ViewBag.Title = "CreatePerson";
}
<h2>
CreateUser</h2>
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/json2.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/MyScript.js")" type="text/javascript"></script>
@using (Html.BeginForm())
{
@Html.ValidationSummary(true)
<fieldset>
<legend>Person</legend>
<div class="editor-label">
@Html.LabelFor(model => model.Name)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Name)
@Html.ValidationMessageFor(model => model.Name)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Age)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Age)
@Html.ValidationMessageFor(model => model.Age)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.PhoneNumber)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.PhoneNumber)
@Html.ValidationMessageFor(model => model.PhoneNumber)
</div>
<p>
<input id="save" type="button" value="Save Person" />
</p>
<div id="message">
</div>
</fieldset>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>
Screen Shot:
Conclusion:
About this code as check the value in the jquery ajax of external js file.
