نظرات مطالب
نظرات مطالب
با ASP.MVC چه مزایایی را به دست خواهیم آورد
مستقیما میتونید با MVC شروع کنید. البته پیشنیازهای CSS ،HTML و جاوا اسکریپت را هم باید لحاظ کنید.
با سلام و تشکر از مطلب خوبتان
در مورد فایلهای css هم روشی وجود دارد؟
در مورد فایلهای css هم روشی وجود دارد؟
بسیار عالی!
وقتی css رو به صفحه اضافه میکنیم روی تمام کنترلها اثر میذاره. که مطلوب نیست. راه حل چیه؟
وقتی css رو به صفحه اضافه میکنیم روی تمام کنترلها اثر میذاره. که مطلوب نیست. راه حل چیه؟
با سلام و تشکر
روش کش کردن backgound-image
در css به چه صورت است
روش کش کردن backgound-image
در css به چه صورت است
در قسمت قبل، مروری داشتیم بر تفاوتهای دو نوع مختلف فناوریهای ایجاد و مدیریت فرمها در Angular و هچنین ساختار ابتدایی برنامهی این سری را ایجاد کردیم. در ادامه، اولین فرم مبتنی بر قالبها را ایجاد خواهیم کرد.
ایجاد اولین فرم مبتنی بر قالبها
پس از ایجاد کامپوننت employee-register، فایل قالب آن یا src\app\employee\employee-register\employee-register.component.html را گشوده و به نحو ذیل تکمیل میکنیم:
زمانیکه المان فرم به صفحه اضافه میشود، Angular به صورت خودکار دایرکتیو مرتبطی را به فرم اضافه میکند. برای دسترسی به این دایرکتیو نیاز است یک template reference variable را تعریف کرد. برای مثال "form="ngForm# به معنای تعریف متغیر form است که به دایرکتیو توکار ngForm متصل شدهاست و اکنون حاوی وهلهای از این دایرکتیو میباشد. به همین جهت است که امکان دسترسی به اطلاعات این وهله توسط درج form.pristine در همان قالب وجود دارد.
خاصیت pristine مشخص میکند که آیا فرم توسط کاربر تغییر یافتهاست یا خیر؟
مقدار خاصیت pristine در ابتدای کار true است؛ به این معنا که هنوز تغییری در آن اعمال نشدهاست.
یک نکته: ممکن است در حین توسعهی برنامه، خطای ذیل را در کنسول developer tools مرورگرها مشاهده کنید:
این دایرکتیو تنها زمانی قابل دسترسی است که در قسمت imports ماژول جاری که با آن کار میکنید، تعریف FormsModule را به همان نحوی که در انتهای قسمت قبل بررسی کردیم (قسمت «افزودن ماژول فرمها به برنامه»)، افزوده باشید.
در ادامه، در همین فرمی که تعاریف آنرا در بالا مشاهده میکنید، اطلاعاتی را وارد نمائید. هنوز هم مقدار خاصیت pristine مساوی true است. علت اینجا است که هنوز به Angular اعلام نکردهایم که کدام فیلد یا فیلدهای فرم را باید تحت نظر قرار دهد. برای این منظور ابتدا به المان تعریف شده نامی را انتساب داده و سپس دایرکتیو ngModel را نیز به انتهای تعاریف آن اضافه میکنیم:
اکنون اگر مقدار فرم را تغییر دهیم، مشاهده خواهیم کرد که مقدار خاصیتpristine به false تغییر میکند:
یک نکته: زمانیکه دایرکتیو ngModel ذکر میشود، تعریف name المان متناظر با آن، الزامی است؛ در غیراینصورت خطای ذیل را در کنسول developer tools مرورگرها مشاهده خواهید کرد:
خاموش کردن اعتبارسنجی توکار مرورگرها
یکی از کارهایی را که نیاز است در حین کار با فرمها انجام داد، خاموش کردن اعتبارسنجی توکار مرورگرها است. فرض کنید ویژگی معتبر و استاندارد required را به یکی از المانهای ورودی اضافه کردهاید:
در این حالت اگر برنامه را اجرا کنید و بدون تکمیل این فیلد بر روی دکمهی ارسال فرم کلیک نمائید، به ازای مرورگرهای مختلف، پیام انگلیسی «لطفا این فیلد را تکمیل کنید» ظاهر خواهد شد و هر کدام شکل متفاوتی را دارند که جزئیات آنها را نمیتوان تغییر داد و یا سفارشی سازی کرد. به این مورد، browser validation میگویند. به همین جهت برای خاموش کردن این اعتبارسنجی توکار مرورگرها و ارائهی تجربهی کاربری یکنواخت و یکدستی در تمام مرورگرها، نیاز است ویژگی novalidate را به تگ فرم اضافه کرد:
هر دوی ویژگیهای novalidate و یاrequired ، جزو استاندارد HTML هستند و ارتباطی به Angular ندارند.
بهبود ظاهر فرم توسط اعمال شیوهنامههای بوت استرپ
در قسمت قبل، در ابتدای کار تدارک ساختار مثال این سری، بوت استرپ را نیز نصب و تنظیم کردیم. در ادامه میخواهیم اندکی ظاهر این فرم را بر اساس شیوهنامههای بوت استرپ بهبود ببخشیم:
- برای افزودن بوت استرپ نیازی نیست تا شیوهنامهی آنرا به صورت دستی به Index.html برنامه اضافه کرد. همینقدر که ارجاعی از آن در فایل angular-cli.json. در قسمت شیوهنامههای آن وجود داشته باشد، به صورت خودکار در bundle نهایی تولید شدهی توسط سیستم ساخت برنامهی Angular CLI ظاهر خواهد شد.
- در اینجا ابتدا فرم خود را در داخل یک container قرار دادهایم. این مورد سبب میشود تا محتوای آن به میانهی صفحه منتقل شود.
- سپس شیوهنامهی btn به دکمهی ارسال فرم اضافه شدهاست تا شکل دکمههای بوت استرپ را پیدا کند.
- سپس هر فیلد ورودی داخل یک div با کلاس form-group محصور میشود و هر کنترل، کلاس form-control را خواهد یافت.
افزودن سایر المانهای ورودی به فرم
تا اینجا دو text box را به فرم اضافه کردهایم. در ادامه میخواهیم المانهای دیگری را نیز تعریف کنیم:
افزودن Check boxes
چون با بوت استرپ کار میکنیم، نیاز است المان ورودی از نوع checkbox را داخل یک div با کلاس checkbox محصور کنیم. سپس یک label را تعریف کرده و Input را داخل آن قرار دهیم. در اینجا نیز همانند سایر المانها نیاز است نامی را به آن انتساب داده و سپس دایرکتیو ngModel را قید نمود تا Angular این کنترل را تحت نظر قرار دهد.
افزودن Radio buttons
Radio buttons نیز شبیه به Check boxها تعریف میشوند. در اینجا نیز یک div با کلاس radio و سپس label ایی که المان ورودی از نوع radio داخل آن قرار میگیرد، افزوده خواهد شد. فقط در اینجا باید دقت داشت که گروه بندی این المانها بر اساس نام آنها انجام میشود. به همین جهت است که نام این دو المان یکی وارد شدهاست. همچنین باید value آنرا نیز تنظیم کرد. این مقداری است که در نهایت به سرور ارسال خواهد شد.
افزودن Drop downs
در اینجا از المان select برای تشکیل یک drop down استفاده میکنیم و نحوهی تعریف آن بسیار شبیه است به تعریف text boxهایی که داخل form-group محصور شده و همچنین کلاس form-control را پیدا میکنند.
اما قسمت مهم آن، اطلاعاتی است که قرار است در این drop down نمایش داده شوند. این اطلاعات را میتوان از آرایهی languages گرفت و سپس توسط یک ngFor به المان select اضافه کرد. بنابراین باید به فایل employee-register.component.ts مراجعه کرده و آرایهی languages را به آن افزود:
کاری که در اینجا انجام میشود، تکرار المان option توسط ngFor است. برای مثال در اینجا 4 بار المان option توسط عناصر آرایهی زبانها در داخل المان select تکرار خواهد شد. به عبارتی select نهایی رندر شدهی در صفحه، چنین شکلی را پیدا میکند:
تا اینجا فرم تشکیل شدهی ما چنین نمایی را پیدا میکند:
در قسمت بعد این فرم را توسط مباحث data binding و بررسی نحوهی دسترسی به اطلاعات آن در کامپوننت مرتبط، تکمیل خواهیم کرد.
کدهای کامل این قسمت را از اینجا میتوانید دریافت کنید: angular-template-driven-forms-lab-02.zip
برای اجرای آن فرض بر این است که پیشتر Angular CLI را نصب کردهاید. سپس از طریق خط فرمان به ریشهی پروژه وارد شده و دستور npm install را صادر کنید تا وابستگیهای آن دریافت و نصب شوند. در آخر با اجرای دستور ng serve -o برنامه ساخته شده و در مرورگر پیش فرض سیستم نمایش داده خواهد شد.
ایجاد اولین فرم مبتنی بر قالبها
پس از ایجاد کامپوننت 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 برنامه ساخته شده و در مرورگر پیش فرض سیستم نمایش داده خواهد شد.
خاصیت نام را که توسط ویژگی StringLength مزین شده است درنظر بگیرید:
قصد داریم در سمت کاربر، فیلد متناظر را طوری تنظیم کنیم که واقعا کاربر نتواند بیش از 10 حرف را وارد کند:
توضیحات این کدها به نحوه رندر ویژگی StringLength بر میگردد:
توسط قطعه کد جیکوئری نوشته شده، ابتدا کلیه inputهایی که دارای data-val-length-max هستند را مییابیم و در این بین مقدار data-val-length-max را یافته و سپس خاصیت maxlength آنها را به صورت پویا تنظیم میکنیم. به این ترتیب کاربر دیگر نمیتواند رشتهای دلخواه را در ابتدای کار وارد نماید و به طول تنظیم شده محدود میگردد.
[StringLength(10, ErrorMessage = "حداکثر 10 حرف")] public string Name { set; get; }
$(function () { $("input[data-val-length-max]").each(function (i, e) { var input = $(e); var maxlength = input.attr("data-val-length-max"); input.attr("maxlength", maxlength); }); });
<input class="text-box single-line" data-val="true" data-val-length="حداکثر 10 حرف" data-val-length-max="10" data-val-required="(*)" id="Name" name="Name" type="text" value="" />
- بحث مطلب جاری در مورد ASP.NET MVC است و ساز و کار استاندارد آن؛ نه در مورد وب فرمها یا روشهای سفارشی دیگر. هنگام تعریف مسیر اسکریپتها در MVC اگر از Url.Content و ~ برای ذکر ریشه سایت، استفاده شده باشد، موتور توکار MVC مسیرها را به صورت خودکار اصلاح میکند. مثلا:
- پیشتر در مورد دیباگ اسکریپتهای یک سایت مطلبی تهیه شده بود: (^)
البته در این حالت هدر صفحه باید runat server داشته باشد:
و یا از اسکریپت منیجر استفاده کنید:
<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
الان مرورگر، مسیر اسکریپتهای شما را از انتهای مسیر یک مطلب دریافت میکند نه از ریشه سایت. برای وب فرمها هم روش ذیل وجود دارد:
<script language="javascript" src='<%=ResolveUrl("~/App_Themes/MainTheme/jquery.js")%>' type='text/javascript'></script>
<head runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"> <Scripts> <asp:ScriptReference Path="~/js/somefile.js" /> </Scripts> </asp:ScriptManager>
دلیل آن مرتبط است به روشی که از آن استفاده کردید. این قابلیت برای اینکه کار کند، نیاز به بافر کردن اطلاعات دارد، در حالیکه شما در حال دانلود یک فایل از یک سایت دیگر هستید. ترکیب اینها با هم، برای ارائهی resume کار نمیکنند. زمانیکه قرار است قابلیت resume وجود داشته باشد، یعنی مثلا کاربر درخواست دریافت اطلاعات را از بایت 1000 تا 1500، میدهد. File Stream Result چطور باید این درخواست را برای httpClient.GetStreamAsync که چنین قابلیتی را ندارد، ترجمه کند؟ اگر میخواهید آنرا برای حالت resume آزمایش کنید، از استریمی از نوع System.IO.File.OpenRead و یا new FileStream استفاده کنید:
public IActionResult FileStreamActionResult() { var fileStream = System.IO.File.OpenRead(@"D:\path\Controllers\HomeController.cs"); return new FileStreamResult(fileStream, "text/plain") { FileDownloadName = "HomeController.cs" }; }
نیازی به اینکار نیست (اگر Content-Type درخواست هم تنظیم شود). علت آنرا در مطلب «شروع به کار با AngularJS 2.0 و TypeScript - قسمت دهم - کار با فرمها - قسمت اول» توضیح دادم:
«... نکتهی مهم اینجا است که content type پیش فرض ارسالی متد post آن، plain
text است و در این حالت ASP.NET MVC شیء JSON دریافتی از کلاینت را پردازش
نخواهد کرد. بنابراین نیاز است تا هدر content type را به صورت صریحی در
اینجا ذکر نمود؛ در غیراینصورت در سمت سرور، شاهد نال بودن مقادیر دریافتی
از کاربران خواهیم بود...»