New JSON Serialization
In 3.0-preview5, ASP.NET Core MVC adds supports for reading and writing JSON using System.Text.Json. The System.Text.Json serializer can read and write JSON asynchronously, and is optimized for UTF-8 text making it ideal for REST APIs and backend applications.
public ActionResult RenderResults(string param1)
{
var users = new[]
{
new User{ Id = 1, Name = "Test 1", Rating = 3},
new User{ Id = 2, Name = "Test 2", Rating = 4},
new User{ Id = 3, Name = "Test 3", Rating = 5}
};
return PartialView("_RenderResults", model: users);
} @using RemotePopOver.Models
@model IList<User>
<ul id="ratings1" data-title="Ratings" class="list-unstyled">
@foreach (var user in Model)
{
<li>
@user.Name
<span class="badge pull-right">@user.Rating</span>
</li>
}
</ul> <span id="remotePopover1"
aria-hidden="true"
data-param1="test"
data-popover-content-url="@Url.Action("RenderResults", "Home")"
class="glyphicon glyphicon-info-sign btn btn-info"></span> @section Scripts
{
<script type="text/javascript">
$(document).ready(function () {
$('body').on('mouseenter', 'span[data-popover-content-url]', function () {
var el = $(this);
$.ajax({
type: "POST",
url: $(this).data("popover-content-url"),
data: JSON.stringify({ param1: $(this).data("param1") }),
contentType: "application/json; charset=utf-8",
dataType: "json",
// controller is returning a simple text, not json
complete: function (xhr, status) {
var data = xhr.responseText;
if (status === 'error' || !data) {
el.popover({
content: 'Error connecting server!',
trigger: 'focus',
html: true,
container: 'body',
placement: 'auto',
title: 'Error!'
}).popover('show');
}
else {
el.popover({
content: data,
trigger: 'focus',
html: true,
container: 'body',
placement: 'auto',
title: $('<html />').html(data).find('#ratings1:first').data('title')
}).popover('show');
}
}
});
}).on('mouseleave', 'span[data-popover-content-url]', function () {
$(this).popover('hide');
});
});
</script>
} 
/// <summary>
///
/// </summary>
public class CompanyModel
{
/// <summary>
/// Table Identity
/// </summary>
public int Id { get; set; }
/// <summary>
/// Company Name
/// </summary>
[DisplayName("نام شرکت")]
public string CompanyName { get; set; }
/// <summary>
/// Company Abbreviation
/// </summary>
[DisplayName("نام اختصاری شرکت")]
public string CompanyAbbr { get; set; }
} @{
const string viewTitle = "شرکت ها";
ViewBag.Title = viewTitle;
const string gridName = "companies-grid";
}
<div class="col-md-12">
<div class="form-panel">
<header>
<div class="title">
<i class="fa fa-book"></i>
@viewTitle
</div>
</header>
<div class="panel-body">
<div id="@gridName">
</div>
</div>
</div>
</div>
</div>
@section scripts
{
<script type="text/javascript">
$(document).ready(function () {
$("#@gridName").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "@Html.Raw(Url.Action(MVC.Company.CompanyList()))",
type: "POST",
dataType: "json",
contentType: "application/json"
}
},
schema: {
data: "Data",
total: "Total",
errors: "Errors"
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
pageable: {
refresh: true
},
sortable: {
mode: "multiple",
allowUnsort: true
},
editable: false,
filterable: false,
scrollable: false,
columns: [ {
field: "CompanyName",
title: "نام شرکت",
sortable: true,
}, {
field: "CompanyAbbr",
title: "مخفف نام شرکت",
sortable: true
}]
});
});
</script>
} /// <summary>
///
/// </summary>
public static class PropertyExtensions
{
/// <summary>
///
/// </summary>
/// <typeparam name="T"></typeparam>
/// <param name="expression"></param>
/// <returns></returns>
public static MemberInfo GetMember<T>(this Expression<Func<T, object>> expression)
{
var mbody = expression.Body as MemberExpression;
if (mbody != null) return mbody.Member;
//This will handle Nullable<T> properties.
var ubody = expression.Body as UnaryExpression;
if (ubody != null)
{
mbody = ubody.Operand as MemberExpression;
}
if (mbody == null)
{
throw new ArgumentException("Expression is not a MemberExpression", "expression");
}
return mbody.Member;
}
/// <summary>
///
/// </summary>
/// <typeparam name="T"></typeparam>
/// <param name="expression"></param>
/// <returns></returns>
public static string PropertyName<T>(this Expression<Func<T, object>> expression)
{
return GetMember(expression).Name;
}
/// <summary>
///
/// </summary>
/// <typeparam name="T"></typeparam>
/// <param name="expression"></param>
/// <returns></returns>
public static string PropertyDisplay<T>(this Expression<Func<T, object>> expression)
{
var propertyMember = GetMember(expression);
var displayAttributes = propertyMember.GetCustomAttributes(typeof(DisplayNameAttribute), true);
return displayAttributes.Length == 1 ? ((DisplayNameAttribute)displayAttributes[0]).DisplayName : propertyMember.Name;
}
} public static string PropertyName<T>(this Expression<Func<T, object>> expression)
public static string PropertyDisplay<T>(this Expression<Func<T, object>> expression)
@using Models
@{
const string viewTitle = "شرکت ها";
ViewBag.Title = viewTitle;
const string gridName = "companies-grid";
}
<div class="col-md-12">
<div class="form-panel">
<header>
<div class="title">
<i class="fa fa-book"></i>
@viewTitle
</div>
</header>
<div class="panel-body">
<div id="@gridName">
</div>
</div>
</div>
</div>
</div>
@section scripts
{
<script type="text/javascript">
$(document).ready(function () {
$("#@gridName").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "@Html.Raw(Url.Action(MVC.Company.CompanyList()))",
type: "POST",
dataType: "json",
contentType: "application/json"
}
},
schema: {
data: "Data",
total: "Total",
errors: "Errors"
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
pageable: {
refresh: true
},
sortable: {
mode: "multiple",
allowUnsort: true
},
editable: false,
filterable: false,
scrollable: false,
columns: [ {
field: "@(PropertyExtensions.PropertyName<CompanyModel>(a => a.CompanyName))",
title: "@(PropertyExtensions.PropertyDisplay<CompanyModel>(a => a.CompanyName))",
sortable: true,
}, {
field: "@(PropertyExtensions.PropertyName<CompanyModel>(a => a.CompanyAbbr))",
title: "@(PropertyExtensions.PropertyDisplay<CompanyModel>(a => a.CompanyAbbr))",
sortable: true
}]
});
});
</script>
} بعد از آمدن نسخه‌ی سوم ASP.NET MVC مکانیسمی به نام Remote Validation به آن اضافه شد که کارش اعتبارسنجی از راه دور بود. فرض کنید نیاز است در یک فرم، قبل از اینکه کل فرم به سمت سرور ارسال شود، مقداری بررسی شده و اعتبارسنجی آن انجام گیرد و این اعتبارسنجی چیزی نیست که بتوان سمت کاربر و بدون فرستاده شدن مقداری به سمت سرور صورت گیرد. نمونه بارز این مسئله صفحه عضویت اکثر سایت‌هایی هست که روزانه داریم با آن‌ها کار میکنیم. فیلد نام کاربری توسط شما پر شده و بعد از بیرون آمدن از آن فیلد، سریعا مشخص میشود که آیا این نام کاربری قابل استفاده برای شما هست یا خیر. به‌صورت معمول برای انجام این کار باید با جاوا اسکریپت، مدیریتی روی فیلد مربوطه انجام دهیم. مثلا با بیرون آمدن فوکوس از روی فیلد، با Ajax نام کاربری وارد شده را به سمت سرور بفرستیم، چک کنیم و بعد از اینکه جواب برگشت بررسی کنیم که الان آیا این نام کاربری قبلا گرفته شده یا نه.
انجام این کار به‌راحتی با مزین‌کردن خصوصیت (Property) مربوطه موجود در مدل برنامه به Attribute یا ویژگی Remote و داشتن یک Action در Controller مربوطه که کارش بررسی وجود یوزرنیم هست امکان پذیر است. ادامه بحث را با مثال همراه می‌کنم.
به عنوان مثال در سیستمی که قرار هست محصولات ما را ثبت کند، باید بیایم و قبل از اینکه محصول جدید به ثبت برسد این عملیات چک‌کردن را انجام دهیم تا کالای تکراری وارد سیستم نشود. شناسه اصلی که برای هر محصول وجود دارد بارکد هست و ما آن را میخواهیم مورد بررسی قرار دهیم.
مدل برنامه
public class ProductModel
{
public int Id { get; set; }
[Display(Name = "نام کالا")]
[Required(ErrorMessage = "{0} یک فیلد اجباری است و باید آن را وارد کنید.")]
[StringLength(50, ErrorMessage = "طول {0} باید کمتر از {1} کاراکتر باشد.")]
public string Name { get; set; }
[Display(Name = "قیمت")]
[Required(ErrorMessage = "{0} یک فیلد اجباری است و باید آن را وارد کنید.")]
[DataType(DataType.Currency)]
public double Price { get; set; }
[Display(Name = "بارکد")]
[Required(ErrorMessage = "{0} یک فیلد اجباری است و باید آن را وارد کنید.")]
[StringLength(50, ErrorMessage = "طول {0} باید کمتر از {1} کاراکتر باشد.")]
[Remote("IsProductExist", "Product", HttpMethod = "POST", ErrorMessage = "این بارکد از قبل در سیستم وجود دارد.")]
public string Barcode { get; set; }
} همونطور که میبینید خصوصیت Barcode را مزین کردیم به ویژگی Remote. این ویژگی دارای ورودی‌های خاص خودش هست. وارد کردن نام اکشن و کنترلر مربوطه برای انجام این چک‌کردن از مهم‌ترین قسمت‌های اصلی هست. چیزهایی دیگه‌ای هم هست که میتوانیم آن‌ها را مقداردهی کنیم. مثل HttpMethod، ErrorMessage و یا AdditionFields. HttpMethod که همان طریقه‌ی ارسال درخواست به سرور هست. ErrorMessage هم همان خطایی هست که در زمان رخ‌داد قرار است نشان داده شود. AdditionFields هم خصوصیتی را مشخص میکند که ما می‌خوایم به‌همراه فیلد مربوطه به سمت سرور بفرستیم. مثلا می‌تونیم به‌همراه بارکد، نام کالا را هم برای بررسی‌های مورد نیازمان بفرستیم.
کنترلر برنامه
[HttpPost]
[OutputCache(Location = OutputCacheLocation.None, NoStore = true)]
public ActionResult IsProductExist(string barcode)
{
if (barcode == "123456789") return Json(false); // اگر محصول وجود داشت
return Json(true);
} در اینجا به نمایش قسمتی از کنترلر برنامه میپردازیم. اکشنی که مربوط میشود به چک‌کردن مقدارهای لازم و در پایان آن یک خروجی Json را برمی‌گردانیم که مقدار true یا false دارد. در حقیقت مقدار را به این صورت برمی‌گردانیم که اگر مقدار ورودی در پایگاه داده وجود دارد، false را برمی‌گرداند و اگر وجود نداشت true. همین‌طور آمدیم از کش شدن درخواست‌هایی که با Ajax آمده با ویژگی OutputCache جلوگیری کردیم.
declare @t table(id int, name nvarchar(max), active bit) insert @t values (1, 'Group 1', 1), (2, 'Group 2', 0)
select '[' + STUFF((
select
',{"id":' + cast(id as varchar(max))
+ ',"name":"' + name + '"'
+ ',"active":' + cast(active as varchar(max))
+'}'
from @t t1
for xml path(''), type
).value('.', 'varchar(max)'), 1, 1, '') + ']'
[{"id":1,"name":"Group 1","active":1},{"id":2,"name":"Group 2","active":0}]
declare @group table(id int, name nvarchar(max), active bit)
insert @group values (1, 'Group 1', 1), (2, 'Group 2', 0)
declare @member table(id int, groupid int,name nvarchar(max))
insert @member values (1, 1,'Ali'), (2, 1,'Mojtaba'),(3,2,'Hamid')
select '[' + STUFF((
select
',{"id":' + cast(g.id as varchar(max))
+ ',"name":"' + g.name + '"'
+ ',"members": { "children": [' +
(select + STUFF((
select
',{"id":' + cast(m.id as varchar(max))
+ ',"name":"' + m.name + '"}'
from @member m
where m.groupid = g.id
for xml path(''), type
).value('.', 'varchar(max)'), 1, 1, '')
+ ']}'
+ ',"active":' + cast(g.active as varchar(max))
+'}')
from @group g
for xml path(''), type
).value('.', 'varchar(max)'), 1, 1, '') + ']'
[{"id":1,"name":"Group 1","members":
{ "children": [{"id":1,"name":"Ali"},{"id":2,"name":"Mojtaba"}]}
,"active":1},
{"id":2,"name":"Group 2","members":
{ "children": [{"id":3,"name":"Hamid"}]}
,"active":0}]
[Route("api/[controller]")] // http://localhost:7742/api/test
public class TestController : Controller
{
private readonly ILogger<TestController> _logger;
public TestController(ILogger<TestController> logger)
{
_logger = logger;
} [Route("api/[controller]")] // http://localhost:7742/api/test
public class TestController : Controller
{
private readonly ILogger<TestController> _logger;
public TestController(ILogger<TestController> logger)
{
_logger = logger;
}
[HttpGet]
public IEnumerable<string> Get() // http://localhost:7742/api/test
{
return new [] { "value1", "value2" };
}
[HttpGet("{page:int}")]
public IActionResult Get(int page) // http://localhost:7742/api/test/1
{
return Json(new[] { "value3", "value4" });
}
[HttpGet("/api/path1")]
public IActionResult GetEpisodes1() // http://localhost:7742/api/path1
{
return Json(new[] { "value5", "value6" });
}
[HttpGet("/api/path2")]
public IActionResult GetEpisodes2() // http://localhost:7742/api/path2
{
try
{
// get data from the DB ...
return Ok(new[] { "value7", "value8" });
}
catch (Exception ex)
{
_logger.LogError("Failed to get data from the API", ex);
return BadRequest();
}
}
} [Route("api/[controller]")]
public class ValuesController : Controller
{
// GET: api/values
[HttpGet]
public IEnumerable<string> Get()
{
return new string[] { "value1", "value2" };
}
// GET api/values/5
[HttpGet("{id}")]
public string Get(int id)
{
return "value";
}
// POST api/values
[HttpPost]
public void Post([FromBody]string value)
{
}
// PUT api/values/5
[HttpPut("{id}")]
public void Put(int id, [FromBody]string value)
{
}
// DELETE api/values/5
[HttpDelete("{id}")]
public void Delete(int id)
{
}
}
} [Produces("application/json")]
[Route("api/[controller]")] // http://localhost:7742/api/test
public class TestController : Controller namespace Core1RtmEmptyTest.Models
{
public class Person
{
public string FirstName { get; set; }
public string LastName { get; set; }
public int Age { get; set; }
}
} using Core1RtmEmptyTest.Models;
using Microsoft.AspNetCore.Mvc;
namespace Core1RtmEmptyTest.Controllers
{
public class PersonController : Controller
{
public IActionResult Index()
{
return View();
}
[HttpPost]
public IActionResult Index(Person person)
{
return Json(person);
}
}
} @section scripts
{
<script type="text/javascript">
$(function () {
$.ajax({
type: 'POST',
url: '/Person/Index',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify({
FirstName: 'F1',
LastName: 'L1',
Age: 23
}),
success: function (result) {
console.log('Data received: ');
console.log(result);
}
});
});
</script>
} 
public IActionResult Index([FromBody]Person person)
var dataType = 'application/x-www-form-urlencoded; charset=utf-8';
var data = $('form').serialize(); [HttpPost] public IActionResult Index([FromForm]Person person)
public class ProductModel
{
public ProductModel(IProductService prodService)
{
Value = prodService.Get(productId);
}
public IProduct Value { get; private set; }
} public async Task<IActionResult> GetProduct([FromServices]ProductModel product)
{
} public void ConfigureServices(IServiceCollection services)
{
services.AddMvc(options =>
{
options.FormatterMappings.SetMediaTypeMappingForFormat("xml", new MediaTypeHeaderValue("application/xml"));
}).AddJsonOptions(options =>
{
options.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();
options.SerializerSettings.DefaultValueHandling = DefaultValueHandling.Include;
options.SerializerSettings.NullValueHandling = NullValueHandling.Ignore;
}); 
using System.Collections.Generic;
using System.IO;
using System.Web;
using System.Web.Script.Serialization;
namespace OrbitWebformsTest
{
public class Picture
{
public string Title { set; get; }
public string Path { set; get; }
}
public class OrbitHandler : IHttpHandler
{
IList<Picture> PicturesDataSource()
{
var results = new List<Picture>();
var path = HttpContext.Current.Server.MapPath("~/Images");
foreach (var item in Directory.GetFiles(path, "*.*"))
{
var name = Path.GetFileName(item);
results.Add(new Picture
{
Path = /*"Images/" + name*/ name,
Title = name
});
}
return results;
}
public void ProcessRequest(HttpContext context)
{
var items = PicturesDataSource();
var json = /*new JavaScriptSerializer().Serialize(items)*/ string.Empty;
throw new InvalidDataException("همینطوری");
context.Response.ContentType = "text/plain";
context.Response.Write(json);
}
public bool IsReusable
{
get { return false; }
}
}
}<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="OrbitWebformsTest._default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Content/orbit-1.2.3.css" rel="stylesheet" type="text/css" />
<script src="Script/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.orbit-1.2.3.min.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="featured">
</div>
</form>
<script type="text/javascript">
$(function () {
$.ajax({
url: "Handler.ashx",
contentType: "application/json; charset=utf-8",
success: function (data) {
$.each(data, function (i, b) {
var str = '<img src="' + b.Path + '" alt="' + b.Title + '"/>';
$("#featured").append(str);
});
$('#featured').orbit();
},
dataType: "json"
});
});
</script>
</body>
</html>
<script src="Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
public void ProcessRequest(HttpContext context)
{
var items = PicturesDataSource();
var json = new JavaScriptSerializer().Serialize(items);
context.Response.ContentType = "text/plain";
context.Response.Write(json);
}
IList<Picture> PicturesDataSource()
{
var results = new List<Picture>();
var path = HttpContext.Current.Server.MapPath("~/Images");
foreach (var item in Directory.GetFiles(path, "*.*"))
{
var name = Path.GetFileName(item);
results.Add(new Picture
{
Path = "Images/" + name,
Title = name
});
}
return results;
}
<div>
@(Html.Kendo().TreeView()
.Name("treeview")
.TemplateId("treeview-template")
.HtmlAttributes(new { @class = "demo-section" })
.DragAndDrop(true)
.BindTo(Model.Where(e=>e.ParentFolderID==null).OrderBy(e=>e.Order), mappings =>
{
mappings.For<DAL.Folder>(binding => binding
.ItemDataBound((item, folder) =>
{
item.Text = folder.FolderName;
item.SpriteCssClasses = "folder";
item.Expanded=true;
item.Id = folder.FolderID.ToString();
})
.Children(folder => folder.Folder1));
mappings.For<DAL.Folder>(binding => binding
.ItemDataBound((item, folder) =>
{
item.Text = folder.FolderName;
item.SpriteCssClasses = " folder";
item.Expanded = true;
item.Id = folder.FolderID.ToString();
}));
})
)
</div> <style type="text/css" scoped>
.demo-section {
width: 200px;
}
#treeview .k-sprite ,#treeview2 .k-sprite {
background-image: url("@Url.Content("/Content/kendo/images/coloricons-sprite.png")");
}
.rootfolder { background-position: 0 0; }
.folder { background-position: 0 -16px; }
.pdf { background-position: 0 -32px; }
.html { background-position: 0 -48px; }
.image { background-position: 0 -64px; }
.delete-link,.edit-link {
width: 12px;
height: 12px;
overflow: hidden;
display: inline-block;
vertical-align: top;
margin: 2px 0 0 3px;
-webkit-border-radius: 5px;
-mox-border-radius: 5px;
border-radius: 5px;
}
.delete-link{
background: transparent url("@Url.Content("/Content/kendo/images/close.png")") no-repeat 50% 50%;
}
.edit-link{
background: transparent url("@Url.Content("/Content/kendo/images/edit.png")") no-repeat 50% 50%;
}
</style> <a href="#" id="serialize">ذخیره</a>
$('#serialize').click(function () {
serialized = serialize();
window.location.href = "Folder/SaveMenu?serial=" + serialized + "!";
});
function serialize() {
var tree = $("#treeview").data("kendoTreeView");
var json = treeToJson(tree.dataSource.view());
return JSON.stringify(json);
}
function treeToJson(nodes) {
return $.map(nodes, function (n, i) {
var result = { id: n.id};
//var result = { text: n.text, id: n.id, expanded: n.expanded, checked: n.checked };
if (n.hasChildren)
result.items = treeToJson(n.children.view());
return result;
});
} var tree = $("#treeview").data("kendoTreeView");
var json = treeToJson(tree.dataSource.view()); var result = { id: n.id};
//var result = { text: n.text, id: n.id, expanded: n.expanded, checked: n.checked };
if (n.hasChildren)
result.items = treeToJson(n.children.view()); return JSON.stringify(json);
window.location.href = "Folder/SaveMenu?serial=" + serialized + "!";
"[{\"id\":\"2\"},{\"id\":\"5\",\"items\":[{\"id\":\"3\"},{\"id\":\"6\"},{\"id\":\"7\"}]}]!" 
همانطور که میبینید گره دوم که "پوشه چهارم45" نام دارد شامل سه فرزند است که در رشته داده شده با عنوان item شناخته شده است. حال باید این رشته با برنامه نویسی سی شارپ جداسازی کرد :
string serialized; Dictionary<int, int> numbers = new Dictionary<int, int>();
public ActionResult SaveMenu(string serial)
{
var newfolders = new List<Folder>();
serialized = serial;
calculte_serialized(0);
return RedirectToAction("Index");
} void calculte_serialized(int parent)
{
while (serialized.Length > 0)
{
var id_index=serialized.IndexOf("id");
if (id_index == -1)
{
return;
}
serialized = serialized.Substring(id_index + 5);
var quote_index = serialized.IndexOf("\"");
var id=serialized.Substring(0, quote_index);
numbers.Add(int.Parse(id), parent);
serialized = serialized.Substring(quote_index);
var condition = serialized.Substring(0,3);
switch (condition)
{
case "\"},":
break;
case "\",\"":
calculte_serialized(int.Parse(id));
break;
case "\"}]":
return;
break;
default:
break;
}
}
} calculte_serialized با گرفتن 0 کار خود را شروع میکند یعنی از گره هایی که پدر ندارند و تمام idها را همراه با پدرشان در یک دیکشنری میریزد و هرکجا که به فرزندی برخورد به صورت بازگشتی فراخوانی میشود. پس از اجرای کامل آن ما درخت را در یک دیکشنری به صورت عنصرهای مجزا در اختیار داریم که میتوانیم در پایگاه داده ذخیره کنیم.