We finished week 2 of the 9-week boot camp. This week was AngularJS week. We covered building the front-end of a Single Page App with the AngularJS framework. In particular, we covered topics such as client-side routing, making Ajax calls using the $http service and the $route factory, building custom AngularJS services, working with Google Maps, using Angular UI Bootstrap, and uploading files to services such as FilePicker.io.
البته نام اصلی سایت و نام Action از طریق تکه کد زیر از منابع لود میشه و درست نمایش داده میشه
<breadcrumb asp-homepage-title="@localizer["MyApp"]" asp-homepage-url="@Url.Action("Index", "Home", values: new { area = "" })" asp-bootstrap-version="V3" asp-homepage-glyphicon="glyphicon glyphicon-home"></breadcrumb> @localizer["About"]
[BreadCrumb(Title = "Home", UseDefaultRouteUrl = true, Order = 0)] public class HomeController : Controller { }
- با ارائهی نگارش RC، مداخل ذکر شدهی در صفحهی index.html کاهش یافته و به فایل systemjs.config.js منتقل شدهاند.
- با استفاده از فایل systemjs.config.js دیگر نیازی به ذکر متد ({}) System.config در فایل index.html نیست.
- تعاریف فایل main.ts اینبار از مسیر ذیل خوانده میشوند:
/// <reference path="../typings/es6-shim.d.ts" /> import {bootstrap} from '@angular/platform-browser-dynamic';
"scripts": { "postinstall": "typings install" },
استفاده از pjax بجای ajax در ASP.NET MVC
از کمک شما ممنون
بالاخره خطا رو پیدا کردم
The following sections have been defined but have not been rendered for the layout page "~/Views/Shared/_PjaxLayout.cshtml": "Scripts".
ولی دلیلش چی میتونه باشه مگه فقط نمیاد قسمت مثلا main در کد زیر را جایگذاری کنه؟
<div id="main"> @RenderBody() </div>
//********** @Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("Scripts", required: false)
<script type="text/javascript"> $(function () { $(document).pjax('a[withpjax]', '#main', { timeout: 5000 });
و لینک هم به اینصورت:
@Html.ActionLink("ارتباط با ما","Contact", "Home" , null,new { withpjax="with-pjax" })
اگر به فایل css آن مراجعه کنید، یک چنین عرضهایی قابل مشاهده است:
.span12 { width: 940px; } .span1 { width: 60px; }
.row-fluid .span12 { width: 100%; *width: 99.94680851063829%; }
@gridColumns: 12; @gridColumnWidth: 60px; @gridGutterWidth: 20px;
مراحل کلی سفارشی سازی قالبهای Scaffolding پیش فرض ASP.NET MVC
قالبهای Scaffolding پیش فرض ASP.NET در مسیر Microsoft Visual Studio X\Common7\IDE\ItemTemplates\CSharp\Web\MVC X\CodeTemplates قرار دارند. برای نمونه اگر بخواهیم پیش فرضهای تولید فرمهای MVC4 را تغییر دهیم، باید به پوشه MVC 4\CodeTemplates\AddView\CSHTML مراجعه و فایل Create.tt را ویرایش کنیم.
اینکار هرچند عملی است اما آنچنان جالب نیست؛ از این جهت که تاثیری کلی و سراسری خواهد داشت.
برای اعمال محلی این تغییرات فقط به یک پروژه خاص، تنها کافی است همین مسیر CodeTemplates\AddView\CSHTML به همراه تمام فایلهای tt آن، در پوشه جاری پروژه مدنظر ما کپی شود. به این ترتیب ابتدا به این پوشه محلی مراجعه خواهد شد.
روش دوم کپی کردن این فایلها، استفاده از بسته نیوگت ذیل است:
PM> Install-Package Mvc4CodeTemplatesCSharp
سفارشی سازی فایل Create.tt پیش فرض ASP.NET MVC جهت سازگار سازی آن با Twitter bootstrap
در اینجا قصد داریم همان 8 مرحله مطلب «اعمال کلاسهای ویژه اعتبارسنجی Twitter bootstrap به فرمهای ASP.NET MVC» را به فایل Create.tt که اکنون در پوشه CodeTemplates\AddView\CSHTML\Create.tt ریشه پروژه جاری قرار دارد، اعمال کنیم.
الف) ابتدا نام این فایل را به CreateBootstrapForm.tt تغییر میدهیم. از این لحاظ که این نام جدید در drop down مرتبط با scaffold template صفحه Add view ظاهر خواهد شد. به علاوه نیازی نیست تا این فایل tt در همان لحظه اجرا شود، بنابراین به خواص آن در VS.NET مراجعه کرده و مقدار گزینه custom tool آنرا خالی میکنیم (مانند سایر فایلهای tt اضافه شده).
ب) قسمت ابتدایی فایل CreateBootstrapForm.tt را که همان کپی مطابق اصل فایل Create.tt است، به نحو ذیل تغییر میدهیم:
<# if (!mvcHost.IsContentPage) { #> <script src="~/Scripts/jquery-1.9.1.min.js"></script> <script src="~/Scripts/jquery.validate.min.js"></script> <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script> <# } } #> @using (Html.BeginForm()) { @Html.ValidationSummary(true, null, new { @class = "alert alert-error alert-block" }) <fieldset class="form-horizontal"> <legend><#= mvcHost.ViewDataType.Name #></legend> <# foreach (ModelProperty property in GetModelProperties(mvcHost.ViewDataType)) { if (!property.IsPrimaryKey && !property.IsReadOnly && property.Scaffold) { #> <div class="control-group"> <# if (property.IsForeignKey) { #> @Html.LabelFor(model => model.<#= property.Name #>, "<#= property.AssociationName #>",new {@class="control-label"}) <# } else { #> @Html.LabelFor(model => model.<#= property.Name #>,new {@class="control-label"}) <# } #> <div class="controls"> <# if (property.IsForeignKey) { #> @Html.DropDownList("<#= property.Name #>", String.Empty) <# } else { #> @Html.EditorFor(model => model.<#= property.Name #>) <# } #> @Html.ValidationMessageFor(model => model.<#= property.Name #>,null,new{@class="help-inline"}) </div> </div> <# } } #> <div class="form-actions"> <button type="submit" class="btn btn-primary">ارسال</button> <button class="btn">لغو</button> </div> </fieldset> } <div> @Html.ActionLink("Back to List", "Index") </div> <# if(mvcHost.IsContentPage && mvcHost.ReferenceScriptLibraries) { #> @section JavaScript { }
دریافت فایل CreateBootstrapForm.tt اصلاح شده:
همانطور که عنوان شد، برای استفاده از آن فقط کافی است آنرا در مسیر CodeTemplates\AddView\CSHTML\CreateBootstrapForm.tt ریشه پروژه جاری خود کپی کنید.
ایجاد اولین فرم مبتنی بر قالبها
پس از ایجاد کامپوننت employee-register، فایل قالب آن یا src\app\employee\employee-register\employee-register.component.html را گشوده و به نحو ذیل تکمیل میکنیم:
<h3>Angular Forms</h3> <form #form="ngForm"> <input type="text" placeholder="Name"> <button type="submit">Ok</button> </form> form.pristine: {{ form.pristine }}
خاصیت pristine مشخص میکند که آیا فرم توسط کاربر تغییر یافتهاست یا خیر؟
مقدار خاصیت pristine در ابتدای کار true است؛ به این معنا که هنوز تغییری در آن اعمال نشدهاست.
یک نکته: ممکن است در حین توسعهی برنامه، خطای ذیل را در کنسول developer tools مرورگرها مشاهده کنید:
There is no directive with "exportAs" set to "ngForm"
در ادامه، در همین فرمی که تعاریف آنرا در بالا مشاهده میکنید، اطلاعاتی را وارد نمائید. هنوز هم مقدار خاصیت pristine مساوی true است. علت اینجا است که هنوز به Angular اعلام نکردهایم که کدام فیلد یا فیلدهای فرم را باید تحت نظر قرار دهد. برای این منظور ابتدا به المان تعریف شده نامی را انتساب داده و سپس دایرکتیو ngModel را نیز به انتهای تعاریف آن اضافه میکنیم:
<h3>Angular Forms</h3> <form #form="ngForm"> <input type="text" placeholder="Name" name="name" ngModel> <button type="submit">Ok</button> </form> form.pristine: {{ form.pristine }}
اکنون اگر مقدار فرم را تغییر دهیم، مشاهده خواهیم کرد که مقدار خاصیتpristine به false تغییر میکند:
یک نکته: زمانیکه دایرکتیو ngModel ذکر میشود، تعریف name المان متناظر با آن، الزامی است؛ در غیراینصورت خطای ذیل را در کنسول developer tools مرورگرها مشاهده خواهید کرد:
Error: If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions.
خاموش کردن اعتبارسنجی توکار مرورگرها
یکی از کارهایی را که نیاز است در حین کار با فرمها انجام داد، خاموش کردن اعتبارسنجی توکار مرورگرها است. فرض کنید ویژگی معتبر و استاندارد required را به یکی از المانهای ورودی اضافه کردهاید:
<input type="text" required placeholder="Name" name="name" ngModel>
<form #form="ngForm" novalidate>
بهبود ظاهر فرم توسط اعمال شیوهنامههای بوت استرپ
در قسمت قبل، در ابتدای کار تدارک ساختار مثال این سری، بوت استرپ را نیز نصب و تنظیم کردیم. در ادامه میخواهیم اندکی ظاهر این فرم را بر اساس شیوهنامههای بوت استرپ بهبود ببخشیم:
<div class="container"> <h3>Angular Forms</h3> <form #form="ngForm" novalidate> <div class="form-group"> <label>First Name</label> <input type="text" class="form-control" required name="firstName" ngModel> </div> <div class="form-group"> <label>Last Name</label> <input type="text" class="form-control" required name="lastName" ngModel> </div> <button class="btn btn-primary" type="submit">Ok</button> </form> </div> form.pristine: {{ form.pristine }}
- برای افزودن بوت استرپ نیازی نیست تا شیوهنامهی آنرا به صورت دستی به Index.html برنامه اضافه کرد. همینقدر که ارجاعی از آن در فایل angular-cli.json. در قسمت شیوهنامههای آن وجود داشته باشد، به صورت خودکار در bundle نهایی تولید شدهی توسط سیستم ساخت برنامهی Angular CLI ظاهر خواهد شد.
- در اینجا ابتدا فرم خود را در داخل یک container قرار دادهایم. این مورد سبب میشود تا محتوای آن به میانهی صفحه منتقل شود.
- سپس شیوهنامهی btn به دکمهی ارسال فرم اضافه شدهاست تا شکل دکمههای بوت استرپ را پیدا کند.
- سپس هر فیلد ورودی داخل یک div با کلاس form-group محصور میشود و هر کنترل، کلاس form-control را خواهد یافت.
افزودن سایر المانهای ورودی به فرم
تا اینجا دو text box را به فرم اضافه کردهایم. در ادامه میخواهیم المانهای دیگری را نیز تعریف کنیم:
افزودن Check boxes
<div class="checkbox"> <label> <input type="checkbox" name="is-full-time" ngModel> Full Time Employee </label> </div>
افزودن Radio buttons
<label>Payment Type</label> <div class="radio"> <label> <input type="radio" name="pay-type" value="FullTime" checked> Full Time </label> </div> <div class="radio"> <label> <input type="radio" name="pay-type" value="PartTime"> Part Time </label> </div>
افزودن Drop downs
<div class="form-group"> <label>Primary Language</label> <select class="form-control"> <option *ngFor="let lang of languages"> {{ lang }} </option> </select> </div>
اما قسمت مهم آن، اطلاعاتی است که قرار است در این drop down نمایش داده شوند. این اطلاعات را میتوان از آرایهی languages گرفت و سپس توسط یک ngFor به المان select اضافه کرد. بنابراین باید به فایل employee-register.component.ts مراجعه کرده و آرایهی languages را به آن افزود:
export class EmployeeRegisterComponent implements OnInit { languages = ["Persian", "English", "Spanish", "Other"];
<select class="form-control"> <option>Persian</option> <option>English</option> <option>Spanish</option> <option>Other</option> </select>
تا اینجا فرم تشکیل شدهی ما چنین نمایی را پیدا میکند:
در قسمت بعد این فرم را توسط مباحث data binding و بررسی نحوهی دسترسی به اطلاعات آن در کامپوننت مرتبط، تکمیل خواهیم کرد.
کدهای کامل این قسمت را از اینجا میتوانید دریافت کنید: angular-template-driven-forms-lab-02.zip
برای اجرای آن فرض بر این است که پیشتر Angular CLI را نصب کردهاید. سپس از طریق خط فرمان به ریشهی پروژه وارد شده و دستور npm install را صادر کنید تا وابستگیهای آن دریافت و نصب شوند. در آخر با اجرای دستور ng serve -o برنامه ساخته شده و در مرورگر پیش فرض سیستم نمایش داده خواهد شد.
برای شروع به نصب و پیکربندی، باید بدانیم به چه چیزهایی احتیاج داریم. قطعا به کتابخانه React نیاز داریم. اما بسته به نوع کدنویسی که میخواهیم در پیش بگیریم، احتمالا به کتابخانههای دیگری هم احتیاج پیدا خواهیم کرد. در قسمت قبل نحوهی ساخت یک تگ HTML، با React آورده شد. دوباره به آن نگاهی بیاندازیم:
var ClickableImage = function (props) { return ( <a href={props.href}> <img src={props.src} /> </a> ) };
React از دو روش برای ساخت تگها استفاده میکند. روش سادهتر همین مثالی است که در بالا آمده؛ یعنی از تگهای HTML را به صورت مستقیم استفاده میکند. روش دیگر، استفاده از زبان جاوااسکریپت به تنهایی است. مثلا تگهای <a> و <img> بالا به صورت زیر نوشته میشوند:
var ClickableImage = function(props) { React.createElement( "a", {href: props.href}, React.createElement( "img", {src: props.src} ) ) };
وقتی تصور کنیم که قرار است یک جدول یا یک فرم را ایجاد کنیم، ارزش روش سادهتر، مشخص میشود. در واقع تگهایی که استفاده شده، واقعا تگهای HTML نیستند؛ چیزی هستند به نام JSX.
JSX
JSX زبان یا روشی است که اجازه میدهد از تگهای مشابه با HTML در جاوااسکریپت استفاده کنیم. به دلیل تفاوتهای مختصری که دارند، گفته شد که این تگها دقیقا HTML نیستند. برای مثال در تگهای HTML خاصیتهای class و for را داریم؛ اما در تگهای JSX باید به ترتیب از className و htmlFor استفاده کنیم. مسئله بعدی این است که اساسا JSX همراه با React ارائه نشده و برای اینکه بتوانیم از JSX استفاده کنیم، نیاز به ابزاری اضافه داریم تا JSX را برای JavaScript و مرورگر ترجمه کند که فیسبوک، Babel را پیشنهاد میدهد. اگر از JSX بدون ابزار مترجم استفاده کنیم با پیام خطای زیر مواجه میشویم.
> Uncaught SyntaxError: Unexpected token
یعنی کاراکتر شروع (>) تگها را تشخیص نمیدهد.
نصب کتابخانهها
این کتابخانهها را میشود به مدلهای مختلفی دریافت و پیکربندی کرد. بسته به نوع پروژه و محیط توسعه و پیکربندیهای خاص هر پروژه، روش کار میتواند متفاوت باشد. هدف اصلی، مروری بر امکانات React است. پس سادهترین روش نصب را برای ادامه کار انتخاب میکنیم. مانند هر کتابخانهی دیگری میشود بطور یکجا React و Babel را از سایتهای اصلی یا Github دانلود و به پروژه اضافه و استفاده کرد؛ مثل jQuery و Bootstrap. اما راه استاندارد و پیشنهاد شده، استفاده از ابزارهای مدیریت بستهها مثل npm است. در قدم اول با فرض بر اینکه VSCode و npm بر روی سیستم نصب هستند، اول یک پوشه خالی را در VSCode به عنوان پروژه باز میکنیم و از منوی View -> Integrated Terminal را انتخاب میکنیم. در ترمینال باز شده دستور نصب زیر را وارد میکنیم.
npm install react react-dom
npm install babel-standalone
نحوه استفاده
فایل index.html را به ریشه پروژه اضافه کنید و کدهای زیر را درون تگ Body قرار دهید:
<div id="reactTestContainer"></div> <script src="node_modules/react/dist/react.min.js"></script> <script src="node_modules/react-dom/dist/react-dom.min.js"></script> <script src="node_modules/babel-standalone/babel.min.js"></script> <script src="react-test.js" type="text/babel"></script>
برای کار با کتابخانه React به دو فایل react.js و react-dom.js نیاز داریم. اولی بخش اصلی کتابخانه و دومی برای ساخت تگها و تبادل با بخش HTML DOM استفاده میشود؛ مثلا اضافه کردن تگهای ساخته شده به HTML. ذکر ویژگی "type="text/babel برای فایلهایی که در آنها از تگهای JSX استفاده شده ضروری است؛ در غیر اینصورت Babel تشخیص نمیدهد که کار ترجمه را برای چه فایلهایی باید انجام دهد. در نهایت قطعه کد زیر را در فایل react-test.js وارد کنید.
var ClickableImage = function (props) { return ( <a href={props.href}> <img src={props.src} /> </a> ) }; ReactDOM.render( <ClickableImage href="http://google.com" src="google.jpg"/>, document.getElementById("reactTestContainer") )
با اجرا کردن پروژه، تصویری قابل کلیک به مقصد گوگل، در تگ <div>، با ویژگی "id=”reactTestContainer ایجاد خواهد شد.
تا به این قسمت متوجه شدیم که کتابخانه React چیست و چطور میشود از آن استفاده کرد. در قسمت بعد نگاهی دقیقتر به کامپوننتهای React خواهیم داشت.
bower یک فناوری منسوخ شدهاست و اگر بخواهیم bower.json ذکر شدهی در این مطلب را با package.json مربوط به npm جایگزین کنیم، به یک چنین محتوایی خواهیم رسید:
{ "name": "testwebapp", "version": "1.0.0", "description": "", "scripts": {}, "author": "", "license": "ISC", "dependencies": { "bootstrap": "^3.3.7", "jquery": "^2.2.4", "jquery-ajax-unobtrusive": "^3.2.4", "jquery-validation": "^1.17.0", "jquery-validation-unobtrusive": "^3.2.8" } }
سپس بر اساس مسیرهای پوشهی node_modules جدید، فایل bundleconfig.json چنین محتوایی را پیدا میکند:
[ { "outputFileName": "wwwroot/css/site.min.css", "inputFiles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "wwwroot/css/site.css" ] }, { "outputFileName": "wwwroot/js/site.min.js", "inputFiles": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/jquery-validation/dist/jquery.validate.min.js", "node_modules/jquery-validation-unobtrusive/dist/jquery.validate.unobtrusive.min.js", "node_modules/jquery-ajax-unobtrusive/jquery.unobtrusive-ajax.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js", "wwwroot/js/site.js" ], "minify": { "enabled": true, "renameLocals": true }, "sourceMap": false } ]
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>@ViewData["Title"] - DNTCommon.Web.Core.TestWebApp</title> <link href="~/css/site.min.css" rel="stylesheet" asp-append-version="true" /> </head> <body> <div> @RenderBody() </div> <script src="~/js/site.min.js" type="text/javascript" asp-append-version="true"></script> @RenderSection("Scripts", required: false) </body> </html>
<Project Sdk="Microsoft.NET.Sdk.Web"> <Target Name="PrecompileScript" BeforeTargets="BeforeBuild"> <Exec Command="dotnet bundle" /> </Target> <ItemGroup> <DotNetCliToolReference Include="BundlerMinifier.Core" Version="2.6.362" /> </ItemGroup> </Project>
TwitterBootstrapMVC
TwitterBootstrapMVC یا به اختصار BMVC یک کتابخانه از Helper های مفید برای ساده سازی استفاده از Twitter Bootstrap در MVC میباشد .
برای استفاده از آن در mvc 4 کافی است بعد از پیکر بندی Bootstrap ( راهنمایی) به کتابخانه TwitterBootstrapMvc رفرنسی ایجاد کنید و با استفاده از این راهنما نحوه استفاده را فرا گیرید . همچنین میتوانید آن را از طریق NuGet بارگذاری نمایید .
نسخهی MVC4 آنرا در اینجا برای شما نیز آپلود نمودم
در زیر نمونه ای از استفاده از آن را میبینید@Html.Bootstrap().LabelFor(x => x.UserName) @Html.Bootstrap().TextBoxFor(m => m.UserName) @Html.Bootstrap().PasswordFor(m => m.Password) @Html.Bootstrap().FileFor(m => m.File) @Html.Bootstrap().CheckBoxFor(m => m.IsActivated) @Html.Bootstrap().RadioButtonFor(m => m.Gender, "male") @Html.Bootstrap().DropDownListFor(m => m.State, Model.UsaStates) @Html.Bootstrap().ListBoxFor(m => m.State, Model.UsaStates) @Html.Bootstrap().TextAreaFor(m => m.Description)
@using (Html.Bootstrap().Begin(new Form().Type(FormType.Inline))) { @Html.Bootstrap().TextBoxFor(m => m.Email).Placeholder("Email") @Html.Bootstrap().PasswordFor(m => m.Password).Placeholder("Password") @Html.Bootstrap().CheckBoxFor(m => m.RememberMe).Label() @Html.Bootstrap().SubmitButton().Text("Sign in") }
@Html.Bootstrap().Button().Text("Show Modal").IconAppend(Icons.camera) .TriggerModal("MyModal") @using(var modal = Html.Bootstrap().Begin(new Modal() .Id("MyModal") .HtmlAttributes(new { @class = "custom-class" }) .Fade() )){ using(modal.BeginHeader()) { <h2>Some header</h2> } using(modal.BeginBody()) { <p>Some body<p> } using(modal.BeginFooter()) { <p>Footer here.<p> @Html.Bootstrap().Button().Text("Close") } }