آموزش نکات کاربردی ASP.NET MVC 4 (قسمت پنجم: بخش دوم helperها)

قسمت پنجم :

در این بخش به دو مورد دیگر از کاربرد کتابخانه System.Web.Helpers پرداخته و خواهیم آموخت که چگونه با استفاده از آن، می توان به راحتی به ارسال ایمیل و استفاده از نمودار (Chart) در پروژه های خود پرداخت. ضمنا یادآوری کنم که این بخش در واقع تکمیل پروژه قبلی است و پروژه جدیدی ایجاد نمی کنیم.

ارسال ایمیل

برای ارسال ایمیل از کلاس WebMail استفاده می کنیم؛ روش کار هم ساده است؛ ابتدا دو متد ذیل را به کنترلر HelperController.cs بیافزایید:

public ActionResult SendMail()
{
  return View();
}
[HttpPost]
public ActionResult SendMail2()
{
  try
  {
  var subject = Request["txtSubject"];
  var to = Request["txtTo"];
  var message = Request["txtMessage"];
  WebMail.SmtpServer = "mail.domain.com";
  WebMail.SmtpPort = 25;
  WebMail.EnableSsl = true;
  WebMail.UserName = "username";
  WebMail.Password = "password";
  WebMail.From = "[e-mail]";
  WebMail.Send(to: to, subject: subject, body: message);
  ViewBag.Message = "ایمیل فرستاده شد";
  }
  catch (Exception ex)
  {
  ViewBag.Message = "خطا: " + ex.Message;
  }    
  return View("SendMail");
}

بر روی متد اول کلیک راست کرده و با انتخاب Add View... یک View خالی ایجاد کنید؛ سپس کد cshtml ذیل را در آن بنویسید:

@{
  ViewBag.Title = "SendMail";
}
@using (Html.BeginForm("SendMail2", "Helper", FormMethod.Post))
{
  <fieldset style="direction:rtl">
  <legend>فرستادن ایمیل:legend>
   <p>موضوع:<input type="text" name="txtSubject" />p>
   <p>گیرنده:<input type="text" name="txtTo" />p>
   <p><textarea name="txtMessage" cols="45" rows="4">textarea>p>
   <input type="submit" value="فرستادن" />
  fieldset>
  if (IsPost)
  {
   <span>@ViewBag.Messagespan>
  }
}

توضیح: متد اول فقط برای رفتن به صفحه فرستادن ایمیل است؛ اما در متد دوم که کار ارسال ایمیل را انجام می دهد، ابتدا سه متغیر اعلان کردیم که موضوع، گیرنده و متن پیام ایمیل را از TextBoxها می گیرد؛ سپس مشخصات سرور، نام کاربری، رمز عبور و... را مشخص می کنیم (طبق مشخصاتی که هاست شما به شما می دهد)؛ آنگاه با استفاده از متد Send ایمیل را می فرستیم. 
در کدهای cshtml هم یک فرم ساده (مشابه شکل بعد) ایجاد می کنیم که شامل سه تکست باکس است:

بد نیست بدانید شکل کامل متد Send چنین است:

public static void Send(string to, string subject,
 string body,

 string from = null, string cc = null,
 IEnumerable filesToAttach = null,

 bool isBodyHtml = true,

 IEnumerable additionalHeaders = null,
 string bcc = null, string contentEncoding = null, 

       string headerEncoding = null,

 string priority = null, string replyTo = null);

 

رسم نمودار (Chart)توسط کلاس Chart به راحتی می توان به رسم نمودار پرداخت؛ یک مثال ساده چنین است: 

@{
  ViewBag.Title = "ChartBasic";
}
<h2>ChartBasich2>
@{
  var chart = new Chart(width: 600, height: 400)
    .AddTitle("Students positions:")
    .AddSeries(
    name: "Student",
      xValue: new[] {"Ali", "Mohammad", "Mehdi", "Ahmad", "Hasan"},
      yValues: new[] { "18", "18.50", "19", "16", "17" })
    .Write();
}

در این مثال از دو آرایه برای مقادیر افقی و عمودی استفاده شده است؛ شکل ذیل اجرای آن را نشان می دهد:

