آیا استفاده از این فریمورک باعث این میشود که دیگر نیازی به JQuery نباشد؟ و یا باز کمبود هایی دارد که به استفاده از JQuery نیاز باشد؟
تشکر
@(Html.Kendo.Grid(Of Models.vProject).Name("ProjectsGrid") _ .Columns(Sub(column) With column .Bound(Function(p) p.ProjectId).Hidden() .Bound(Function(p) p.Supervisor).Title("ناظر") .Bound(Function(p) p.MapNumber).Title("شماره نقشه") .Bound(Function(p) p.MapCode).Title("کد نقشه") .Bound(Function(p) p.NewStructureArea).Title("متراژ") .Bound(Function(p) p.NumberOfFloors).Title("تعداد طبقات") .Bound(Function(p) p.InsuranceName).Title("بیمه") End With End Sub).Pageable(Sub(p) p.Enabled(True) p.Info(True) p.PageSizes(True) p.Messages(Sub(m) m.Display("{0} - {1} از {2} رکورد") m.Empty("رکوردی برای نمایش وجود ندارد") m.Of("از") m.Page("صفحه") m.ItemsPerPage("رکورد در هر صفحه") m.Refresh("بروزرسانی") End Sub) End Sub).Selectable(Sub(s) s.Enabled(True).Mode(GridSelectionMode.Single).Type(GridSelectionType.Row)) _ .DataSource(Sub(ds) ds.Ajax.ServerOperation(True).Read("GetProjects", "Home") _ .Model(Sub(m) m.Id(Function(modelId) modelId.ProjectId))) )
<HttpPost> Function GetProjects(<DataSourceRequest> request As DataSourceRequest) As JsonResult Return Json(db.vProjects.ToDataSourceResult(request)) End Function
SELECT TOP (5) [Extent1].[ProjectId] AS [ProjectId], [Extent1].[Supervisor] AS [Supervisor], [Extent1].[MapCode] AS [MapCode], [Extent1].[MapNumber] AS [MapNumber], [Extent1].[EmployerName] AS [EmployerName], [Extent1].[InsuranceName] AS [InsuranceName], [Extent1].[NewStructureArea] AS [NewStructureArea], [Extent1].[NumberOfFloors] AS [NumberOfFloors] FROM (SELECT [Extent1].[ProjectId] AS [ProjectId], [Extent1].[Supervisor] AS [Supervisor], [Extent1].[MapCode] AS [MapCode], [Extent1].[MapNumber] AS [MapNumber], [Extent1].[EmployerName] AS [EmployerName], [Extent1].[InsuranceName] AS [InsuranceName], [Extent1].[NewStructureArea] AS [NewStructureArea], [Extent1].[NumberOfFloors] AS [NumberOfFloors], row_number() OVER (ORDER BY [Extent1].[ProjectId] ASC) AS [row_number] FROM (SELECT [vProject].[ProjectId] AS [ProjectId], [vProject].[Supervisor] AS [Supervisor], [vProject].[MapCode] AS [MapCode], [vProject].[MapNumber] AS [MapNumber], [vProject].[EmployerName] AS [EmployerName], [vProject].[InsuranceName] AS [InsuranceName], [vProject].[NewStructureArea] AS [NewStructureArea], [vProject].[NumberOfFloors] AS [NumberOfFloors] FROM [dbo].[vProject] AS [vProject]) AS [Extent1]) AS [Extent1] WHERE [Extent1].[row_number] > 5 ORDER BY [Extent1].[ProjectId] ASC
مدیریت تصاویر کالا
در این قسمت امکان آپلود همزمان چندین فایل به همراه پیش نمایش آنها وجود دارد. همچنین امکان کشیدن و رها کردن برای تغییر ترتیب چیدمان عکسها نیز مهیا است.( تصویر اول به عنوان کاور کالا در نظر گرفته میشود.)
قابلیتهای دیگر:
- مدیریت تصاویر اسلایدشو و تغییر ترتیب آنها از طریق کشیدن و رها کردن (drag & drop)
- تعریف برگه و تغییر ترتیب نمایش آنها از طریق کشیدن و رها کردن
- امکان ارسال پست
- تعریف دسته بندی
- مدیریت کاربران
- تعریف تنظیمات سایت
- نمایش کالا و پستهای مشابه
کارهایی که باید انجام شود:
- پیاده سازی سبد خرید و خرید آنلاین
تصویر پنل مدیریت
تصویر صفحهی اصلی:
فناوری یا کتابخانه | توضیحات | مقالات مرتبط |
Bootstrap 3.x | فریم ورک پایه ای css سایت | - Bootstrap 3 RTL Theme - Twitter Bootstrap -سازگارسازی کلاسهای اعتبارسنجی Twitter Bootstrap 3 با فرمهای ASP.NET MVC -ساخت قالبهای نمایشی و ادیتور دکمه سه وضعیتی سازگار با Twitter bootstrap در ASP.NET MVC -نمایش اخطارها و پیامهای بوت استرپ به کمک TempData در ASP.NET MVC |
AdminLTE | قالب مدیریت سایت | - نسخه راستچین شده AdminLTE 2.2.1 |
Animate.css | انیمیشنهای css3 سایت | |
Font Awesome | پک آیکونهای برداری | |
Awesome Bootstrap Checkbox | زیبا سازی چک باکس ها | |
فونت فارسی وزیر | قلم فارسی | |
مدیریت تصاویر کالا
در این قسمت امکان آپلود همزمان چندین فایل به همراه پیش نمایش آنها وجود دارد. همچنین امکان کشیدن و رها کردن برای تغییر ترتیب چیدمان عکسها نیز مهیا است.( تصویر اول به عنوان کاور کالا در نظر گرفته میشود.)
قابلیتهای دیگر:
- مدیریت تصاویر اسلایدشو و تغییر ترتیب آنها از طریق کشیدن و رها کردن (drag & drop)
- تعریف برگه و تغییر ترتیب نمایش آنها از طریق کشیدن و رها کردن
- امکان ارسال پست
- تعریف دسته بندی
- مدیریت کاربران
- تعریف تنظیمات سایت
- نمایش کالا و پستهای مشابه
تصویر پنل مدیریت
تصویر صفحهی اصلی:
فریمورکهای CSS:
فناوری یا کتابخانه | توضیحات | مقالات مرتبط |
Bootstrap 3.x | فریم ورک پایه ای css سایت | - Bootstrap 3 RTL Theme - Twitter Bootstrap -سازگارسازی کلاسهای اعتبارسنجی Twitter Bootstrap 3 با فرمهای ASP.NET MVC -ساخت قالبهای نمایشی و ادیتور دکمه سه وضعیتی سازگار با Twitter bootstrap در ASP.NET MVC -نمایش اخطارها و پیامهای بوت استرپ به کمک TempData در ASP.NET MVC |
AdminLTE | قالب مدیریت سایت | - نسخه راستچین شده AdminLTE 2.2.1 |
Animate.css | انیمیشنهای css3 سایت | |
Font Awesome | پک آیکونهای برداری | |
Awesome Bootstrap Checkbox | زیبا سازی چک باکس ها | |
فونت فارسی وزیر | قلم فارسی | |
UserDialogs.Init(this); // Before Forms.Init
containerBuilder.RegisterInstance(UserDialogs.Instance);
public IUserDialogs UserDialogs { get; set; } public async Task Login() { if (string.IsNullOrWhiteSpace(UserName) || string.IsNullOrWhiteSpace(Password)) await UserDialogs.AlertAsync(message: "Please provide UserName and Password!", title: ")-:", okText: "Ok!"); }
using (UserDialogs.Loading("Logging in...", maskType: MaskType.Black)) { // Login implementation ... await Task.Delay(TimeSpan.FromSeconds(3)); }
await NavigationService.NavigateAsync("/Login", animated: false);
await NavigationService.NavigateAsync("/Nav/HelloWorld");
3- ممکن است بخواهید هنگام رفتن از صفحهای به صفحه دیگر، پارامتر نیز ارسال کنید. اگر برای مثال صفحه اول لیست محصولات را نمایش میدهد و با زدن روی هر محصول قرار است به صفحهای برویم که جزئیات آن محصول را ببینیم، بهتر است Id آن محصول به صورت پارامتر به صفحه دوم ارسال شود. برای این کار داریم:
await NavigationService.NavigateAsync("ProductDetail", new NavigationParameters { { "productId", productId } });
حال سؤال این است که در صفحه جزئیات یک محصول، چگونه productId را بگیریم؟ فرض کنید دو صفحه ProductsList و ProductDetail را داریم. هر صفحه دارای View و View Model است. در ViewModel مربوط به ProductDetail، یعنی ProductDetailViewModel که از BitViewModelBase ارث بری کردهاست، میتوانیم متد OnNavigatedToAsync را override کنیم. در آنجا به پارامترهای ارسال شده دسترسی داریم:
public async override Task OnNavigatedToAsync(INavigationParameters parameters) { await base.OnNavigatedToAsync(parameters); Guid productId = parameters.GetValue<Guid>("productId"); }
هر ViewModel علاوه بر OnNavigatedTo می تواند دارای OnNavigatedFrom هم باشد که زمانیکه داریم از صفحه مربوطه خارج میشویم، فراخوانی میشود.
4- برای نمایش صفحه به صورت Popup کافی است بجای اینکه View ما یک Content Page باشد، یک PopupPage باشد (برای درک بهتر، فایل IntroView.xaml را در فولدر Views باز کنید).
حتی میتوانید Animation مربوط به باز شدن پاپ آپ را هم کاملا Customize کنید. مثلا زمان باز شدن، از سمت راست صفحه وارد شود و زمان خارج شدن، Fade out شود. باز کردن Popup در Navigation Page معنی نمیدهد، پس با Nav/ در اینجا کاری نداریم. در مثال ما، بعد از لاگین میخواهیم یک صفحه Intro شامل هشدارها و راهنماییهای اولیه را در قالب Popup به کاربر نمایش دهیم. Popupها میتوانند همچون Content Pageها، دارای View Model باشند و مواردی چون OnNavigatedTo، ارسال پارامتر و هر آنچه که گفته شد، در مورد آنها نیز صدق میکند.
5- برای Master/Detail کافی است بجای Nav/HelloWorld/ از MasterDetail/Nav/HelloWorld/ استفاده کنید. این عمل باعث میشود HelloWorld در داخل Navigation Page و Navigation Page داخل Master Detail باز شود. از این سادهتر امکان ندارد!
برای تغییر UI مربوط به Master که از سمت چپ باز میشود، فایل XamAppMasterDetailView.xaml را تغییر دهید.
در قسمت بعدی به جزئیات Binding خواهیم پرداخت.
<div style="direction: rtl"> <a href="#/state1">حالت 1</a> | <a href="#/state2">حالت 2</a> | <a href="#/state3">حالت 3</a> <div ui-view style="font-weight:bold; text-align:center;"></div> </div>
تگ زیر یک دایرکتیو دارد: <br/> <div ng-hello-directive></div>
angular.module('app').lazy.directive('ngHelloDirective', function () { return function (scope, elem, attr) { elem.html('سلام دایرکتیو تنبل!'); }; });
.state('state3', { url: '/state3', templateUrl: 'app/state3.html', resolve: { fileDeps: ['$q', '$rootScope', function ($q, $rootScope) { var deferred = $q.defer(); var deps = ['app/helloDirective.js']; $script(deps, function () { $rootScope.$apply(function () { deferred.resolve(); }); }); return deferred.promise; }] } });
angular.module('moduleOfDirective', []).directive('ngDirectiveName', ...
app = angular.module("app", ['ui.router', 'moduleOfDirective']);
angular.module('app', []).lazy.directive('ngDirectiveName', ...