افزودن دکمهی ویرایش، به رکوردهای لیست اتاقها و نمایش جزئیات رکورد در حال ویرایش
تا اینجا کامپوننت Pages\HotelRoom\HotelRoomUpsert.razor دارای یک چنین مسیریابی است:
@page "/hotel-room/create"
@page "/hotel-room/create" @page "/hotel-room/edit/{Id:int}"
پس از تعریف مسیریابی دریافت پارامتر Id رکورد در حال ویرایش، نحوهی واکنش نشان دادن به آن در کامپوننت HotelRoomUpsert.razor به صورت زیر است:
@code { // ... [Parameter] public int? Id { get; set; } protected override async Task OnInitializedAsync() { if (Id.HasValue) { // Update Mode Title = "Update"; HotelRoomModel = await HotelRoomService.GetHotelRoomAsync(Id.Value); } else { // Create Mode HotelRoomModel = new HotelRoomDTO(); } } // ... }
- سپس میخواهیم در زمان بارگذاری کامپوننت جاری، اگر مقدار Id، تنظیم شده بود، تمام فیلدهای فرم متصل به شیء HotelRoomModel را به صورت خودکار بر اساس اطلاعات رکورد متناظر با آن در بانک اطلاعاتی، مقدار دهی اولیه کنیم.
<EditForm Model="HotelRoomModel" OnValidSubmit="HandleHotelRoomUpsert">
کار مقدار دهی اولیهی فیلدهای یک کامپوننت نیز باید در روال رویداد گردان OnInitializedAsync انجام شود که نمونهای از آن را در کدهای فوق مشاهده میکنید. در این مثال اگر Id مقدار داشته باشد، مقدار آنرا به متد GetHotelRoomAsync ارسال کرده و سپس شیء DTO دریافتی از آنرا به مدل فرم انتساب میدهیم تا فرم ویرایشی، قابل استفاده شود:
در ادامه برای ساده سازی رسیدن به مسیرهایی مانند hotel-room/edit/1، به کامپوننت Pages\HotelRoom\HotelRoomList.razor مراجعه کرده و در همان ردیفی که اطلاعات رکورد یک اتاق را نمایش میدهیم، لینکی را نیز به صفحهی ویرایش آن، اضافه میکنیم:
<tr> <td>@room.Name</td> <td>@room.Occupancy</td> <td>@room.RegularRate.ToString("c")</td> <td>@room.SqFt</td> <td> <NavLink href="@($"hotel-room/edit/{room.Id}")" class="btn btn-primary">Edit</NavLink> </td> </tr>
مدیریت ثبت اطلاعات ویرایش شدهی یک اتاق، در بانک اطلاعاتی
در حین تکمیل این قسمت میخواهیم پیامهایی مانند موفقیت آمیز بودن عملیات را نیز به کاربر نمایش دهیم. به همین جهت مراحل «Blazor 5x - قسمت یازدهم - مبانی Blazor - بخش 8 - کار با جاوا اسکریپت» را برای افزودن کتابخانهی معروف جاوا اسکریپتی Toastr طی میکنیم که شامل این قسمتها است:
- دریافت و نصب بستههای jquery و toastr
- اصلاح فایل Pages\_Host.cshtml برای افزودن مداخل فایلهای CSS و JS بستههای نصب شده
- تعریف فایل جدید wwwroot\js\common.js برای سادگی کار با توابع جاوا اسکریپتی toastr و افزودن مدخل آن به فایل Pages\_Host.cshtml
- تعریف متدهای الحاقی JSRuntimeExtensions ، جهت کاهش کدهای تکراری فراخوانی متدهای toastr و افزودن فضای نام آن به فایل Imports.razor_
جزئیات این موارد را در قسمت یازدهم این سری میتوانید مطالعه کنید و از تکرار آنها در اینجا صرفنظر میشود. همچنین کدهای تکمیل شدهی این قسمت را از انتهای مطلب جاری نیز میتوانید دریافت کنید.
همچنین پیش از تکمیل ادامهی کدهای ویرایش اطلاعات، نیاز است متد IsRoomUniqueAsync را به صورت زیر اصلاح کنیم:
namespace BlazorServer.Services { public interface IHotelRoomService { Task<bool> IsRoomUniqueAsync(string name, int roomId); // ... } } namespace BlazorServer.Services { public class HotelRoomService : IHotelRoomService { // ... public Task<bool> IsRoomUniqueAsync(string name, int roomId) { if (roomId == 0) { // Create Mode return _dbContext.HotelRooms .ProjectTo<HotelRoomDTO>(_mapperConfiguration) .AnyAsync(x => x.Name != name); } else { // Edit Mode return _dbContext.HotelRooms .ProjectTo<HotelRoomDTO>(_mapperConfiguration) .AnyAsync(x => x.Name != name && x.Id != roomId); } } } }
اکنون متد HandleHotelRoomUpsert کامپوننت Pages\HotelRoom\HotelRoomUpsert.razor جهت مدیریت ثبت و ویرایش اطلاعات به صورت زیر تغییر میکند:
// ... @inject IJSRuntime JsRuntime @code { // ... private async Task HandleHotelRoomUpsert() { var isRoomUnique = await HotelRoomService.IsRoomUniqueAsync(HotelRoomModel.Name, HotelRoomModel.Id); if (!isRoomUnique) { await JsRuntime.ToastrError($"The room name: `{HotelRoomModel.Name}` already exists."); return; } if (HotelRoomModel.Id != 0 && Title == "Update") { // Update Mode var updateResult = await HotelRoomService.UpdateHotelRoomAsync(HotelRoomModel.Id, HotelRoomModel); await JsRuntime.ToastrSuccess($"The `{HotelRoomModel.Name}` updated successfully."); } else { // Create Mode var createResult = await HotelRoomService.CreateHotelRoomAsync(HotelRoomModel); await JsRuntime.ToastrSuccess($"The `{HotelRoomModel.Name}` created successfully."); } NavigationManager.NavigateTo("hotel-room"); } }
- در ابتدا عدم تکراری بودن نام اتاق بررسی میشود:
- در آخر بر اساس Id مدل فرم، حالت ویرایش و یا ثبت اطلاعات را تشخیص میدهیم. البته Id مدل فرم، در حالت ثبت اطلاعات نیز صفر است؛ به علت فراخوانی ()HotelRoomModel = new HotelRoomDTO که سبب مقدار دهی Id آن با عدد پیشفرض صفر میشود. بنابراین صرفا بررسی Id مدل، کافی نیست و برای مثال میتوان عنوان تنظیم شدهی در متد OnInitializedAsync را نیز بررسی کرد.
- پس از تشخیص حالت ویرایش و یا ثبت، یکی از متدهای متناظر HotelRoom Service را مانند UpdateHotelRoomAsync و یا CreateHotelRoomAsync فراخوانی کرده و سپس پیامی را به کاربر نمایش داده و او را به صفحهی نمایش لیست اتاقها، هدایت میکنیم:
کدهای کامل این مطلب را از اینجا میتوانید دریافت کنید: Blazor-5x-Part-15.zip
در مورد طراحی یک برنامه "فرم ساز" در مطلب قبلی بحث شد ... حدودا سه سال قبل اینکار را برای شرکتی انجام دادم. یک برنامه درخواست خدمات نوشته شده با ASP.NET که مدیران برنامه میتوانستند برای آن فرم طراحی کنند؛ فرم درخواست پرینت، درخواست نصب نرم افزار، درخواست وام، درخواست پیک، درخواست آژانس و ... فرمهایی که تمامی نداشتند! آن زمان برای حل این مساله از فیلدهای XML استفاده کردم.
فیلدهای XML قابلیت نه چندان جدیدی هستند که از SQL Server 2005 به بعد اضافه شدهاند. مهمترین مزیت آنها هم امکان ذخیره سازی اطلاعات هر نوع شیءایی به عنوان یک فیلد XML است. یعنی همان زیرساختی که برای ایجاد یک برنامه فرم ساز نیاز است. ذخیره سازی آن هم آداب خاصی را طلب نمیکند. به ازای هر فیلد مورد نظر کاربر، یک نود جدید به صورت رشته معمولی باید اضافه شود و نهایتا رشته تولیدی باید ذخیره گردد. از دید ما یک رشته است، از دید SQL Server یک نوع XML واقعی؛ به همراه این مزیت مهم که به سادگی میتوان با T-SQL/XQuery/XPath از جزئیات اطلاعات این نوع فیلدها کوئری گرفت و سرعت کار هم واقعا بالا است؛ به علاوه بر خلاف مطلب قبلی در مورد dynamic components ، اینبار نیازی نیست تا به ازای هر یک فیلد درخواستی کاربر، واقعا یک فیلد جدید را به جدول خاصی اضافه کرد. داخل این فیلد XML هر نوع ساختار دلخواهی را میتوان ذخیره کرد. به عبارتی به کمک فیلدهایی از نوع XML میتوان داخل یک سیستم بانک اطلاعاتی رابطهای، schema-less کار کرد (un-typed XML) و همچنین از این اطلاعات ویژه، کوئریهای پیچیده هم گرفت.
تا جایی که اطلاع دارم، چند شرکت دیگر هم در ایران دقیقا از همین ایده فیلدهای XML برای ساخت برنامه فرم ساز استفاده کردهاند ...؛ البته مطلب جدیدی هم نیست؛ برنامههای فرم ساز اوراکل و IBM هم سالها است که از XML برای همین منظور استفاده میکنند. مایکروسافت هم به همین دلیل (شاید بتوان گفت مهمترین دلیل وجودی فیلدهای XML در SQL Server)، پشتیبانی توکاری از XML به عمل آورده است.
یا روش دیگری را که برای طراحی سیستمهای فرم ساز پیشنهاد میکنند استفاده از بانکهای اطلاعاتی مبتنی بر key-value مانند Redis یا RavenDb است؛ یا استفاده از بانکهای اطلاعاتی schema-less واقعی مانند CouchDb.
خوب ... اکنون سؤال این است که NHibernate برای کار با فیلدهای XML چه تمهیداتی را درنظر گرفته است؟
برای این منظور خاصیتی را که قرار است به یک فیلد از نوع XML نگاشت شود، با نوع XDocument مشخص خواهیم ساخت:
using System.Xml.Linq;
namespace TestModel
{
public class DynamicTable
{
public virtual int Id { get; set; }
public virtual XDocument Document { get; set; }
}
}
سپس باید جهت معرفی این نوع ویژه، به صورت صریح از XDocType استفاده کرد؛ یعنی نکتهی اصلی، استفاده از CustomType مرتبط است:
using FluentNHibernate.Automapping;
using FluentNHibernate.Automapping.Alterations;
using NHibernate.Type;
namespace TestModel
{
public class DynamicTableMapping : IAutoMappingOverride<DynamicTable>
{
public void Override(AutoMapping<DynamicTable> mapping)
{
mapping.Id(x => x.Id);
mapping.Map(x => x.Document).CustomType<XDocType>();
}
}
}
البته لازم به ذکر است که دو نوع NHibernate.Type.XDocType و NHibernate.Type.XmlDocType برای کار با فیلدهای XML در NHibernate وجود دارند. XDocType برای کار با نوع System.Xml.Linq.XDocument طراحی شده است و XmlDocType مخصوص نگاشت نوع System.Xml.XmlDocument است.
اکنون اگر به کمک کلاس SchemaExport ، اسکریپت تولید جدول متناظر با اطلاعات فوق را ایجاد کنیم به حاصل زیر خواهیم رسید:
if exists (select * from dbo.sysobjects
where id = object_id(N'[DynamicTable]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)
drop table [DynamicTable]
create table [DynamicTable] (
Id INT IDENTITY NOT NULL,
Document XML null,
primary key (Id)
)
یک سری اعمال متداول ذخیره سازی اطلاعات و تهیه کوئری نیز در ادامه ذکر شدهاند:
//insert
object savedId = 0;
using (var session = sessionFactory.OpenSession())
{
using (var tx = session.BeginTransaction())
{
var obj = new DynamicTable
{
Document = System.Xml.Linq.XDocument.Parse(
@"<Doc><Node1>Text1</Node1><Node2>Text2</Node2></Doc>"
)
};
savedId = session.Save(obj);
tx.Commit();
}
}
//simple query
using (var session = sessionFactory.OpenSession())
{
using (var tx = session.BeginTransaction())
{
var entity = session.Get<DynamicTable>(savedId);
if (entity != null)
{
Console.WriteLine(entity.Document.Root.ToString());
}
tx.Commit();
}
}
//advanced query
using (var session = sessionFactory.OpenSession())
{
using (var tx = session.BeginTransaction())
{
var list = session.CreateSQLQuery("select [Document].value('(//Doc/Node1)[1]','nvarchar(255)') from [DynamicTable] where id=:p0")
.SetParameter("p0", savedId)
.List();
if (list != null)
{
Console.WriteLine(list[0]);
}
tx.Commit();
}
}
و در پایان بدیهی است که جهت کار با امکانات پیشرفتهتر موجود در SQL Server در مورد فیلدهای XML ( برای نمونه: + و +) باید مثلا رویه ذخیره شده تهیه کرد (یا مستقیما از متد CreateSQLQuery همانند مثال فوق کمک گرفت) و آنرا در NHibernate مورد استفاده قرار داد. البته به این صورت کار شما محدود به SQL Server خواهد شد و باید در نظر داشت که در کل تعداد کمی بانک اطلاعاتی وجود دارند که نوعهای XML را به صورت توکار پشتیبانی میکنند.
افزودن سرویس httpService.js به برنامه
تا این قسمت، تمام اطلاعات نمایش داده شدهی در لیست فیلمها، از سرویس درون حافظهای src\services\fakeMovieService.js و لیست ژانرها از سرویس src\services\fakeGenreService.js، تامین میشوند. اکنون در ادامه میخواهیم این سرویسها را با سرویس backend یاد شده، جایگزین کنیم تا این برنامه، اطلاعات خودش را از سرور دریافت کند. به همین جهت قبل از هر کاری، سرویس عمومی src\services\httpService.js را که در قسمت قبل توسعه دادیم، به برنامهی نمایش لیست فیلمها نیز اضافه میکنیم (فایل آنرا از پروژهی قبلی کپی کرده و در اینجا paste میکنیم)، تا بتوانیم از امکانات آن در اینجا نیز استفاده کنیم. فایل httpService.js، دارای وابستگیهای خارجی react-toastify و axios است. به همین جهت برای افزودن آنها مراحل زیر را طی میکنیم:
- نصب کتابخانههای react-toastify و axios از طریق خط فرمان (با فشردن دکمههای ctrl+back-tick در VSCode):
> npm i axios --save > npm i react-toastify --save
import { ToastContainer } from "react-toastify"; import "react-toastify/dist/ReactToastify.css";
render() { return ( <React.Fragment> <ToastContainer />
دریافت اطلاعات لیست نمایش ژانرها از سرویس backend
با فراخوانی آدرس https://localhost:5001/api/Genres، میتوان لیست ژانرهای سینمایی تعریف شدهی در سرویسهای backend را مشاهده کرد. اکنون قصد داریم از این اطلاعات، در برنامه استفاده کنیم. به همین جهت به فایل src\components\movies.jsx مراجعه کرده و تغییرات زیر را اعمال میکنیم:
چون نمیخواهیم تغییراتی بسیار اساسی را در اینجا اعمال کنیم، قدم به قدم عمل کرده و سرویس قبلی fakeGenreService.js را با یک سرویس جدید که اطلاعات خودش را از سرور دریافت میکند، جایگزین میکنیم. بنابراین ابتدا فایل جدید src\services\genreService.js را ایجاد میکنیم. سپس آنرا طوری تکمیل خواهیم کرد که اینترفیس آن، با اینترفیس fakeGenreService قبلی یکی باشد:
import { apiUrl } from "../config.json"; import http from "./httpService"; export function getGenres() { return http.get(apiUrl + "/genres"); }
{ "apiUrl": "https://localhost:5001/api" }
پس از تکمیل سرویس جدید src\services\genreService.js، به فایل src\components\movies.jsx بازگشته و سطر قبلی
import { getGenres } from "../services/fakeGenreService";
import { getGenres } from "../services/genreService";
Uncaught TypeError: Object is not a function or its return value is not iterable
async componentDidMount() { const { data } = await getGenres(); const genres = [{ _id: "", name: "All Genres" }, ...data]; this.setState({ movies: getMovies(), genres }); }
دریافت اطلاعات لیست فیلمها از سرویس backend
پس از دریافت لیست ژانرهای سینمایی از سرور، اکنون نوبت به جایگزینی src\services\fakeMovieService.js با یک نمونهی متصل به backend است. به همین جهت ابتدا فایل جدید src\services\movieService.js را ایجاد کرده و سپس آنرا به صورت زیر تکمیل میکنیم:
import { apiUrl } from "../config.json"; import http from "./httpService"; const apiEndpoint = apiUrl + "/movies"; function movieUrl(id) { return `${apiEndpoint}/${id}`; } export function getMovies() { return http.get(apiEndpoint); } export function getMovie(movieId) { return http.get(movieUrl(movieId)); } export function saveMovie(movie) { if (movie.id) { return http.put(movieUrl(movie.id), movie); } return http.post(apiEndpoint, movie); } export function deleteMovie(movieId) { return http.delete(movieUrl(movieId)); }
ابتدا دو متد دریافت لیست فیلمها و حذف یک فیلم را که در این کامپوننت استفاده شدهاند، import میکنیم:
import { getMovies, deleteMovie } from "../services/movieService";
async componentDidMount() { const { data } = await getGenres(); const genres = [{ id: "", name: "All Genres" }, ...data]; const { data: movies } = await getMovies(); this.setState({ movies, genres }); }
handleDelete = async movie => { const originalMovies = this.state.movies; const movies = originalMovies.filter(m => m.id !== movie.id); this.setState({ movies }); try { await deleteMovie(movie.id); } catch (ex) { if (ex.response && ex.response.status === 404) { console.log(ex); toast.error("This movie has already been deleted."); } this.setState({ movies: originalMovies }); //undo changes } };
import { toast } from "react-toastify";
اتصال فرم ثبت و ویرایش یک فیلم به backend server
تا اینجا اگر برنامه را اجرا کنیم، با کلیک بر روی لینک هر فیلم نمایش داده شدهی در صفحه، به صفحهی not-found هدایت میشویم. برای رفع این مشکل، به فایل src\components\movieForm.jsx مراجعه کرده و ابتدا
import { getGenres } from "../services/fakeGenreService"; import { getMovie, saveMovie } from "../services/fakeMovieService";
import { getGenres } from "../services/genreService"; import { getMovie, saveMovie } from "../services/movieService";
async componentDidMount() { const { data: genres } = await getGenres(); this.setState({ genres }); const movieId = this.props.match.params.id; if (movieId === "new") return; const { data: movie } = await getMovie(movieId); if (!movie) return this.props.history.replace("/not-found"); this.setState({ data: this.mapToViewModel(movie) }); }
async populateGenres() { const { data: genres } = await getGenres(); this.setState({ genres }); } async populateMovie() { try { const movieId = this.props.match.params.id; if (movieId === "new") return; const { data: movie } = await getMovie(movieId); this.setState({ data: this.mapToViewModel(movie) }); } catch (ex) { if (ex.response && ex.response.status === 404) this.props.history.replace("/not-found"); } } async componentDidMount() { await this.populateGenres(); await this.populateMovie(); }
پیشتر زمانیکه متد getMovie، یک شیء ساده را از fake service، بازگشت میداد، چنین مشکلی را نداشتیم؛ به همین جهت در سطر بعدی آن، هدایت کاربر در صورت نال بودن نتیجه، با یک return صورت میگرفت. اما اینجا بجای نال، یک استثناء را ممکن است دریافت کنیم.
مرحلهی آخر اصلاح این فرم، اتصال قسمت ثبت اطلاعات آن است که با قرار دادن یک await، پیش از متد saveMovie و async کردن متد آن، انجام میشود:
doSubmit = async () => { await saveMovie(this.state.data); this.props.history.push("/movies"); };
کدهای کامل این قسمت را از اینجا میتوانید دریافت کنید: sample-25-backend.zip و sample-25-frontend.zip
نحوه کار Expression و ایجاد یک DynamicFilter
البته میشه از عملگر "<" برای رشتهها هم استفاده کنیم که یک متد جدا برای نوع رشته ایجاد کنیم و اگه نوع پراپرتی مدل ما رشته بود و مقایسه رو طبق متد نوشته شده ما انجام بده.
case ComparisonMethod.IsNullOrEmpty: MethodInfo method = typeof(DynamicQueryExtensions).GetMethod(nameof(DynamicQueryIsNullOrEmpty), BindingFlags.NonPublic | BindingFlags.Static); return Expression.MakeBinary(ExpressionType.Equal, memberExpression, constantExpression, false, method);
private static bool DynamicQueryIsNullOrEmpty(object source, object value) { if (source is string) { return string.IsNullOrEmpty(source?.ToString()); } if (source is Array) { return source == null || ((Array)source).Length == 0; } if (source is IEnumerable) { return source == null || ((IEnumerable<object>)source).Count() == 0; } return false; }
همانطور که در قسمت اول گفته شد، React برای اینکه بتواند تگها را در زمان اجرا و به صورت پویا به روز کند، وضعیت فعلی تگها را دنبال میکند و در صورت وقوع تغییرات، تگها را به روز میکند. به این حالت Stateful گفته میشود. تگهای ساخته شده توسط React دو وضعیت را دارند. یکی وضعیت اولیه که به مرورگر ارسال شده، در حال نمایش است و ثابت، و دیگری در پشت زمینه در فایل جاوااسکریپت، در انتظار وقوع تغییری. React این دو وضعیت را با هم مقایسه میکند و اگر بین آنها تفاوتی وجود داشت، تغییرات را اعمال میکند.
در React.createClass به همراه متدهای داخلی React میتوانیم برای یک کامپوننت، وضعیتی اولیه را مشخص کنیم، تغییرات را دنبال کنیم و وضعیت فعلی را تغییر دهیم. برای روشن شدن نحوه کار، مثال قسمت قبل را که یک منو از نوشیدنیها بود، اینطور تغییر میدهیم که کاربر بتواند با inputها و یک دکمه، به لیست نوشیدنیها، مورد تازهای را اضافه کند:
var hotDrinks = [ { item: "Tea", price: "7000" }, { item: "Espresso", price: "10000" }, { item: "Hot Chocolate", price: "12000" } ]; var MenuItem = React.createClass({ render: function () { return ( <li className="list-group-item"> <span className="badge">{this.props.price}</span> <p>{this.props.item}</p> </li> ) } }); var Menu = React.createClass({ getInitialState: function () { return { menuList: this.props.data }; }, componentDidMount: function () { var component = this; $("#btnAddNewItem").click(function () { component.state.menuList.push( { item: $("#textInputItemName").val(), price: $("#textInputItemPrice").val() }); component.setState({ menuList: component.state.menuList }); }); }, render: function () { return ( <div className="row"> <div className="col-md-4"> <ul className="list-group"> {this.state.menuList.map(item => <MenuItem {...item} />)} </ul> </div> </div> ) } }); ReactDOM.render( <Menu data={hotDrinks} />, document.getElementById("reactTestContainer") );
توضیح کامپوننت Menu
getInitialState، componentDidMount، setState، state و render همگی از کتابخانه React هستند. اگر intelisense و code snippets مخصوص React را در VSCode نصب کرده باشید، دسترسی به سایر متدها و خاصیتهای کتابخانه سادهتر است.
شیء state، وضعیت کنونی کامپوننت است. وقتی دادهای را به state اختصاص میدهیم، آن را به عنوان وضعیت اولیه در نظر میگیرد. با تغییر داده، React وضعیت کامپوننت را تغییر یافته حساب میکند و به صورت خودکار تگها را دوباره با دادههای تازه میسازد. دادههای state همان دادههایی هستند که تگها با آنها ساخته میشوند؛ در بخش render.
getInitialState مثل یک سازنده عمل میکند؛ مقدار ورودی کامپوننت را به یک شیء اختصاص میدهد و آن را برمیگرداند. به کجا؟ به state. یعنی menuList عضوی از شیء state میشود. در مثال بالا و در این متد، لیست نوشیدنیها به menuList اعمال میشود.
componentDidMount باید حتما قبل render تعریف شود، به این دلیل که زمان اجرایش باید حتما بعد از اولین render باشد. این متد وظیفه دارد تغییرات مورد نظر ما را در سطح کد یا رابط کاربری دنبال کند. اگر تغییر دلخواهی به وجود آمد، وضعیت کامپوننت را به روز میکند که بعد از آن React به صورت خودکار تگها را دوباره میسازد. در مثال بالا متد به رویداد کلیک یک دکمه گوش میدهد. اگر کلیک زده شد، نام نوشیدنی جدید و قیمت آن را از inputها میخواند و به عنوان یک آیتم جدید به menuList در state اضافه میکند. اما هنوز یک قدم مانده و بدون آن React، شیء state را تغییر یافته به حساب نمیآورد. در بخش setState وضعیت جاری کامپوننت را با تغییرات اعمال شده، جایگزین میکنیم. در این نقطه React به صورت خودکار به سراغ render میرود و ادامه داستان!
همانطور که قبلا گفته شد، React.createClass و React.Component فقط در Syntax با هم تفاوت دارند. در نتیجه این مثال را میشود در حالت React.Component هم اجرا کرد.
در قسمت بعد موضوع دیگری را به نام Composability شرح میدهیم. مبحثی ساده با مثال که نشان میدهد چطور کامپوننتها را مستقل از هم بسازیم و در عین حال با هم استفاده کنیم.
public class Idea { public static List<Idea> Ideas = new List<Idea> { new Idea{Content="سایتی که در ایده به اشتراک گذاشته شود",Title = "سایت ایده ها"}, new Idea{Content="عینک گوگل را فارسی کنم",Title = "عینک گوگل"}, }; public string Content { get; set;} public string Title { get; set; } }
[TestFixture] public class IdeaTest { [Test] public void ShouldDisplayListOfIdea() { var viewResult = new IdeaController().Index() as ViewResult; Assert.AreEqual(Idea.Ideas, viewResult.Model) Assert.IsNotNull(viewResult.Model); } }
public class IdeaController : Controller { public ActionResult Index() { return View(Idea.Ideas); } }
[Test] public void ShouldLoadCreateIdeaView() { var viewResult = new IdeaController().Create() as ViewResult; Assert.AreEqual(string.Empty, viewResult.ViewName); }
حال نوبت به پیاده سازی اکشن رسید.:
public ActionResult Create() { return View(); }
[Test] public void ShouldAddIdeaItem() { var idea = new Idea { Title = "شبکه اجتماعی ", Content = " شبکه اجتماعی سینمایی" }; var redirectToRouteResult = new IdeaController().Create(idea) as RedirectToRouteResult; Assert.Contains(idea, Idea.Ideas); Assert.AreEqual("Index",redirectToRouteResult.RouteValues["action"]); }
public ActionResult Create(Idea idea) { Idea.Ideas.Add(idea); return RedirectToAction("Index"); }
WebStorage
- مکانیزم ذخیره سازی:
- چند نسخه از مرورگر
- محدودیت حجمی
- session storage
- local storage
- SessionStorage
- LocalStorage
با اینکه توصیه نامه W3C از پایان کار پیاده سازی این قابلیت خبر میدهد ولی در حال حاضر که این مقاله تدوین شده است هنوز نهایی اعلام نشده است. برای پشتیبانی مرورگرهای قدیمی از webstorage میتوان از فایل جاوااسکریپتی Store.js کمک گرفت.
مفاهیم امنیتی و محافظت از داده ها
محدودیتهای حمایتی و حفاظتی webstorage دقیقا همانند کوکی هاست. به این معنی که وب سایتهای دیگر توانایی اتصال به webstorage سایت دیگری را ندارند. البته این مورد ممکن است برای وب سایت هایی که بر ساب دومین تکیه کردهاند ایجاد مشکل کند. برای حل این مسائل میتوانید از کتابخانههای سورس بازی چون Cross Storage که توسط Zendesk ارائه شده است، استفاده کرد.
همانند هر مکانیزم ذخیره سازی سمت کلاینت، مواردی توصیه میگردد که رعایت آنها از لحاظ امنیتی پر اهمیت است. به عنوان نمونه ذخیرهی اطلاعات شخصی و موارد حساس توصیه نمیگردد؛ چرا که احتمال دسترسی آسان نفوذگران به دادههای محلی و خواندن آنها وجود دارد.
Data Integrity یا یکپارچگی دادهها نیز در نظر گرفته شده است. باید حفاظتی در برابر عدم موفقیت ذخیره سازی دادهها نیز وجود داشته باشد. این عدم موفقیتها میتواند به دلایل زیر رخ دهد:
- اگر کاربر قابلیت webstorage را غیرفعال کرده باشد.
- اگر فضایی برای کاربر باقی نمانده باشد.
- با محدودیت حجمی webstorage مواجه شده است.
- با مواجه شدن با خطاها یک استثنا صادر میشود که میتوانید آن را دریافت و کنترلی را روی برنامه تحت وب داشته باشید. یک نمونه استثنا QuotaExceededError
IndexedDB
یکی از فرایندهای ذخیره سازی دادهها که همان مزایای webstorage را ارائه میدهد indexed Database API است. این قابلیت از HTML 5 اضافه شده است و قسمتی از مشخصات webstorage شناخته نمیشود. برای همین مستنداتی در حوزهی webstorage برای آن پیدا نخواهید کرد ولی قابلیتهایی فراتر از webstorage دارد.
این قابلیت پیچیدگی بیشتری را نسبت به خود webstorage ایجاد میکند، ولی فرصتهای بسیاری را برای ذخیره سازی دادههایی با معماریهای پیچیدهتر و رابطهها را میدهد. با استفاده از IndexedDB دادهها به شکل دیتابیسهای سمت سرور RDMS ذخیره میشوند و این قابلیت را دارید که به سمت آن کوئری هایی مشابه بانکهای اطلاعاتی سمت سرور را ارسال کنید.
در قسمت آتی نحوه کدنویسی آن را فرا خواهیم گرفت.
Borrowing در Rust
Borrowing عمل ایجاد ارجاع به یک ارزش، بدون در اختیار گرفتن مالکیت است. در Rust، ارجاعات، مشابه اشارهگرهای معمولی هستند؛ اما با قوانین و محدودیتهایی اضافه شدهاند. ویژگیهای اصلی Borrowing عبارتند از:
- References اشارهگرهایی با قوانین و محدودیتها هستند.
- References مالکیت ارزشها را نمیگیرند.
دلایل Borrowing در Rust
چندین دلیل وجود دارند که چرا Borrowing در Rust سودمند است:
Performance : به کمک Borrowing، با انتقال ارجاع به یک مقدار بجای clone، عملکرد بهبود بخشیده میشود. به عنوان مثال هنگامیکه یک تابع، دارای پارامتری مانند یک رشته است، انتقال مرجع، کارآمدتر از تکرار مقدار است.
Ownership Management : در مواردی که مالکیت، مورد نیاز یا مطلوب نیست، Borrowing یک راه حل ایدهآل است. با عدم مالکیت، یک تابع نباید مسئول تصمیمگیری در مورد زمان پاکسازی یک مقدار باشد.
قوانین Borrowing در Rust
Rust دو قانون اصلی Borrowing را اعمال میکند:
- در هر زمان معین، میتوانید یک مرجع قابل تغییر یا هر تعداد مرجع تغییرناپذیر داشته باشید.
- مراجع باید همیشه معتبر باشند.
این قوانین به حل دو مشکل عمده در برنامه نویسی کمک میکنند:
Data Races : مشکل Data Races زمانی رخ میدهد که دو رشته سعی میکنند مکان حافظهی یکسانی را به طور همزمان بخوانند و یا بنویسند که منجر به نتایج غیر قطعی میشود. قوانین Borrowing در Rust تضمین میکند که از چنین درگیریهایی جلوگیری میشود.
Dangling References : یک dangling reference به حافظهی نامعتبری اشاره میکند. با اطمینان از اینکه مراجع همیشه معتبر هستند، قوانین وام گیری Rust از وقوع ارجاعات آویزان جلوگیری میکند.
ویژگیهای قابل توجه Borrowing
Immutable References by Default : در Rust، یک reference به طور پیش فرض تغییر ناپذیر است. این انتخاب طراحی بر اهمیت Borrowing برای برنامه نویسی ایمن و کارآمد تاکید دارد.
Automatic Dereferencing: در Rust ویژگی عدم ارجاع خودکار وجود دارد؛ به این معنا که توسعه دهندگان مجبور نیستند به صراحت، ارجاع را پیاده سازی کنند. این روند، کار با ارزشهای borrowed را ساده میکند.
Rust یک زبان برنامه نویسی قدرتمند است که ایمنی و عملکرد را از طریق ویژگیهایی مانند Borrowing در اولویت قرار میدهد. با درک مفهوم Borrowing و رعایت قوانین آن، توسعه دهندگان میتوانند از پتانسیل کامل Rust برای ایجاد نرم افزاری کارآمد، قابل اعتماد و همزمان استفاده کنند.
using System; using System.Linq; using System.Collections.Generic; using System.IO; using System.Web.Mvc; namespace SecurityModule { [AttributeUsage(AttributeTargets.Method, AllowMultiple = false)] public sealed class AllowUploadSafeFilesAttribute : ActionFilterAttribute { static readonly IList<string> ExtToFilter = new List<string> { ".aspx", ".asax", ".asp", ".ashx", ".asmx", ".axd", ".master", ".svc", ".php" , ".php3" , ".php4", ".ph3", ".ph4", ".php4", ".ph5", ".sphp", ".cfm", ".ps", ".stm", ".htaccess", ".htpasswd", ".php5", ".phtml", ".cgi", ".pl", ".plx", ".py", ".rb", ".sh", ".jsp", ".cshtml", ".vbhtml", ".swf" , ".xap", ".asptxt" }; static readonly IList<string> NameToFilter = new List<string> { "web.config" , "htaccess" , "htpasswd", "web~1.con" }; static bool canUpload(string fileName) { if (string.IsNullOrWhiteSpace(fileName)) return false; fileName = fileName.ToLowerInvariant(); var name = Path.GetFileName(fileName); var ext = Path.GetExtension(fileName); if (string.IsNullOrWhiteSpace(name)) throw new InvalidOperationException("Uploaded file should have a name."); return !ExtToFilter.Contains(ext) && !NameToFilter.Contains(name) && !NameToFilter.Contains(ext) && //for "file.asp;.jpg" files ExtToFilter.All(item => !name.Contains(item)); } public override void OnActionExecuting(ActionExecutingContext filterContext) { var files = filterContext.HttpContext.Request.Files; foreach (string file in files) { var postedFile = files[file]; if (postedFile == null || postedFile.ContentLength == 0) continue; if (!canUpload(postedFile.FileName)) throw new InvalidOperationException(string.Format("You are not allowed to upload {0} file.", Path.GetFileName(postedFile.FileName))); } base.OnActionExecuting(filterContext); } } }
استفاده از این فیلتر سفارشی به نحو زیر است:
[AllowUploadSafeFiles] public ActionResult UploadFile(HttpPostedFileBase file)