البته در متد AddSeries می توان نوع نمودار (Column, Bar, Pie, Stock,...) را نیز مشخص کرد؛ اگر مثال بالا را این گونه تغییر دهید:

   .AddSeries(
  name: "Student", chartType:"Pie",
  ....

شکل ذیل را خواهید داشت:

سازنده کلاس Chart همچنین می تواند شکل گرافیکی (تم) دلخواه نمودار را تعیین کند؛ خود این کلاس چند تم به رنگ های مختلف دارد؛ همچنین شما می توانید قالب دلخواه خود را داشته باشید. به طور نمونه اگر مثال بالا را این گونه تغییر دهید:

var chart = new Chart(
width: 600, height: 400, theme: ChartTheme.Vanilla3D
)
....

شکل ذیل را خواهید داشت:


رسم نمودار با داده های دیتابیسبه طور معمول در پروژه های خود می خواهیم داده های یک جدول از بانک اطلاعات را به شکل نمودار نشان دهیم؛ کلاس Chart دو متد برای این کار تدارک دیده است: اول: متد DataBindTable برای ایجاد نمودار بر اساس دو فیلد (افقی و عمودی)؛ دوم: متد DataBindCrossTable برای ایجاد نمودار بر اساس سه فیلد (افقی، عمودی و فیلدی برای تعیین گروه بندی).
قبل از هرچیز باید یادآور شوم که من به جدول Students (که در قسمت قبلی این مقاله معرفی کردم) یک فیلد به نام Average اضافه کردم که معدل دانش آموز را نگه می دارد؛ سپس دو کلاس کوچک ذیل را به مدل خود (StudentsDB.cs) اضافه کردم:

public class ChartData
{
  public string FirstName { get; set; }
  public double Average { get; set; }
}
public class ChartData2
{
  public string FirstName { get; set; }
  public DateTime BirthDate { get; set; }
  public double Average { get; set; }
}

شما هم بهتر است این تغییرات را انجام داده پروژه را Build کرده و سپس به ادامه کار بپردازید:
برای استفاده از متد DataBindTable ابتدا متد زیر را به کنترلر خود اضافه کنید:

public ActionResult ChartAdvanced()
{
  var avs = from s in db.Students.Take(6)
     select new ChartData
     {
      FirstName= s.FirstName,
      Average= s.Average
     };
  return View(avs.ToList());
}	

سپس بر روی متد کلیک راست کرده و با انتخاب AddView... یک View ساده به پروژه افزوده و کد cshtml آن را این گونه بنویسید:

@model IEnumerable<MyHelpers.Models.ChartData>
@{
  ViewBag.Title = "ChartAdvanced";
  var chart = new Chart(width: 600, height: 400)
    .AddTitle("معدل")
    .DataBindTable(dataSource: Model, xField: "FirstName")
    .Write();
}

شکل ذیل نتیجه کار را نشان می دهد:

مثال ها کاملا روشن است و نیاز به توضیح نیست؛ فقط یادآور می شوم که متد DataBindTable یک شیء از نوع IEnumerable را به عنوان پارامتر می پذیرد؛ همچنین این متد چون روی دو فیلد کار می کند، فقط کافی است متد افقی (xField) آن را تعیین کرد، فیلد دیگر به طور خودکار داده های عمودی را نشان خواهد داد.
متد DataBindCrossTable نیز مشابه همین است؛ با این تفاوت که شما به یک فیلد اضافی برای گروه بندی نیاز دارید؛ برای استفاده از این متد، ابتدا متد زیر را به کنترلر خود اضافه کنید:

public ActionResult ChartAdvanced2()
{
  var avs = from s in db.Students
  select new ChartData2
  {
    FirstName = s.FirstName,
    BirthDate=s.BirthDate,
    Average = s.Average
  };
  return View(avs.ToList());
}

بر روی متد کلیک راست کرده و با انتخاب AddView... یک ویو به پروژه خود افزوده و کد آن را این گونه اصلاح کنید:

@model IEnumerable<MyHelpers.Models.ChartData2>
@{
  ViewBag.Title = "ChartAdvanced2";
  var chart = new Chart(width: 800, height: 300)
    .AddTitle("معدل ها بر اساس سن")
    .DataBindCrossTable(dataSource: Model,
 groupByField: "FirstName", xField: "BirthDate", yFields: "Average")
    .Write();
}

شکل ذیل هم نتیجه کار را نشان می دهد:

آموزش نکات کاربردی ASP.NET MVC 4 (قسمت چهارم: بخش اول helperها)

در این سلسله مقالات قصد ندارم آموزش گام به گام MVC را دنبال کنم؛ خوشبختانه منابع خوبی هم به زبان انگلیسی و حتی به زبان فارسی (مانند مقالات آقای امیر مددی در 30sharp.com یا کتاب آموزش کاربردی آموزش کاربردی ASP.NET MVC 2 از آقای مرتضی پورمحمد) وجود دارد که شما می توانید به آن ها مراجعه کنید. من می خواهم به نکات کاربردی و مفید این تکنولوژی که معمولا در طراحی سایت و پروژه ها به آن ها نیاز داریم، بپردازم. اما قبل از هرچیز یادآوری چند نکته را لازم می دانم:

نکته اول: MVC چیست؟در این مورد سخن زیاد گفته شده؛ به طور خلاصه: MVC (مخفف Model-View-Controler) الگوی نوینی از پروژه های ASP.NET است که در آن، بخش های مختلف یک اپلیکشن به خوبی و با یک استاندارد ویژه ساماندهی شده است. همچنین MVC از نسخه 3 به بعد با دستور زبان (syntax) جدید به نام Razer همراه شد که مزایای فراوانی دارد.
برای درک معماری MVC شکل ذیل را ببینید:

همان گونه که شکل می گوید: در معماری MVC کاربر آدرسی (URL) را وارد می کند؛ این تقاضا به یک متد در داخل یک کلاس کنترلر فرستاده می شود (در روش معمول، URL ها به یک فایل html, aspx, php و غیره هدایت شده و سرور آن فایل را پردازش کرده نتیجه را بر می گرداند). سپس کنترلر به کلاس های مدل مراجعه می کند؛ مدل، داده های مورد نیاز را از منبع داده خوانده و به کنترلر تحویل می دهد (یا داده ها را در منبع داده نوشته و نتیجه را بر می گرداند). آنگاه کنترلر، ویو متناسب را به کاربر برمی گرداند.

نکته دوم: آیا حتما باید MVC را انتخاب کنم؟از این سوال طبیعی نباید سرسری گذشت؛ آن گونه که مایکروسافت می گوید، MVC جایگزین ASP.NET کلاسیک نیست؛ بلکه در کنار آن به عنوان راه حل جدید مطرح است. اما کارشناسان معتقدند MVC به خاطر مزایایی (و مزه ای!!!) که دارد، عملا جایگزین آن خواهد شد.
البته در مورد مزایا و معایب MVC نیز سخن فروان است؛ به عقیده من به خاطر:
* سرعت بالاتر نسبت به ASP.NET کلاسیک و صفحات سبک تر (به خاطر حذف ViewState و دیگر بهبودها)
* ساماندهی خوب پروژه و جداسازی قسمت ها و لایه ها (که هم امکان کار گروهی را راحت می کند و هم خود شما هر وقت که لازم باشد، به آسانی بخش های مورد نظر را بازبینی و اصلاح کنید).
* تعامل و درهم آمیختن با تکنولوژی های روز (مانند HTML5, CSS3, Jqury و...)
* دستور زبان Razer که به آسانی با تگهای HTML ترکیب می شود (مشابه PHP)
* و دلایل متعدد دیگر ...
حتما باید با MVC کار کرده و کم کم ASP.NET کلاسیک را فراموش کنید. (هرچند کسانی که مزه MVC را چشیده اند عملا نسبت به آن علاقه و تعصب پیدا می کنند!!)

نکته سوم: برای کار با MVC به چه چیزهایی نیاز دارید؟ابتدا باید نسخه 4 ام وی سی را از آدرس زیر دانلود کرده و نصب کنید
http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=27419
طبیعی است که باید Vusual Studio 2010 sp1 یا Visual Studio 11 (نسخه کامل یا Exprees) که به تازگی انتشار یافته است را نصب کرده باشید.
راه دیگر استفاده از WebMatrix است که از سایت asp.net می توانید این پلاتفرم کارا و سبک را به راحتی دانلود کنید. خوشبختانه نسخه 2 این نرم افزار که به تازگی منتشر شده، از Intellecence هم پشتیبانی می کند؛ شکل ذیل را ببینید:

به هر حال، من از نسخه Visual Studio 2010 Express sp1 استفاده می کنم.

نکته چهارم: مروری بر یک پروژه MVC1- ویژوال استودیو را اجرا کرده و یک پروژه جدید از نوع ASP.NET MVC 4 Web Application مانند شکل ذیل انتخاب کرده و نامی دلخواه برای آن انتخاب کنید (شکل ذیل).

2- پس از کلیک بر روی دکمه OK پنجره ذیل را می بینید:

در این شکل چند نکته قابل توجه است: اول این که یک الگوی جدید به نام Mobile Application را مشاهده می کنید که شامل الگویی کم حجم و سازگار با مرورگرهای همراه می باشد (از جمله کتابخانه جدید Jquery Mobile). دوم اینکه باید View engine خود را انتخاب کنید که می تواند Razer یا ASPX باشد. همچنین HTML 5 به صورت پیش فرض انتخاب شده است. با کلیک بر روی دکمه OK ویژوال استودیو پروژه را ایجاد می کند. (شکل ذیل)

همان گونه که در شکل مشاهده می کنید، در یک پروژه MVC علاوه بر پوشه های معمول ASP.NET (مانند Properties, References, App_Data) شامل پوشه های ذیل است:
Content: در این پوشه محتویات غیر دینامیک مورد استفاده در سایت مانند استایل ها، تم ها و... نگهداری می شود.
Controllers: در این پوشه کلاس هایی قرار می گیرد که وظیفه مدیریت برنامه را به عهده می گیرد؛ بدین معنی که در هر کلاس متد یا متدهایی نوشته می شود که به کاربر پاسخ داده، داده ها را از Model می گیرد و View مناسب را به کاربر تحویل می دهد.
Image: برای تصاویر مورد استفاده در اپلیکیشن.
Model: شامل کلاس هایی برای کار با داده ها.
Scripts: شامل فایل های JavaScript که به طور پیش فرض کتابخانه Jquery، Modernizer (پلتفرمی برای مرورگرهایی که از HTML 5 و CSS 3 پشتیبانی نمی کنند) و... می باشد.
Views: شامل نماها که فایل هایی با پسوند cshtml (یا vbhtml) بوده و بخش رابط کاربری (UI) اپلیکیشن را می سازد. برای ساماندهی بهتر نماها، برای هر کلاس به طور معمول یک پوشه جداگانه ایجاد می کنیم. همچنین در این پوشه یک پوشه به نام Shared وجود دارد که شامل اجزای مشترک رابط کاربری مانند Layout (که در ASP.NET کلاسیک MasterPage نامیده می شد).
توجه داشته باشید که یک فایل Web.config در این پوشه نیز وجود دارد که برای تنظیمات نماها و جلوگیری از پردازش فایل های این پوشه توسط IIS است (نماها به طور مستقیم توسط کاربر مورد دسترسی قرار نمی گیرد؛ بلکه توسط کنترلرها پردازش می شود).
اکنون در فایل HomeController.cs (که به طور پیش فرض باز است)، پیامی را همانند ذیل نوشته و برنامه را تست کنید:

public ActionResult Index()
    {
      ViewBag.Message = "This is my first MVC 4 test!";
      return View();
    }

همان گونه که در شکل نیز مشخص است، قالب پیش فرض صفحه در MVC 4 با MVC 3 متفاوت است؛ در این قالب بهبودهایی در THML و CSS افزوده شده و همچنین لینک های Register و Login در صفحات جداگانه باز نمی شود؛ بلکه به صورت یک پنجره Modal نمایان می شود.

در این قسمت به معرفی اجمالی MVC پرداختیم. از قسمت بعدی می خواهیم یک پروژه عملی را برنامه نویسی کنیم تا در خلال آن تمام نکات مورد نیاز برای کار با MVC را فراگیریم. انشاء الله

منبع : http://www.fekrenaw.com

آموزش نکات کاربردی ASP.NET MVC 4 (قسمت اول)

آموزش نکات کاربردی ASP.NET MVC 4 (قسمت اول)در این سلسله مقالات قصد ندارم آموزش گام به گام MVC را دنبال کنم؛ خوشبختانه منابع خوبی هم به زبان انگلیسی و حتی به زبان فارسی (مانند مقالات آقای امیر مددی در 30sharp.com یا کتاب آموزش کاربردی آموزش کاربردی ASP.NET MVC 2 از آقای مرتضی پورمحمد) وجود دارد که شما می توانید به آن ها مراجعه کنید. من می خواهم به نکات کاربردی و مفید این تکنولوژی که معمولا در طراحی سایت و پروژه ها به آن ها نیاز داریم، بپردازم. اما قبل از هرچیز یادآوری چند نکته را لازم می دانم:

نکته اول: MVC چیست؟در این مورد سخن زیاد گفته شده؛ به طور خلاصه: MVC (مخفف Model-View-Controler) الگوی نوینی از پروژه های ASP.NET است که در آن، بخش های مختلف یک اپلیکشن به خوبی و با یک استاندارد ویژه ساماندهی شده است. همچنین MVC از نسخه 3 به بعد با دستور زبان (syntax) جدید به نام Razer همراه شد که مزایای فراوانی دارد.
برای درک معماری MVC شکل ذیل را ببینید:

همان گونه که شکل می گوید: در معماری MVC کاربر آدرسی (URL) را وارد می کند؛ این تقاضا به یک متد در داخل یک کلاس کنترلر فرستاده می شود (در روش معمول، URL ها به یک فایل html, aspx, php و غیره هدایت شده و سرور آن فایل را پردازش کرده نتیجه را بر می گرداند). سپس کنترلر به کلاس های مدل مراجعه می کند؛ مدل، داده های مورد نیاز را از منبع داده خوانده و به کنترلر تحویل می دهد (یا داده ها را در منبع داده نوشته و نتیجه را بر می گرداند). آنگاه کنترلر، ویو متناسب را به کاربر برمی گرداند.

نکته دوم: آیا حتما باید MVC را انتخاب کنم؟از این سوال طبیعی نباید سرسری گذشت؛ آن گونه که مایکروسافت می گوید، MVC جایگزین ASP.NET کلاسیک نیست؛ بلکه در کنار آن به عنوان راه حل جدید مطرح است. اما کارشناسان معتقدند MVC به خاطر مزایایی (و مزه ای!!!) که دارد، عملا جایگزین آن خواهد شد.
البته در مورد مزایا و معایب MVC نیز سخن فروان است؛ به عقیده من به خاطر:
* سرعت بالاتر نسبت به ASP.NET کلاسیک و صفحات سبک تر (به خاطر حذف ViewState و دیگر بهبودها)
* ساماندهی خوب پروژه و جداسازی قسمت ها و لایه ها (که هم امکان کار گروهی را راحت می کند و هم خود شما هر وقت که لازم باشد، به آسانی بخش های مورد نظر را بازبینی و اصلاح کنید).
* تعامل و درهم آمیختن با تکنولوژی های روز (مانند HTML5, CSS3, Jqury و...)
* دستور زبان Razer که به آسانی با تگهای HTML ترکیب می شود (مشابه PHP)
* و دلایل متعدد دیگر ...
حتما باید با MVC کار کرده و کم کم ASP.NET کلاسیک را فراموش کنید. (هرچند کسانی که مزه MVC را چشیده اند عملا نسبت به آن علاقه و تعصب پیدا می کنند!!)

نکته سوم: برای کار با MVC به چه چیزهایی نیاز دارید؟ابتدا باید نسخه 4 ام وی سی را از آدرس زیر دانلود کرده و نصب کنید
http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=27419
طبیعی است که باید Vusual Studio 2010 sp1 یا Visual Studio 11 (نسخه کامل یا Exprees) که به تازگی انتشار یافته است را نصب کرده باشید.
راه دیگر استفاده از WebMatrix است که از سایت asp.net می توانید این پلاتفرم کارا و سبک را به راحتی دانلود کنید. خوشبختانه نسخه 2 این نرم افزار که به تازگی منتشر شده، از Intellecence هم پشتیبانی می کند؛ شکل ذیل را ببینید:

به هر حال، من از نسخه Visual Studio 2010 Express sp1 استفاده می کنم.

نکته چهارم: مروری بر یک پروژه MVC1- ویژوال استودیو را اجرا کرده و یک پروژه جدید از نوع ASP.NET MVC 4 Web Application مانند شکل ذیل انتخاب کرده و نامی دلخواه برای آن انتخاب کنید (شکل ذیل).

2- پس از کلیک بر روی دکمه OK پنجره ذیل را می بینید:

در این شکل چند نکته قابل توجه است: اول این که یک الگوی جدید به نام Mobile Application را مشاهده می کنید که شامل الگویی کم حجم و سازگار با مرورگرهای همراه می باشد (از جمله کتابخانه جدید Jquery Mobile). دوم اینکه باید View engine خود را انتخاب کنید که می تواند Razer یا ASPX باشد. همچنین HTML 5 به صورت پیش فرض انتخاب شده است. با کلیک بر روی دکمه OK ویژوال استودیو پروژه را ایجاد می کند. (شکل ذیل)

همان گونه که در شکل مشاهده می کنید، در یک پروژه MVC علاوه بر پوشه های معمول ASP.NET (مانند Properties, References, App_Data) شامل پوشه های ذیل است:
Content: در این پوشه محتویات غیر دینامیک مورد استفاده در سایت مانند استایل ها، تم ها و... نگهداری می شود.
Controllers: در این پوشه کلاس هایی قرار می گیرد که وظیفه مدیریت برنامه را به عهده می گیرد؛ بدین معنی که در هر کلاس متد یا متدهایی نوشته می شود که به کاربر پاسخ داده، داده ها را از Model می گیرد و View مناسب را به کاربر تحویل می دهد.
Image: برای تصاویر مورد استفاده در اپلیکیشن.
Model: شامل کلاس هایی برای کار با داده ها.
Scripts: شامل فایل های JavaScript که به طور پیش فرض کتابخانه Jquery، Modernizer (پلتفرمی برای مرورگرهایی که از HTML 5 و CSS 3 پشتیبانی نمی کنند) و... می باشد.
Views: شامل نماها که فایل هایی با پسوند cshtml (یا vbhtml) بوده و بخش رابط کاربری (UI) اپلیکیشن را می سازد. برای ساماندهی بهتر نماها، برای هر کلاس به طور معمول یک پوشه جداگانه ایجاد می کنیم. همچنین در این پوشه یک پوشه به نام Shared وجود دارد که شامل اجزای مشترک رابط کاربری مانند Layout (که در ASP.NET کلاسیک MasterPage نامیده می شد).
توجه داشته باشید که یک فایل Web.config در این پوشه نیز وجود دارد که برای تنظیمات نماها و جلوگیری از پردازش فایل های این پوشه توسط IIS است (نماها به طور مستقیم توسط کاربر مورد دسترسی قرار نمی گیرد؛ بلکه توسط کنترلرها پردازش می شود).
اکنون در فایل HomeController.cs (که به طور پیش فرض باز است)، پیامی را همانند ذیل نوشته و برنامه را تست کنید:

public ActionResult Index()
    {
      ViewBag.Message = "This is my first MVC 4 test!";
      return View();
    }

همان گونه که در شکل نیز مشخص است، قالب پیش فرض صفحه در MVC 4 با MVC 3 متفاوت است؛ در این قالب بهبودهایی در THML و CSS افزوده شده و همچنین لینک های Register و Login در صفحات جداگانه باز نمی شود؛ بلکه به صورت یک پنجره Modal نمایان می شود.
در این قسمت به معرفی اجمالی MVC پرداختیم. از قسمت بعدی می خواهیم یک پروژه عملی را برنامه نویسی کنیم تا در خلال آن تمام نکات مورد نیاز برای کار با MVC را فراگیریم. انشاء الله

منبع : فکرنو داتکام