بررسی نکات کاربردی استفاده از ajax در mvc از جمله بررسی مقادیر برگشتی از این درخواستها و نکته انتقال کاربر به کنترلر جدید در هنگام موفقیت آمیز بودن اجرای درخواست اجاکسی که توسط دستور window.location قابل انجام است .و برای ارسال پارامتر نیز میتوان از tempdata استفاده کرد .
تا اینجای کار ساخت کامپوننت‌ها را با React.createClass که تفاوتی با توسعه (ارث بری) از کلاس React.Component ندارد، انجام داده‌ایم. اما ساخت کامپوننت‌ها به صورت یک تابع هم مزیت‌هایی را دارد. اول از همه باید بدانیم که ساخت کامپوننت توسط تابع، بدون وضعیت خواهد بود که به آن Stateless میگویند. به دلیل نداشتن وضعیت، کامپوننت‌های تابعی را کمی بهتر میشود برای استفاده مجدد به کار برد. در کامپوننت‌های غیر تابعی که Stateful هستند به دلیل احتمال وابستگی وضعیت کامپوننت به خارج از کلاس، مانند مثال قسمت چهارم که کامپوننت در انتظار کلیک یک دکمه خاص توسط کاربر بود، مدیریت استفاده مجدد ازکامپوننت چالش برانگیز خواهد شد.
برای مدیریت بهتر کامپوننت‌ها جهت استفاده مجدد از آنها بهتر است ورودی‌های کامپوننت را اعتبارسنجی کنیم. این ورودی‌ها چه برای استفاده داخلی کامپوننت، یا جهت مشخص کردن وضعیت آن، بر رفتار کامپوننت تاثیر زیادی دارند. React مجموعه‌ای از اعتبار سنجی‌ها را دارد که میشود به کامپوننت اضافه کرد. باید توجه داشته باشیم که پیام‌های خطای این اعتبارسنجی‌ها فقط در حالت Development Mode قابل استفاده هستند. به زبان ساده اگر از react.min.js استفاده کنید، پیام‌های خطا را نخواهید دید. باید فایل‌ها را به نوع react.js تبدیل کنید. اعتبارسنجی React در زمان توسعه و برای توسعه دهندگان استفاده میشود.
مثال نوشیدنی‌ها در قسمت چهارم میتوانست نام نوشیدنی و قیمت آن را نمایش دهد و همچنین میتوانستیم به لیست نوشیدنی‌ها، موردی را اضافه کنیم. اگر ورودی قیمت، اعتبارسنجی نشود، میتوان رشته‌ای را بجای عدد به عنوان قیمت به کامپوننت ارسال کرد. نحوه اعتبارسنجی قیمت نوشیدنی‌ها به صورت زیر است.
const MenuItem = props => (
<li className="list-group-item">
<span className="badge">{props.price}</span>
<p>{props.item}</p>
</li>
)
MenuItem.propTypes = {
price: React.PropTypes.number
}; شیء propTypes را به کامپوننت اضافه کرده‌ایم و در تنظیمات آن میتوانیم برای هر پارامتر ورودی یکی از اعضای PropTypes از React را که مناسب حال پارامتر است، انتخاب کنیم. در مثال بالا مشخص کرده‌ایم که ورودی price باید عدد باشد و اگر مثلا رشته‌ای را بجای عدد ارسال کنیم، پیام خطای زیر را در Console خواهیم داشت.
Warning: Failed prop type: Invalid prop `price` of type `string` supplied to `MenuItem`, expected `number`.
in MenuItem (created by Menu)
in Menu یا میتوانستیم از React.PropTypes.number.isRequired استفاده کنیم تا درج مقداری برای این ورودی الزامی باشد. اگر اعتبارسنجی‌های React کافی نبودند میتوانیم اعتبارسنجی‌های سفارشی خودمان را ایجاد کنیم. در مثال زیر میخواهیم ورودی price بیشتر از 15000 نباشد.
MenuItem.propTypes = {
price: (props, price)=>{
if(props[price] > 15000){
return new Error("Too expensive!");
}
}
}; let MenuItem = React.createClass({
propTypes: {
price: React.PropTypes.number
}
});
class MenuItem extends React.Component{
static propTypes = {
price: React.PropTypes.number
};
} نوعهای دیگر برای اعتبارسنجی شامل موارد زیر هستند و البته مرجع تمام اعتبارسنجی‌های React را میتوانید در اینجا بررسی کنید.
یکی از امکانات مفید دیگر برای مدیریت مقدارهای ورودی، مشخص کردن مقدار پیش‌فرضی برای یک پارامتر است. برای مثال اگر برای قیمت یک نوشیدنی مقداری وارد نشد، یک حداقل قیمت برای آن در نظر بگیریم، هر چند که ایده و روشی اشتباه است!
MenuItem.defaultProps = {
price: 1000
}; همانطور که می‌بینید روش کار مشابه با اعتبارسنجی است و برای مشخص کردن مقدار پیش‌فرض برای React.creatClass از متد getDefaultProps که عضوی از React است، استفاده میکنیم.
let MenuItem = React.createClass({
getDefaultProps() {
return { price: 200 }
},
render() {
return (
<li className="list-group-item">
<span className="badge">{this.props.price}</span>
<p>{this.props.item}</p>
</li>
);
}
}); 
class HandlerChain
{
setNextObj(nextObjInChain){}
processMultiple(req){
console.log("No multiple for: " + req.getMultiple());
}
}
class Multiple
{
constructor(multiple){
this.multiple = multiple;
}
getMultiple(){
return this.multiple;
}
}
class MultipleofTwoHandler extends HandlerChain
{
constructor(){
super()
this.nextObjInChain = new HandlerChain()
}
setNextObj(nextObj){
this.nextObjInChain = nextObj;
}
processMultiple(req) {
if ((req.getMultiple() % 2) == 0) {
console.log("Multiple of 2: " + req.getMultiple());
}else{
this.nextObjInChain.processMultiple(req);
}
}
}
class MultipleofThreeHandler extends HandlerChain
{
constructor(){
super()
this.nextObjInChain = new HandlerChain()
}
setNextObj(nextObj){
this.nextObjInChain = nextObj;
}
processMultiple(req)
{
if ((req.getMultiple() % 3) == 0) {
console.log("Multiple of 3: " + req.getMultiple());
}else{
this.nextObjInChain.processMultiple(req);
}
}
}
class MultipleofFiveHandler extends HandlerChain
{
constructor(){
super()
this.nextObjInChain = new HandlerChain()
}
setNextObj(nextObj){
this.nextObjInChain = nextObj;
}
processMultiple(req) {
if ((req.getMultiple() % 5) == 0) {
console.log("Multiple of 5: " + req.getMultiple());
}else{
this.nextObjInChain.processMultiple(req);
}
}
}
//configuring the chain of handler objects
var c1 = new MultipleofTwoHandler();
var c2 = new MultipleofThreeHandler();
var c3 = new MultipleofFiveHandler();
c1.setNextObj(c2);
c2.setNextObj(c3);
//the chain handling different cases
c1.processMultiple(new Multiple(95)); // Multiple of 5: 95
c1.processMultiple(new Multiple(50)); // Multiple of 2: 50
c1.processMultiple(new Multiple(9)); // Multiple of 3: 9
c1.processMultiple(new Multiple(4)); // Multiple of 2: 4
c1.processMultiple(new Multiple(21)); // Multiple of 3: 21
c1.processMultiple(new Multiple(23)); // No multiple for: 23 class HandlerChain
{
setNextObj(nextObjInChain){}
processMultiple(req){
console.log("No multiple for: " + req.getMultiple());
}
} class MultipleofTwoHandler extends HandlerChain
{
constructor(){/*code*/}
setNextObj(nextObj){/*code*/}
processMultiple(req){/*code*/}
}
class MultipleofThreeHandler extends HandlerChain
{
constructor(){/*code*/}
setNextObj(nextObj){/*code*/}
processMultiple(req){/*code*/}
}
class MultipleofFiveHandler extends HandlerChain
{
constructor(){/*code*/}
setNextObj(nextObj){/*code*/}
processMultiple(req){/*code*/}
} constructor(){
super()
this.nextObjInChain = new HandlerChain()
} setNextObj(nextObj){
this.nextObjInChain = nextObj;
} var c1 = new MultipleofTwoHandler(); var c2 = new MultipleofThreeHandler(); var c3 = new MultipleofFiveHandler(); c1.setNextObj(c2); c2.setNextObj(c3);
class Multiple
{
constructor(multiple){
this.multiple = multiple
}
getMultiple(){
return this.multiple;
}
} processMultiple(req) {
if ((req.getMultiple() % 2) == 0) {
console.log("Multiple of 2: " + req.getMultiple());
}else{
this.nextObjInChain.processMultiple(req);
}
} c1.processMultiple(new Multiple(95)) // Multiple of 5: 95
namespace EntitySample1.DomainClasses
{
public class Person
{
public int Id { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public DateTime BirthDate { get; set; }
public virtual PersonInfo PersonInfo { get; set; }
public virtual ICollection<PhoneNumber> PhoneNumbers { get; set; }
public virtual ICollection<Address> Addresses { get; set; }
}
}namespace EntitySample1.DomainClasses
{
public class PersonInfo
{
public int Id { get; set; }
public string Note { get; set; }
public string Major { get; set; }
}
}namespace EntitySample1.DomainClasses
{
public enum PhoneType
{
Home,
Mobile,
Work
}
public class PhoneNumber
{
public int Id { get; set; }
public string Number { get; set; }
public PhoneType PhoneType { get; set; }
public virtual Person Person { get; set; }
}
}namespace EntitySample1.DomainClasses
{
public class Address
{
public int Id { get; set; }
public string City { get; set; }
public string Street { get; set; }
public virtual ICollection<Person> Persons { get; set; }
}
}namespace EntitySample1.DataLayer
{
public class PhoneBookDbContext : DbContext
{
public DbSet<Person> Persons { get; set; }
public DbSet<PhoneNumber> PhoneNumbers { get; set; }
public DbSet<Address> Addresses { get; set; }
}
} private static void ManualDetectChanges()
{
using (var context = new PhoneBookDbContext())
{
context.Configuration.AutoDetectChangesEnabled = false; // turn off Auto Detect Changes
var p1 = context.Persons.Single(p => p.FirstName == "joe");
p1.LastName = "Brown";
Console.WriteLine("Before DetectChanges: {0}", context.Entry(p1).State);
context.ChangeTracker.DetectChanges(); // call detect changes manually
Console.WriteLine("After DetectChanges: {0}", context.Entry(p1).State);
}
}Before DetectChanges: Unchanged After DetectChanges: Modified
private static void AddMultiplePerson()
{
using (var context = new PhoneBookDbContext())
{
context.Configuration.AutoDetectChangesEnabled = false;
context.Persons.Add(new Person
{
FirstName = "brad",
LastName = "watson",
BirthDate = new DateTime(1990, 6, 8)
});
context.Persons.Add(new Person
{
FirstName = "david",
LastName = "brown",
BirthDate = new DateTime(1990, 6, 8)
});
context.Persons.Add(new Person
{
FirstName = "will",
LastName = "smith",
BirthDate = new DateTime(1990, 6, 8)
});
context.SaveChanges();
}
} private static void DetectRelationshipChanges()
{
using (var context = new PhoneBookDbContext())
{
var phone1 = context.PhoneNumbers.Single(x => x.Number == "09351234567");
var person1 = context.Persons.Single(x => x.FirstName == "will");
person1.PhoneNumbers.Add(phone1);
Console.WriteLine("Before DetectChanges: {0}", phone1.Person.FirstName);
context.ChangeTracker.DetectChanges(); // ralationships fix-up
Console.WriteLine("After DetectChanges: {0}", phone1.Person.FirstName);
}
}Before DetectChanges: david After DetectChanges: will
تا قبل از فراخوانی تشخیص تغییرات(DetectChanegs)، هنوز phone1 منتسب به شخص قدیمی(david) بوده، ولی پس از فراخوانی DetectChanges ، اصلاح رابطه رخ داده و همه چیز با یکدیگر منطبق می‌شوند.
فعال سازی و کار با پروکسی‌های ردیابی تغییر
اگر پروفایلر کارایی شما، فراخوانی‌های بیش از اندازه DetectChnages را به عنوان یک مشکل شناسایی کند، و یا شما ترجیح می‌دهید که اصلاح رابطه به صورت بلادرنگ صورت گیرد ، ردیابی تغییر پروکسی‌های پویا، به عنوان گزینه ای دیگر مطرح میشود.فقط با چند تغییر کوچک در کلاس‌های POCO، EF قادر به ساخت پروکسی‌های پویا خواهد بود.پروکسی‌های ردیابی تغییر به EF اجازه ردیابی تغییرات در همان لحظه ای که ما تغییری در اشیای خود می‌دهیم را می‌دهند و همچنین امکان انجام اصلاح رابطه را در هر زمانی که تغییرات روابط را تشخیص دهد، دارد.
برای اینکه پروکسی ردیابی تغییر بتواند ساخته شود، باید قوانین زیر رعایت شود:
• کلاس باید public باشد و seald نباشد.
• همه‌ی خواص(properties) باید virtual تعریف شوند.
• همه‌ی خواص باید getter و setter با سطح دسترسی public داشته باشند.
• همه‌ی خواص راهبری مجموعه ای باید نوعشان، از نوع ICollection<T> تعریف شوند.
کلاس Person مثال خود را به گونه ای بازنویسی کرده ایم که تمام قوانین فوق را پیاده سازی کرده باشد.
نکته: توجه داشته باشید که ما دیگر در داخل سازنده کلاس ،کدی نمی‌نویسیم و منطقی که باعث نمونه سازی اولیه خواص راهبری می‌شدند، را پیاده سازی نمی‌کنیم. این پروکسی ردیاب تغییر، همه‌ی خواص راهبری مجموعه ای را تحریف کرده و ار نوع مجموعه ای مخصوص خود(EntityCollection<T>) استفاده می‌کند. این نوع مجموعه ای، هر تغییری که در این مجموعه صورت می‌گیرد را زیر نظر گرفته و به ردیاب تغییر گزارش میدهد. اگر تلاش کنید تا نوع دیگری مانند List<T> که معمولا در سازنده کلاس از آن استفاده می‌کردیم را به آن انتساب دهیم، پروکسی، استثنایی را پرتاب می‌کند.
namespace EntitySample1.DomainClasses
{
public class Person
{
public virtual int Id { get; set; }
public virtual string FirstName { get; set; }
public virtual string LastName { get; set; }
public virtual DateTime BirthDate { get; set; }
public virtual PersonInfo PersonInfo { get; set; }
public virtual ICollection<PhoneNumber> PhoneNumbers { get; set; }
public virtual ICollection<Address> Addresses { get; set; }
}
} private static void TestForChangeTrackingProxy()
{
using (var context = new PhoneBookDbContext())
{
var person = context.Persons.First();
var isProxy = person is IEntityWithChangeTracker;
Console.WriteLine("person is a proxy: {0}", isProxy);
}
}Before DetectChanges: Modified After DetectChanges: Modified
Before DetectChanges: will After DetectChanges: will
private static void CreateNewProxies()
{
using (var context = new PhoneBookDbContext())
{
var phoneNumber = new PhoneNumber { Number = "987" };
var davidPersonProxy = context.Persons.Create();
davidPersonProxy.FirstName = "david";
davidPersonProxy.PhoneNumbers.Add(phoneNumber);
Console.WriteLine(phoneNumber.Person.FirstName);
}
}var newStudent = context.Persons.Create<Student>();
private static void PrintPersonsWithoutChangeTracking()
{
using (var context = new PhoneBookDbContext())
{
var persons = context.Persons.AsNoTracking().ToList();
foreach (var person in persons)
{
Console.WriteLine(person.FirstName);
}
}
}var query = from p in context.Persons.AsNoTracking()
where p.FirstName == "joe"
select p;شما همچنین از AsNoTracking میتوانید برای تبدیل یک کوئری LINQ موجود، به یک کوئری فاقد ردیابی استفاده کنید. این نکته را به یاد داشته باشید که فقط AsNoTracking بر روی کوئری، فرانخوانده شده است، بلکه متغیر query را با نتیجه‌ی حاصل از فراخوانی AsNoTracking بازنویسی(override) کرده است و این، از این جهت لازم است که AsNoTracking ،تغییری در کوئری ای که بر روی آن فراخوانده شده نمی‌دهد، بلکه یک کوئری جدید بر می‌گرداند.
var query = from p in context.Persons
where p.FirstName == "joe"
select p;
query = query.AsNoTracking(); در Asp.net دو چرخه‌ی حیات مهم
وجود دارند که اساس چارچوب MVC را تشکیل می‌دهند
:
تمرکز بنده بیشتر بر روی روند و مسیری است که یک درخواست طی می‌کند و قصد دارم با بهره گیری از کتاب Pro Asp.net Mvc 5 و دیگر منابع، چرخه‌ی حیات درخواست را در برنامه‌های Mvc بررسی کرده و در مقالات آتی ماژولها و هندلرها را بررسی کنم.
در asp.net ، برنامه global فایلهای شامل دو فایل Global.asax , Global.asax.cs است.
فایل Global.asax که هیچ گاه نیاز به ویرایش آن نداریم محتویاتی مانند زیر دارد:
<%@ Application Codebehind="Global.asax.cs" Inherits="YourAppName.MvcApplication" Language="C#" %>
در این مقاله منظور از فایل global فایل Global.asax.cs است که مشتق شده از کلاس System.Web.HttpApplication است:
public class MvcApplication : System.Web.HttpApplication
{
protected void Application_Start()
{
...//
}
} Asp.net برای پاسخگویی به درخواستهای واصله، وهله‌هایی از کلاس MvcApplication را می‌سازد ولی این دو متد صرفا در نقاط شروع و پایان برنامه فراخوانی شده و عملا در وهله‌های یاد شده صدا زده نخواهند شد و به جای آنها رویدادهایی را که در ذیل آنها را معرفی میکنیم، فراخوانی شده و چرخه‌ی حیات درخواست را برای ما مشخص می‌سازند .
BeginRequest : به عنوان اولین رویداد، به محض وصول یک درخواست جدید رخ خواهد داد.AuthenticateRequest ,PostAuthenticateRequest : رویداد AuthenticateRequest برای شناسایی کاربر ارسال کننده درخواست، کاربرد دارد و پس از پردازش کلیه‌ی توابع، رویداد PostAuthenticateRequest صدا زده میشود.
AuthorizeRequest :به‌هنگام صدور مجوزهای یک درخواست رخ میدهد و مشابه رویداد بالا پس از پردازش کلیه‌ی توابع، رویداد PostAuthorizeRequest صدا زده خواهد شد.ResolveRequestCache : پس از صدور مجوزهای یک درخواست در رویداد authorization زمانیکه ماژولهای کش می‌خواهند اطلاعاتی را از کش سرور مطالبه کنند، رخ میدهد و به مانند دو رخداد قبلی، PostResolveRequestCache نیز پس از اتمام پردازش توابع رویداد رخ میدهد.
MapRequestHandler : زمانی که Asp.net می‌خواهد هندلری را برای پاسخگویی به درخواست واصله انتخاب کند رخ میدهد و PostMapRequestHandler نیز پس از این انتخاب، تریگر میشود.AcquireRequestState : جهت بدست آوردن داده‌هایی نظیر سشن و ... مرتبط با درخواست جاری کاربرد داشته و PostAcquireRequestState نیز پس از پردازش توابع رویداد رخ خواهد داد.
PreRequestHandlerExecute : بالافاصله قبل و همچنین بلافاصله بعد از این که یک هندلر بخواهد درخواستی را پردازش کند، رخ میدهد. PostRequestHandlerExecute نیز همانند دیگر رویدادهای گذشته، پس از اتمام پردازش توابع، این رویداد رخ خواهد داد.ReleaseRequestState : زمانی رخ میدهد که داده‌های مرتبط با درخواست جاری، در ادامه‌ی روند پردازش درخواست مورد نیاز نباشند و پس از پردازش توابع رویداد، PostReleaseRequestState رخ خواهد داد .
UpdateRequestCache : به جهت اینکه ماژولهای مسئول کش، توانایی به روز رسانی داده‌های خود، برای پاسخگویی به درخواستهای بعدی را داشته باشند، این رویداد رخ میدهد.
LogRequest : قبل از انجام عملیات لاگین برای درخواست جاری رخ میدهد و پس از پردازش توابع رویداد نیز PostLogRequest تریگر میشود.EndRequest : پس از پایان کار پردازش درخواست جاری و مهیا شدن پاسخ مرتبط جهت ارسال به مرورگر تریگر خواهد شد.
PreSendRequestHeaders : قبل از ارسال HTTP headers به مرورگر این رویداد رخ خواهد داد.
PreSendRequestContent : بعد از ارسال شدن هدرها و قبل از ارسال محتوای صفحه به مرورگر رخ میدهد.Error : هر زمان و در هر مرحله از پردازش درخواست، چنانچه خطایی صورت پذیرد این رویداد رخ خواهد داد.
فریم ورک Asp.net جهت مدیریت بهتر یک درخواست، در تمام مسیر پردازش، رویدادهای بالا را مهیا کرده است. در ادامه نحوه‌ی هندل کردن رویدادهای چرخه‌ی حیات درخواست را در فایل global توضیح می‌دهم. هر چند که استفاده از این فایل بدین منظور، صرفا برای مدیریت مسائل ابتدایی مناسب بوده و در یک پروژه‌ی بزرگ موجب به هم ریختگی فایل global با کدهای زیاد و خوانایی پایین بوده که قابلیت استفاده مجدد در دیگر پروژه‌ها را نیز ندارد.
Asp.net این مشکل را با معرفی ماژولها که در مقالات آتی توضیح خواهم داد، مرتفع کرده است.
در فایل global هر گاه متدی را با پیشوند Application_ و نام یکی از رویدادهای بالا بنویسید Asp.net آن را به عنوان هندلری برای رویداد مذکور می‌شناسد. به عنوان مثال متدی با نام Application_BeginRequest متد رویداد BeginRequest میباشد.
ابتدا یک پروژه‌ی MVC جدید را به نام SimpleApp ایجاد کرده و فایل global آن را مطابق ذیل تغییر می‌دهیم:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
namespace SimpleApp
{
public class MvcApplication : System.Web.HttpApplication
{
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
RouteConfig.RegisterRoutes(RouteTable.Routes);
}
protected void Application_BeginRequest()
{
RecordEvent("BeginRequest");
}
protected void Application_AuthenticateRequest()
{
RecordEvent("AuthenticateRequest");
}
protected void Application_PostAuthenticateRequest()
{
RecordEvent("PostAuthenticateRequest");
}
private void RecordEvent(string name)
{
List<string> eventList = Application["events"] as List<string>;
if (eventList == null)
{
Application["events"] = eventList = new List<string>();
}
eventList.Add(name);
}
}
} در اینجا متدی به نام RecordEvent را در کدهای ذکر شده مشاهده می‌کنید که نام یک رویداد را دریافت و جهت در دسترس قرار دادن در کل برنامه به خاصیت Application از کلاس HttpApplication نسبت داده و متد مذکور را از سه متد دیگر فراخوانی کرده‌ایم. این متدها در زمان رخ دادن رویدادهای BeginRequest, AuthenticateRequest, PostAuthenticateRequest صدا زده خواهند شد.
حال جهت نمایش اطلاعات رویداد نیاز است تغییراتی مشابه ذیل در کنترلر Home ایجاد نماییم.
using System.Web.Mvc;
namespace SimpleApp.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View(HttpContext.Application["events"]);
}
}
} ویوی مرتبط با اکشن متد index را مطابق کدهای ذیل بازنویسی میکنیم:
@model List<string>
@{
ViewBag.Title = "Events List";
}
<h5>Events</h5>
<table>
@foreach (string eventName in Model)
{
<tr>
<td>@eventName</td>
</tr>
}
</table> 