چه زمانی از Framework استفاده کنیم و چه زمانی از Library
یک خودآموز استثنایی پروژه محور که برنامه نویسان ASP.net یا PHP به راحتی می‌توانند به کمک آن نرم افزارهای SPA یه سینگل پیج اپ تولید کنند که بدون رفرش تمام صفحه بخش‌های مختلف آن آپدیت شود.
Blazor یک چهارچوب UI که توسط تیم asp.net ارائه شده و بر پایه #C و Razor و HTML است که به وسیله WebAssembly اجرا می‌شود.
Blazor فرایند تولید یک اپلیکیشن single-page سریع و زیبا را بصورت فوق العاده‌ای ساده می‌کند.
ASP.NET Identity «بی‌جهت» از متد upper برای تولید کوئری‌های یافتن کاربران استفاده می‌کند. این مورد سبب خواهد شد تا دیگر از index استفاده نگردد. به این دلیل این کار «بی‌جهت» است که واقعا کسی از case sensitive collation در عمل استفاده نمی‌کند و استفاده‌ی از متد upper یک کار اضافی بوده‌است.
خیر. محاسبات آن خودکار است. سایت جاری در ساب دومین www در حال اجرا است. تعاریف مسیریابی آن با حالتیکه این ساب دومین ذکر هم نشود، تفاوتی ندارد. البته به شرطی‌که «نحوه صحیح تولید Url در ASP.NET MVC» را رعایت کرده باشید.
مطلب «نحوه صحیح تولید Url در ASP.NET MVC» را پیگیری کنید (چون هر کدام از نام‌های اکشن متدهای درج شده‌ی در View در حقیقت یک URL هستند و نه صرفا یک نام خالی و اگر نیاز به آدرس صحیح آن‌ها را دارید باید از سیستم مسیریابی، آن‌ها را توسط Url.Action کوئری بگیرید).
- مثال پیوست شده کمی بالاتر یک مثال ASP.NET MVC است.
- Process.Start را حذف کنید؛ نیازی نیست.
- به قسمت new FileStream آن دقت کنید. اینجا مسیر یک فایل را می‌شود مشخص کرد. فایل نهایی تولید شده در این مسیر نوشته می‌شود. از آن مسیر در برنامه‌های وب و ویندوز می‌توان استفاده کرد.
- Process.Start را حذف کنید؛ نیازی نیست.
- به قسمت new FileStream آن دقت کنید. اینجا مسیر یک فایل را می‌شود مشخص کرد. فایل نهایی تولید شده در این مسیر نوشته می‌شود. از آن مسیر در برنامه‌های وب و ویندوز می‌توان استفاده کرد.
به ASP.NET MVC کوچ کنید. از روی مدل شما فرم‌های insert/delete/update به همراه اعتبار سنجی و غیره رو همه رو یکجا با ابزارهای توکاری که داره تولید می‌کنه. حتی مقادیر وارد شده توسط کاربر رو هم به صورت خودکار به فیلدهای مدل انتساب میده (model binding).
در بخش پیشین کلیات کتابخانه‌ی Restangular را بررسی کردیم. در این بخش قصد داریم تا در طی یک پروژه، امکانات و قابلیت‌های بی‌نظیر این سرویس را در یک پروژه‌ی واقعی مشاهده کنیم.
محتویات فایل app.js را مشاهده میکنید. در ادامه درباره‌ی این قسمت بیشتر صحبت می‌کنیم.
و در نهایت در پوشه‌ی Scripts فایل‌های سرویس Restangular را قرار می‌دهیم.
این تمامی آن چیزی است که ما برای دریافت لیست تمامی کتابها انجام داده‌ایم. به همین سادگی! در خط اول از متد all که در بخش قبل توضیح مختصری راجع به آن داده بودم برای دریافت لیست تمامی کتابها استفاده کردم که پارامتر درون آن آدرس Web Api است. البته همانطور که می‌دانید در ASP.NET Web Api ما همیشه به base address یک api نیز اضافه می‌کنیم. حال اینکه چرا api در اینجا نیامده در ادامه و در بخش تنظیمات کلی Restangular توضیح می‌دهم. در خط دوم نیز از اشاره‌گر resources متد getList را فراخوانی کرده و لیست کتابها را در response دریافت می‌کنیم.
ما یک متد با نام add ایجاد کرده‌ایم که در سمت View توسط دایرکتیو ng-click آن را فراخوانی می‌کنیم.
تمامی آنچه که گفته شد تنها بخشی از قابلیت‌های شگفت انگیز این افزونه بود. امیدوارم که مطلب مفید واقع شده باشد. سورس این پروژه را می‌توانید از لینک زیر دریافت کنید.
کلیات پروژه
در این پروژه قصد داریم تا لیست کتابهای یک کتابخانه را نمایش دهیم. این کتابها قابلیت ویرایش نام دارند و همچنین شما می‌توانید کتابهای جدیدی را به لیست کتابها اضافه نمایید. تصویر زیر خروجی این پروژه است:
پایگاه داده‌ی برنامه با نام LibDb درون پوشه‌ی app_data قرار داده شده‌است. این پایگاه داده تنها دارای یک جدول است؛ با نام Books که دیاگرام آن را در شکل زیر مشاهده میکنید:
پیاده سازی
در ابتدا یک پروژه‌ی Empty را با رفرنس web API ایجاد می‌کنیم. حال درون فایل WebApiConfig.cs تکه کد زیر را اضافه می‌کنیم. این تکه کد فیلدها و آبجکت‌هایی را که از سمت سرور بازگشت داده می‌شوند، به صورت camelCase تبدیل می‌کند.
var jsonFormatter = config.Formatters.OfType<JsonMediaTypeFormatter>().First(); jsonFormatter.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();
در ادامه مدل edmx را ساخته و پس از آن Books Web Api را درون پوشه‌ی کنترلر ایجاد می‌کنیم. این کنترلر به صورت Default web Api Scaffold ساخته شده است و به دلیل اینکه به بحث ما مرتبط نیست؛ از توضیح بیشتر آن می‌گذریم.
حال پوشه‌ای را با نام app برای نگه داری فایل‌های AngularJs اضافه می‌کنیم و درون آن فایل app.js را ایجاد می‌کنیم:var angularExample = angular.module('angularexample', ["restangular"])
angularExample.config(["RestangularProvider", function (RestangularProvider) {
//RestangularProvider.setRestangularFields({
// id: "id"
//});
RestangularProvider.setBaseUrl('/api');
}]);
angularExample.controller("MainCtrl", ["Restangular", "$scope", function (Restangular, $scope) {
var resource = Restangular.all('books');
resource.getList().then(function (response) {
$scope.books = response;
});
$scope.add = function () {
resource.post($scope.newBook).then(function (newResource) {
$scope.books.push(newResource);
})
}
}]); حال در روت پروژه فایل index.html را ایجاد می‌کنیم:
<!DOCTYPE html>
<html ng-app="angularexample" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Rest Angular Sample</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<script src="http://cdn.jsdelivr.net/underscorejs/1.5.1/underscore-min.js"></script>
<script src="/Scripts/restangular.min.js"></script>
<script src="/app/app.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
<div ng-repeat="item in books">
name is: {{item.name}}<br />
change name: <input type="text" ng-model="item.name" /><button type="submit" ng-click="item.put();">update</button>
</div>
<div>
add new: <br />
<input type="text" ng-model="newBook.name" /><button type="submit" ng-click="add()">add</button>
</div>
</div>
</body> تا به اینجای کار تمامی کارهای مورد نیاز تشکیل پروژه را انجام داده‌ایم. حال به بررسی بیشتر سرویس‌های این پروژه می‌پردازیم؛ یعنی کدهای درون فایل app.js.
ببینیم که برای دریافت لیست تمامی کتابها، ما چه کارهایی را انجام داده‌ایم! به تکه کد زیر دقت کنید:
var resource = Restangular.all('books');
resource.getList().then(function (response) {
$scope.books = response;
}); پس از آن می‌خواهیم ببینیم که عملیات ایجاد یک کتاب جدید چگونه انجام می‌گردد. تکه کد زیر این عملیات را انجام می‌دهد:
$scope.add = function () {
resource.post($scope.newBook).then(function (newResource) {
$scope.books.push(newResource);
})
} همانطور که مشاهده میکنید درون app.js متدی برای update موارد قبلی نیست. بیایید سری به View بزنیم. به المنت div زیر توجه کنید. همانطور که می‌بینید تمامی عملیات update با یک دستور ساده item.put حل و فصل شده.
<div ng-repeat="item in books">
name is: {{item.name}}<br />
change name: <input type="text" ng-model="item.name" /><button type="submit" ng-click="item.put();">update</button>
</div> سورس پروژه: RestangularSample.rar
سلام. من کدهای زیر رو نوشتم اما دیلیت خطی ( ردیفی) برام کار نمی‌کنه و اررو 500 میده:
$("#JQGrid1").jqGrid({
url: "/manager/Products/OnProductDataRequested",
editurl: '/manager/Products/EditProductData',
mtype: "GET",
datatype: "json",
page: 1,
sortname: 'Priority',
sortorder: "desc",
viewrecords: true,
jsonReader: { id: "Id" },
prmNames: { id: "Id" },
colNames: ["Id","خلاصه","توضیح خلاصه","قیمت","قیمت با تخفیف","درصد کارمزد سایت","آستانه هشدار موجودی","محتوا", "عنوان","فروشگاه","گروه","تعداد موجودی", "اولویت","محصولات مکمل","تصاویر","مقادیر مشخصه محصول","قیمت","نظرات", "فعال","ویژه","موجود","برند","عملیات درجا","عملیات کامل"],
colModel: [
{ key: true, width: 50, name: "Id", hidden: true, search: false },
{
editable: true, width: 10, name: "Abstract", search: true, stype: "text", editable: true,
hidden: true,
editrules: { edithidden: true }
},
{
editable: true, width: 10, name: "AbstractDescription", search: true, stype: "text", editable: true,
hidden: true,
editrules: { edithidden: true }
},
{
editable: true, width: 10, name: "Value", search: true, stype: "text", editable: true,
hidden: true,
editrules: { edithidden: true }
},
{
editable: true, width: 10, name: "Discount", search: true, stype: "text", editable: true,
hidden: true,
editrules: { edithidden: true }
},
{
editable: true, width: 10, name: "SiteWagePercentage", search: true, stype: "text", editable: true,
hidden: true,
editrules: { edithidden: true }
},
{
editable: true, width: 10, name: "InventoryAlertLimit", search: true, stype: "text", editable: true,
hidden: true,
editrules: { edithidden: true }
},
{
editable: true, width: 10, name: "Context", search: true, stype: "text", editable: true,
hidden: true,
editrules: { edithidden: true }
},
{
editable: true, width: 150, name: "Title", search: true, stype: "text",
searchoptions: { "sopt": ["bw", "eq"] }
},
{
name: "shopTitle", align: 'center', viewable: true, editrules: { edithidden: true },
search: true,
editable: true, stype: 'select',
edittype: 'select',
searchoptions: {
sopt: ["eq", "ne"],
dataUrl: "/manager/Products/Getshop/", buildSelect: function (data) {
var response, s = '<select>', i;
response = jQuery.parseJSON(data);
if (response && response.length) {
$.each(response, function (i) {
s += '<option value="' + this.shId + '">' + this.shTitle + '</option>';
});
}
return s + '</select>';
},
},
editoptions: {
dataUrl: "/manager/Products/Getshop",
buildSelect: function (data) {
var response, s = '<select>', i;
response = jQuery.parseJSON(data);
if (response && response.length) {
$.each(response, function (i) {
s += '<option value="' + this.shId + '">' + this.shTitle + '</option>';
});
}
return s + '</select>';
},
}
},
{
editable: true, name: "groupTitle", search: true, stype: "select"
, editrules: { edithidden: true },
search: true,
edittype: 'select',
editoptions: {
dataUrl: "/manager/Products/GetGroups",
buildSelect: function (data) {
var response, s = '<select>', i;
response = jQuery.parseJSON(data);
if (response && response.length) {
$.each(response, function (i) {
s += '<option value="' + this.grpId + '">' + this.grpTitle + '</option>';
});
}
return s + '</select>';
},
}
},
{
editable: true, width: 70, name: "AvailableCount", search: true, stype: "number",
searchoptions: { "sopt": ["bw", "eq"] }
},
{
editable: true, width: 50, name: "Priority", search: true, stype: "number",
searchoptions: { "sopt": ["bw", "eq"] }
},
{
editable: false, width: 80, name: "ComplementProducts", search: true, stype: "text",
searchoptions: { "sopt": ["bw", "eq"] }
},
{
editable: false, width: 70, name: "Images", search: true, stype: "text",
searchoptions: { "sopt": ["bw", "eq"] }
},
{
editable: false, width: 100, name: "ProductProperty", search: true, stype: "text",
searchoptions: { "sopt": ["bw", "eq"] }
},
{
editable: false, width: 80, name: "Price", search: true, stype: "text",
searchoptions: { "sopt": ["bw", "eq"] }
},
{
editable: false, width: 80, name: "Comments", search: true, stype: "text",
searchoptions: { "sopt": ["bw", "eq"] }
},
{
editable: true, width: 50, name: "Active", search: true, formatter: 'checkbox', edittype: 'checkbox', editoptions: { value: "True:False" }
, formatoptions: { disabled: false}
},
{
editable: true, width: 80, name: "AmazingOffer", search: true, formatter: 'checkbox', edittype: 'checkbox', editoptions: { value: "True:False" }
, formatoptions: { disabled: false}
},
{
editable: true, width: 80, name: "Available", search: true, formatter: 'checkbox', edittype: 'checkbox', editoptions: { value: "True:False" },
searchoptions: { "sopt": ["bw", "eq"] }, formatoptions: { disabled: false }
},
{
name: 'BrandId', align: 'center', hidden: true, viewable: true, editrules: { edithidden: true },
editable: true, stype: 'select',
edittype: 'select',
editoptions: {
dataUrl: "/manager/Products/GetBrands",
buildSelect: function (data) {
var response, s = '<select>', i;
response = jQuery.parseJSON(data);
if (response && response.length) {
$.each(response, function (i) {
s += '<option value="' + this.brandId + '">' + this.brandTitle + '</option>';
});
}
return s + '</select>';
},
}
},
{
name: "myac", width: 80, fixed: true, sortable: false, resize: false, formatter: 'actions',
formatoptions: { keys: true }
},
{
editable: false, width: 70, name: "FullEdit", search: true, stype: "text",
searchoptions: { "sopt": ["bw", "eq"] }
},
// BLAH, BLAH, BLAH
],
gridComplete: function () {
var ids = jQuery("#JQGrid1").jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var cl = ids[i];
ComplementProducts = "<div class=\"btn-group\"><a class='btn btn-primary' href=/manager/ComplementProducts/Index/" + cl + " }) + '><span class=\"fa fa-shopping-cart\" style='color: white;'></span></a></div>";
Images = "<div class=\"btn-group\"><a class='btn btn-primary' href=/manager/Images/Index/" + cl + " }) + '><span class=\"fa fa-picture-o\" style='color: white;'></span></a></div>";
ProductProperty = "<div class=\"btn-group\"><a class='btn btn-primary' href=/manager/ProductPropertyItems/Index/" + cl + " }) + '><span class=\"fa fa-braille\" style='color: white;'></span></a></div>";
Price = "<div class=\"btn-group\"><a class='btn btn-primary' href=/manager/pricesppitems/Index/" + cl + " }) + '><span class=\"fa fa-line-chart\" style='color: white;'></span></a></div>";
Comments = "<div class=\"btn-group\"><a class='btn btn-primary' href=/manager/Products/Comments/" + cl + " }) + '><span class=\"fa fa-comments\" style='color: white;'></span></a></div>";
FullEdit = "<div class=\"btn-group\"><a class='btn btn-primary' href=/manager/Products/Edit/" + cl + " }) + '><span class=\"fa fa-edit\" style='color: white;'></span></a><a class='btn btn-primary' href=/manager/Products/Details/" + cl + " }) + '><span class=\"fa fa-exclamation-circle\" style='color: white;'></span></a></div>";
jQuery("#JQGrid1").jqGrid('setRowData', ids[i], { ComplementProducts: ComplementProducts, Images: Images, ProductProperty: ProductProperty, Price: Price, Comments: Comments, FullEdit: FullEdit});
}
}, loadComplete: function () {
var activeButton = getColumnIndexByName('Active');
var ids = jQuery("#JQGrid1").jqGrid('getDataIDs'); //id's
$("tbody > tr.jqgrow > td:nth-child(" + (activeButton + 1) + ") > input",
this).click(function (e) {
var rowId = $(e.target).closest("tr").attr("id");
// alert("active clicked " + rowId);
$.ajax({
type: "POST",
url: "/manager/Products/Activate",
data: {
id: rowId
},
dataType: "json"
});
});
var amazingOfferButton = getColumnIndexByName('AmazingOffer');
var ids = jQuery("#JQGrid1").jqGrid('getDataIDs'); //id's
$("tbody > tr.jqgrow > td:nth-child(" + (amazingOfferButton + 1) + ") > input",
this).click(function (e) {
var rowId = $(e.target).closest("tr").attr("id");
$.ajax({
type: "POST",
url: "/manager/Products/ShowInAmazingOffer",
data: {
id: rowId
},
dataType: "json"
});
$('#JQGrid1').trigger('reloadGrid');
});
var availableButton = getColumnIndexByName('Available');
var ids = jQuery("#JQGrid1").jqGrid('getDataIDs'); //id's
$("tbody > tr.jqgrow > td:nth-child(" + (availableButton + 1) + ") > input",
this).click(function (e) {
var rowId = $(e.target).closest("tr").attr("id");
$.ajax({
type: "POST",
url: "/manager/Products/Available",
data: {
id: rowId
},
dataType: "json"
});
$('#JQGrid1').trigger('reloadGrid');
});
},
height: "auto",
caption: "",
viewrecords: true,
rowNum: 20,
direction: "rtl",
pager: jQuery('#JQGrid1_pager'),
rowList: [10, 20, 30, 40],
toppager: true,
jsonReader:
{
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
Id: "0"
},
}).jqGrid('navGrid', '#JQGrid1_pager',
// the buttons to appear on the toolbar of the grid
{ edit: true, add: true, del: true, search: true, refresh: true, view: false, position: "left", cloneToTop: true,searchtext:"جستجو" },
// options for the Edit Dialog
{
width: 450,
editCaption: "ویرایش محصول",
recreateForm: true,
closeAfterEdit: true,
viewPagerButtons: false,
//afterShowForm: populateGroups,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
// Add options
{ url: '/TabMaster/Create', closeAfterAdd: true },
// Delete options
{ url: '/manager/Products/Remove' },
{
zIndex: 100,
caption: "جستجوی محصول",
sopt: ['cn']
}
); 