var data = context.Tabel1.Select( p => new { p.Date1, p.Comment, p.Cost, p.UserId, }).FirstOrDefault(p.UserId == UserId);
<script type="text/ng-template" id="menu"> {{item.caption}} -- <b>{{level}}</b> <ul ng-if="item.child.length > 0"> <li id="{{item.caption}}" ng-finish-render="doWork()" ng-repeat="item in item.child" ng-include="'menu'" ng-init="level = level + 1"></li> </ul> </script>
<div class="well"> <ul> <li id="{{item.caption}}" ng-repeat="item in data" ng-include="'menu'" ng-init="level = level + 1" ng-finish-render="doWork()"></li> </ul> </div>
$scope.doWork = function(){ console.log($('#item2_1')); } $scope.level = 0; $scope.data = [ { caption:'root', child:[ { caption:'item1', child:[{ caption:'item1_1', child:[{ caption:'item1_1_1' }] },{ caption:'item1_1' }] }, { caption:'item2', child:[{ caption:'item2_1', child:[{ caption:'item2_1_1' }] }] } ] } ];
چندی پیش در سایت جاری چند مقاله خوب توسط یکی از دوستان درباره Qunit منتشر شد. Qunit یک ابزار قدرتمند و مناسب برای تست کدهای جاوااسکریپت است و در اثبات صحت این گفته همین کافیست که بدانیم برای تست کدهای نوشته شده در پروژههای متن بازی هم چون Backbone.Js و JQuery از این فریم ورک استفاده شده است. اما به احتمال قوی در ذهن شما این سوال مطرح شده است که خب! در صورت آشنایی با Qunit چه نیاز به یادگیری Jasmine یا خدای نکرده Mocha و FuncUnit است؟ هدف صرفا معرفی یک ابزار غیر برای تست کد است نه مقایسه و نتیجه گیری برای تعیین میزان برتری این ابزارها. اصولا مهمترین دلیل برای انتخاب، علاوه بر امکانات و انعطاف پذیری، فاکتور راحتی و آسان بودن در هنگام استفاده است که به صورت مستقیم به شما و تیم توسعه نرم افزار بستگی دارد.
اما به عنوان توسعه دهنده نرم افزار که قرار است از این ابزار استفاده کنیم بهتر است با تفاوتها و شباهتهای مهم این دو فریم ورک آشنا باشیم:
»Jasmine یک فریم ورک تست کدهای جاوا اسکریپ بر مبنای Behavior-Driven Development است در حالی که Qunit بر مبنای Test-Driven Development است و همین مسئله مهمترین تفاوت بین این دو فریم ورک میباشد.
»اگر قصد دارید که از Qunit نیز به روش BDD استفاده نمایید باید از ترکیب Pavlov به همراه Qunit استفاده کنید.
»Jasmine از مباحث مربوط به Spies و Mocking به خوبی پشتیبانی میکند ولی این امکان به صورت توکار در Qunit فراهم نیست. برای اینکه بتوانیم این مفاهیم را در Qunit پیاده سازی کنیم باید از فریم ورکهای دیگر نظیر SinonJS به همراه Qunit استفاده کنیم.
»هر دو فریم ورک بالا به سادگی و راحتی کار معروف هستند
»تمام موارد مربوط به الگوهای Matching در هر دو فریم ورک به خوبی تعبیه شده است
» هر دو فریم ورک بالا از مباحث مربوط به Asynchronous Testing برای تست کدهای Ajax ای به خوبی پشتیبانی میکنند.
بررسی چند مفهوم
قبل از شروع، بهتر است که با چند مفهوم کلی و در عین حال مهم این فریم ورک آشنا شویم
describe('JavaScript addition operator', function () { it('adds two numbers together', function () { expect(1 + 2).toEqual(3); }); });
در تابع it کد بالا شما میتوانید کدهای مربوط بدنه توابع تست خود را بنویسید. برای پیاده سازی Assert در توابع تست مفهوم expectationها وجود دارد. در واقع expect برای بررسی مقادیر حقیقی با مقادیر مورد انتظار مورد استفاده قرار میگیرد و شامل مقادیر true یا false خواهد بود.
برای Setup و Teardown توابع تست خود باید از توابع beforeEach و afterEach که بدین منظور تعبیه شده اند استفاده کنید.
describe("A spec (with setup and tear-down)", function() { var foo; beforeEach(function() { foo = 0; foo += 1; }); afterEach(function() { foo = 0; }); it("is just a function, so it can contain any code", function() { expect(foo).toEqual(1); }); it("can have more than one expectation", function() { expect(foo).toEqual(1); expect(true).toEqual(true); }); });
اگر در کد تست خود قصد دارید که یک تابع describe یا it را غیر فعال کنید کافیست یک x به ابتدای آنها اضافه کنید و دیگر نیاز به هیچ کار اضافه دیگری برای comment کردن کد نیست.
xdescribe("A spec", function() { var foo; beforeEach(function() { foo = 0; foo += 1; }); xit("is just a function, so it can contain any code", function() { expect(foo).toEqual(1); }); });
درادامه قصد پیاده سازی یک مثال را با استفاده از Jasmine و RequireJs در پروژه Asp.Net MVC دارم.
- فولدر lib شامل فایلها کدهای Jasmine برای setup و tear down و spice و تست کدهای شما میباشد.
- فایل specRunner.html به واقع یک فایل برای نمایش فایلهای تست و همچنین نمایش نتیجه تست است.
- فولدر spec نیز شامل کدهای Jasmine برای کمک به نوشتن تست میباشد.
در این مثال قصد داریم فایلهای player.js و song.js که به عنوان نمونه به همراه این فریم ورک قرار دارد را در قالب یک پروژه MVC به همراه RequireJs، تست نماییم. در نتیجه این فایلها را از فولدر src انتخاب نمایید و آنها را در قسمت Scripts پروژه اصلی خود کپی کنید(ابتدا بک پوشه به نام App بسازید و فایلها را در آن قرار دهید)
برای استفاده از requireJs باید دستور define را در ابتدا این فایلها اضافه نماییم. در نتیجه فایلهای Player.js و Song.js را باز کنید و تغییرات زیر را در ابتدای این فایلها اعمال نمایید.
Song.js
define(function () { function Song() { } Song.prototype.persistFavoriteStatus = function (value) { // something complicated throw new Error("not yet implemented"); }; });
define(function () { function Player() { } Player.prototype.play = function (song) { this.currentlyPlayingSong = song; this.isPlaying = true; }; Player.prototype.pause = function () { this.isPlaying = false; }; Player.prototype.resume = function () { if (this.isPlaying) { throw new Error("song is already playing"); } this.isPlaying = true; }; Player.prototype.makeFavorite = function () { this.currentlyPlayingSong.persistFavoriteStatus(true); }; });
baseUrl در پیکر بندی requireJs به مسیر فایلهای پروژه که در پروژه اصلی MVC قرار دارد اشاره میکند. paths برای تعیین مسیر فایلهای تست که در پوشه spec در پروژه تست قرار دارد اشاره میکند. اگر دقت کرده باشید به دلیل اینگه تگهای script مربوط به لود فایلهای SpecHelper.js و PlayerSpec.js به صورت comment در آمده اند در نتیجه این فایلها لود نخواهند شد و خروجی مورد نظر مشاهده نمیشود. در این جا باید از مکانیزم AMD موجود در RequireJs استفاده نماییم و فایلهای مربوطه را لود کنیم. برای این کار نیاز به اضافه کردن دستور require در ابتدای تگ script به صورت زیر در این فایل است. در نتیجه فایلهای PlayerSpec و SpecHelper نیز توسط RequireJs لود خواهند شد.
نیاز به یک تغییر کوچک دیگر نیز وجود دارد. فایل PlayerSpec را باز نمایید و وابستگی فایلهای آن را تعیین نمایید. از آن جا که این فایل برای تست فایلهای Player , Song ایجاد شده است در نتیجه باید از define برای تعیین این وابستگیها استفاده نماییم.
یادآوری:
»دستور describe در فایل بالا برای تعریف تابع تست است. همان طور که میبینید بک نام به آن داده میشود به همراه بدنه تابع تست.
»دستور beforeEach برای آماده سازی مواردی است که قصد داریم در تست مورد استفاده قرار گیرند. همانند متدهای Setup در UnitTest.
» دستور expect نیز معادل Assert در UnitTest است و برای بررسی صحت عملکرد تست نوشته میشود.
اگر
فایل SpecRunner.html را دوباره در مرورگر خود باز نمایید تصویر زیر را
مشاهده خواهید کرد که به عنوان موفقیت آمیز بودن پیکر بندی پروژه و تستهای آن میباشد.
آموزش مقدماتی jQuery
روز 1 : مشاهده سایت اصلی، دریافت
Day 1: Downloading the Library
روز 2 : مشاهده سایت اصلی، دریافت
Day 2: Fade, Slide, and Show Methods
روز 3 : مشاهده سایت اصلی، دریافت
Day 3: The Animate Method
روز 4 : مشاهده سایت اصلی، دریافت
Day 4: Advanced Selectors
روز 5 : مشاهده سایت اصلی، دریافت
Day 5: Creating and Removing Elements
روز 6 : مشاهده سایت اصلی، دریافت
Day 6: The toggle() and toggleClass() Methods
روز 7 : مشاهده سایت اصلی، دریافت
Day 7: The hover() Methods
روز 8 : مشاهده سایت اصلی، دریافت
Day 8: User Request - Image Slides
روز 9 : مشاهده سایت اصلی، دریافت
Day 9: Resizing Text
روز 10 : مشاهده سایت اصلی، دریافت
Day 10: Intro to AJAX: Using the Load Method
روز 11 : مشاهده سایت اصلی، دریافت
Day 11: Fun Image Hovering
روز 12 : مشاهده سایت اصلی، دریافت
Day 12: Advanced Tooltips: Part 1
روز 13 : مشاهده سایت اصلی، دریافت
Day 13: Submitting Information to a Database Asynchronously
جدول HTML و JQuery
آپدیت 2 ویژوال استودیو 2015
فایل sdksetup.exe را باز کنید (با برنامه 7zip قابل گشودن است)، فایل 0 آن (0 نام فایل است)، دراصل یک فایل xml است که حاوی لیست بستههای msi و cab ایی هست که باید از اینترنت دریافت شوند. برای مثال در این فایل XML چنین بستهای ذکر شده: WPTx64-x86_en-us.msi
آدرس دریافت آن انتهای لینک زیر خواهد بود:
http://download.microsoft.com/download/E/1/F/E1F1E61E-F3C6-4420-A916-FB7C47FBC89E/standalonesdk/Installers/
یعنی
http://download.microsoft.com/download/E/1/F/E1F1E61E-F3C6-4420-A916-FB7C47FBC89E/standalonesdk/Installers/WPTx64-x86_en-us.msi
و ... 141 مورد دیگر!
- کش کرنل به صورت پیش فرض بر روی صفحات ایستا فعال شده است؛ نه برای صفحاتی با محتوای پویا که البته این مورد قابل تغییر است که نحوه این تغییر را پایینتر توضیح خواهیم داد.
- اگر آدرس درخواستی شامل کوئری باشد صفحه کش نخواهد شد: http://www.site.info/postarchive.htm?id=25
- برای پاسخ ازمکانیزمهای فشرده سازی پویا استفاده شده باشد مثل gzip کش نخواهد شد
- صفحه درخواست شده صفحه اصلی سایت باشد کش نخواهد شد : http://www.dotnettip.info ولی اگر درخواست بدین صورت باشه http://www.domain.com/default.htm کش خواهد کرد.
- درخواست به صورت ناشناس anonymous نباشد و نیاز به authentication داشته باشد کش نخواهد شد (یعنی در هدر شامل گزینه authorization میباشد).
- درخواست باید از نوع نسخه http1 به بعد باشد.
- اگر درخواست شامل Entity-body باشد کش نخواهد کرد.
- درخواست شامل If-Range/Range header باشد کش نمیشود.
- کل حجم response بییشتر از اندازه تعیین شده باشد کش نخواهد گردید، این اندازه در کلید ریجستری UriMaxUriBytes قرار دارد. اطلاعات بیشتر
- اندازه هدر بیشتر از اندازه تعیین شده باشد که عموما اندازه تعیین شده یک کیلو بایت است.
- کش پر باشد، کش انجام نخواهد گرفت.
برای تعیین مقدار سایز کش response که در بالا اشاره کردیم میتوانید در همان پنجره، گزینه edit feature settings را انتخاب کنید.
این قسمت از مطلب که به نقل از مقاله آقای Karol Jarkovsky در این آدرس است یک سری تست هایی با نرم افزار(Web Capacity Analysis Tool (WCAT گرفته است که به نتایج زیر دست پیدا کرده است:
ASP.NET Web API - قسمت اول
فعال سازی عملیات CRUD در Kendo UI Grid
خلاصهاش به این صورت است:
- ابتدا رخداد error مربوط به data source را باید مدیریت کرد:
var dataSource = new kendo.data.DataSource({ // ... error: function (e) { window.SalesHub.OrderDetails_Error(e); }, // ... });
window.SalesHub.OrderDetails_Error = function(args) { if (args.errors) { var grid = $("#orderDetailsGrid").data("kendoGrid"); var validationTemplate = kendo.template($("#orderDetailsValidationMessageTemplate").html()); grid.one("dataBinding", function(e) { e.preventDefault(); $.each(args.errors, function(propertyName) { var renderedTemplate = validationTemplate({ field: propertyName, messages: this.errors }); grid.editable.element.find(".errors").append(renderedTemplate); }); }); } };
<script type="text/x-kendo-template" id="orderDetailsValidationMessageTemplate"> # if (messages.length) { # <li>#=field# <ul> # for (var i = 0; i < messages.length; ++i) { # <li>#= messages[i] #</li> # } # </ul> </li> # } # </script>
راستش من منوهای چند سطحی پویا را برای bootstrap navbar نوشتم. الگوریتمش را مجبور شدم به صورت بازگشتی بنویسم.اگر کسی میتونه به صورت غیر بازگشتی بگه ممنونش میشم.
این کد یه partialpage برای navbar هست که هرکسی برای bootstrap به راحتی میتونه استفاده کنه.
@model IEnumerable<DomainClasses.Page> @helper ShowNavBar(IEnumerable<DomainClasses.Page> pages) { foreach (var page in pages) { if (page != null) { if (page.Children.Count == 0) { <text><li><a tabindex="-1" href="#">@page.Title</a></li></text> } if (page.Children.Count > 0 && page.Parent == null) { <text><li class="dropdown"><a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">@page.Title<b class="caret"></b></a><ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"><li><a tabindex="-1" href="#">@page.Title</a></li></text> @ShowNavBar(page.Children) @:</ul></li> } if (page.Children.Count > 0 && page.Parent != null) { <text><li class="dropdown-submenu"><a tabindex="-1" href="#">@page.Title</a><ul class="dropdown-menu"></text> @ShowNavBar(page.Children) @:</ul></li> } } } } <div class="navbar" style="margin-bottom: 10px;"> <div class="navbar-inner"> <a class="brand" href="www.google.com">IT-EBOOK</a> <ul class="nav"> <li class="active"><a href="#">خانه</a></li> <li><a href="#">ورود</a></li> @ShowNavBar(Model) <li><a href="#">ارتباط با ما</a></li> </ul> <div class="input-append pull-left visible-desktop" style="margin-top: 5px;"> <input class="span6 search-input" id="Text1" type="text"> <button class="btn btn-primary" type="button">جست و جو</button> <button class="btn btn-info btn-advanced-search" type="button">پیشرفته</button> </div> </div> </div>
الان تنها مشکلم اینه که فیلدهای اضافی هم کوئری گرفته میشه.میدونم فیلدهای اضافی(بر اساس مدلی که ذکر کردم) را چگونه با استفاده از select حذف کنم اما توی viewmodel نمیدونم چه جوری children را از اطلاعات پر کنم؟
ممنون