kamranetemadi
سه شنبه 25 فروردین 1394, 22:13 عصر
AppMl یک روش جدید بر پایه MVC برای نمایش اطلاعات در صفحه ست که استفاده از اون خیلی ساده و سریعه
در حقیقت AppMl فقط یک کتابخانه JavaScript هست که ایجاد شده تا کار رو سریع و آسون کنه البته اینم بگم که استاندارد های W3Schools رو داره.
http://www.w3schools.com/appml/2.0.1/appml.js
میتونید اطلاعات Object ها ، فایل ها و دیتابیس رو از این طریق در صفحه نشون بدید و حتی صفحه HTML خودتونو داینامیک کنید.
برای استفاده از فقط کافیه اطلاعات رو به فرمت json تبدیل کنید و اونو به AppMl بدید.
بریم سراغ روش کار
1-اول همونطور که گفتم باید اطلاعاتی که میخواید نمایش بدید و به فرمت Json باشه رو ایجاد کنید یا از جایی بخونید که میتونه یک فایل، یک Object و ... باشه
حالت اول، یک فایل اسکریپت: فرض کنید اطلاعات زیر در یک فایل به نام customers.js ذخیره شده
{
"records":[
{"CustomerName":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"},
{"CustomerName":"Bottom-Dollar Marketse","City":"Tsawassen","Country":"Canada"},
{"CustomerName":"Cactus Comidas para llevar","City":"Buenos Aires","Country":"Argentina"},
{"CustomerName":"Centro comercial Moctezuma","City":"México D.F.","Country":"Mexico"},
{"CustomerName":"Chop-suey Chinese","City":"Bern","Country":"Switzerland"},
{"CustomerName":"Comércio Mineiro","City":"São Paulo","Country":"Brazil"}
]
}
حالت دوم، آبجکت:
<script>
var dataObj = {
"records":[
{"CustomerName":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"},
{"CustomerName":"Bottom-Dollar Marketse","City":"Tsawassen","Country":"Canada"},
{"CustomerName":"Cactus Comidas para llevar","City":"Buenos Aires","Country":"Argentina"},
{"CustomerName":"Centro comercial Moctezuma","City":"México D.F.","Country":"Mexico"},
{"CustomerName":"Chop-suey Chinese","City":"Bern","Country":"Switzerland"},
{"CustomerName":"Comércio Mineiro","City":"São Paulo","Country":"Brazil"}
]};
</script>
حالت سوم، یک صفحه ASP.NET که تمام کد های HTML اون حذف شده و توسط کد اطلاعاتی که ار دیتابیس خونده شده به فرمت بالا Response.Write بشه.
(من اینطور کار میکنم که اطلاعات رو میخونم و داخل DataTable میریزم بعد اونو به فرمت Json تبدیل می کنم)
مثلا آدرس صفحه من اینه: customers.aspx و کد داخل اون:
public partial class appMl_category : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
DataTable dt = ClassPortal.DataTableAction("SP_Select_costomers");
Response.Write("{\"records\":" + ClassPortal.ConvertDataTableTojSonString(dt) + "}");
}
}
این هم متد ConvertDataTableTojSonString که در ClassPortal.cs قرار دادم برای تبدلی دیتا تیبل به جیسان:
public static String ConvertDataTableTojSonString(DataTable dataTable)
{
System.Web.Script.Serialization.JavaScriptSerializ er serializer =
new System.Web.Script.Serialization.JavaScriptSerializ er();
List<Dictionary<String, Object>> tableRows = new List<Dictionary<String, Object>>();
Dictionary<String, Object> row;
foreach (DataRow dr in dataTable.Rows)
{
row = new Dictionary<String, Object>();
foreach (DataColumn col in dataTable.Columns)
{
row.Add(col.ColumnName, dr[col]);
}
tableRows.Add(row);
}
return serializer.Serialize(tableRows);
}
- حالا برای نمایش این اطلاعات:
اگر اطلاعات به روش اول داخل فایل customer.js باشه
<!DOCTYPE html>
<html lang="en-US">
<title>Customers</title>
<link rel="stylesheet" href="style.css">
<script src="http://www.w3schools.com/appml/2.0.1/appml.js"></script>
<body>
<h1>Customers</h1>
<table appml-data="customers.js">
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr appml-repeat="records">
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
</body>
</html>
اگر به روش دوم از Object خونده بشه:
<table appml-data="dataObj">
…
و اگر به روش سوم صفحه ASPX باشه:
<table appml-data="customers.aspx">
...
مزیت حالت سوم اینه که با
QueryString
میتونید خروجی های متفاوتی داشته باشید
حالا میریم سراغ توضیح کد ها:
appml-data: مقداری که به این مشخصه اختصاص داده میشه منبع اطلاعاتیه که میخواید نمایش بدید و همونطور که گفتم میتونه حالتهای مختلف داشته باشه
اطلاعات خونده شده فقط در همون بلاکی که اختصاص داده شده قابل دسترسی و استفادس
appml-repeat: مقداری که باید با این مشخصه اختصاص بدید نام بلوک داده هاست
{
"records":[
{"CustomerName":"A…
این بلوک مثل Repeater عمل میکنه و کدهای داخل اون برای هر رکورد تکرار میشه.
این تاپیک رو دنبال کنید...
در حقیقت AppMl فقط یک کتابخانه JavaScript هست که ایجاد شده تا کار رو سریع و آسون کنه البته اینم بگم که استاندارد های W3Schools رو داره.
http://www.w3schools.com/appml/2.0.1/appml.js
میتونید اطلاعات Object ها ، فایل ها و دیتابیس رو از این طریق در صفحه نشون بدید و حتی صفحه HTML خودتونو داینامیک کنید.
برای استفاده از فقط کافیه اطلاعات رو به فرمت json تبدیل کنید و اونو به AppMl بدید.
بریم سراغ روش کار
1-اول همونطور که گفتم باید اطلاعاتی که میخواید نمایش بدید و به فرمت Json باشه رو ایجاد کنید یا از جایی بخونید که میتونه یک فایل، یک Object و ... باشه
حالت اول، یک فایل اسکریپت: فرض کنید اطلاعات زیر در یک فایل به نام customers.js ذخیره شده
{
"records":[
{"CustomerName":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"},
{"CustomerName":"Bottom-Dollar Marketse","City":"Tsawassen","Country":"Canada"},
{"CustomerName":"Cactus Comidas para llevar","City":"Buenos Aires","Country":"Argentina"},
{"CustomerName":"Centro comercial Moctezuma","City":"México D.F.","Country":"Mexico"},
{"CustomerName":"Chop-suey Chinese","City":"Bern","Country":"Switzerland"},
{"CustomerName":"Comércio Mineiro","City":"São Paulo","Country":"Brazil"}
]
}
حالت دوم، آبجکت:
<script>
var dataObj = {
"records":[
{"CustomerName":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"},
{"CustomerName":"Bottom-Dollar Marketse","City":"Tsawassen","Country":"Canada"},
{"CustomerName":"Cactus Comidas para llevar","City":"Buenos Aires","Country":"Argentina"},
{"CustomerName":"Centro comercial Moctezuma","City":"México D.F.","Country":"Mexico"},
{"CustomerName":"Chop-suey Chinese","City":"Bern","Country":"Switzerland"},
{"CustomerName":"Comércio Mineiro","City":"São Paulo","Country":"Brazil"}
]};
</script>
حالت سوم، یک صفحه ASP.NET که تمام کد های HTML اون حذف شده و توسط کد اطلاعاتی که ار دیتابیس خونده شده به فرمت بالا Response.Write بشه.
(من اینطور کار میکنم که اطلاعات رو میخونم و داخل DataTable میریزم بعد اونو به فرمت Json تبدیل می کنم)
مثلا آدرس صفحه من اینه: customers.aspx و کد داخل اون:
public partial class appMl_category : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
DataTable dt = ClassPortal.DataTableAction("SP_Select_costomers");
Response.Write("{\"records\":" + ClassPortal.ConvertDataTableTojSonString(dt) + "}");
}
}
این هم متد ConvertDataTableTojSonString که در ClassPortal.cs قرار دادم برای تبدلی دیتا تیبل به جیسان:
public static String ConvertDataTableTojSonString(DataTable dataTable)
{
System.Web.Script.Serialization.JavaScriptSerializ er serializer =
new System.Web.Script.Serialization.JavaScriptSerializ er();
List<Dictionary<String, Object>> tableRows = new List<Dictionary<String, Object>>();
Dictionary<String, Object> row;
foreach (DataRow dr in dataTable.Rows)
{
row = new Dictionary<String, Object>();
foreach (DataColumn col in dataTable.Columns)
{
row.Add(col.ColumnName, dr[col]);
}
tableRows.Add(row);
}
return serializer.Serialize(tableRows);
}
- حالا برای نمایش این اطلاعات:
اگر اطلاعات به روش اول داخل فایل customer.js باشه
<!DOCTYPE html>
<html lang="en-US">
<title>Customers</title>
<link rel="stylesheet" href="style.css">
<script src="http://www.w3schools.com/appml/2.0.1/appml.js"></script>
<body>
<h1>Customers</h1>
<table appml-data="customers.js">
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr appml-repeat="records">
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
</body>
</html>
اگر به روش دوم از Object خونده بشه:
<table appml-data="dataObj">
…
و اگر به روش سوم صفحه ASPX باشه:
<table appml-data="customers.aspx">
...
مزیت حالت سوم اینه که با
QueryString
میتونید خروجی های متفاوتی داشته باشید
حالا میریم سراغ توضیح کد ها:
appml-data: مقداری که به این مشخصه اختصاص داده میشه منبع اطلاعاتیه که میخواید نمایش بدید و همونطور که گفتم میتونه حالتهای مختلف داشته باشه
اطلاعات خونده شده فقط در همون بلاکی که اختصاص داده شده قابل دسترسی و استفادس
appml-repeat: مقداری که باید با این مشخصه اختصاص بدید نام بلوک داده هاست
{
"records":[
{"CustomerName":"A…
این بلوک مثل Repeater عمل میکنه و کدهای داخل اون برای هر رکورد تکرار میشه.
این تاپیک رو دنبال کنید...