برچسب asp.net mvc - افرا گرافیک

اضافه کردن View درMVC-- آموزش گام به گام ام وی سی

کانون تبلیغاتی افرا گرافیک در نظر دارد به صورت گام به گام MVC5 را به شما عزیزان آموزش دهد. لذا قسمت سوم آموزش در زیر قرار داده شده است.

در این بخش کلاس HelloWorldcontroller را به صورتی تغییر خواهیم داد که با استفاده از فایل های الگو فرآیند پاسخ های HTML به یک کاربر تسهیل شود.

شما با استفاده از موتور Razor view یک فایل الگو خواهید ساخت.الگو های ساخته شده توسط Razor پسوند cshtml خواهند داشت و یکی از بهترین راه های ساخت خروجی HTML با استفاده از #C را فراهم می کنند.Razor تعداد کاراکترها و ضربه به کلیدهای مورد نیاز برای یک الگوی view را به حداقل می رساند و سبب روان و سریعتر شدن جریان کد نویسی می شود.

در حال حاضر متد index یک پیام از نوع رشته که در حقیقت یک hard-code در کلاس controller است برمی گرداند. متد index را تغییر دهید تا همانند کد زیر یک view object برگرداند:

public ActionResult Index()



{returnView();}

در متد index از یک الگوی view برای ساخت یک پاسخ HTML به مرورگر استفاده می شود. متدهای controller (که به متدهای action نیز معروف هستند) به عنوان نمونه متد index بالا به جای انواع اولیه مانند رشته، ActionResult برمی گردانند.

بر روی پوشه ی views\Helloworld راست کلیک کنید و بر روی add کلیک کنید سپس بر روی MVC 5 View Page with(Layout Razor) کلیک کنید.

درکادر Specify Name for Item کلمه Index را ok کنید.

در کادر select a Layout page گزینه پیش فرض-Layout.cshtml را انتخاب و بر روی آن Ok کنید.

در کادر بالا پوشه ی Views\shared در قسمت سمت چپ انتخاب شده است. اگر یک فایل custom Layout در یک پوشه ی دیگر دارید، می توانید آن را نیز انتخاب کنید. درمورد فایل های Layout در بخش های دیگر توضیحات بیشتری خواهیم داد.

اکنون فایل MvcMovie\views\HelloWorld\Index. cshtml ساخته شده است.

بخش های زیر را اضافه کنید.

@{

    Layout = "~/Views/Shared/_Layout.cshtml";

@{

    ViewBag.Title = "Index";

<h2>Index</h2><p>Hello from our View Template!</p>

روی فایل کلیک راست کنید و view in browser

همچنین می توانید بر روی فایل index.cshtml راست کلیک کنید و قسمت View in page inspector را انتخاب کنید.

روش دیگر اجرای برنامه و باز کردن HelloWorldcontroller(http://locaohost:xxxx/HelloWorldcontroller) است. متد index چندان کارساز نخواهد بود ، در این روش بلافاصله عبارت ()return view را دریافت خواهید کرد، یعنی حتما باید از یک فایل قالب برای ارائه پاسخ به مرورگر استفاده کنید. بدلیل اینکه دقیقا نام فایل view را تعیین نکرده اید، خود ASP.NET MVC به صورت پیش فرض از فایل index.cshtml view در پوشه ی \views\HelloWorldاستفاده می کند. در تصویر زیر عبارت Hello from our view Template استفاده شده است.

اگر با دقت نگاه کنید متوجه می شوید که در ستون عنوان مرورگر عبارتIndex My ASP.NET Appli را نشان می دهد و در لینک بزرگی که در بالای صفحه است نام برنامه نوشته شده است. در صورتی که اندازه ی پنجره ی مرورگر شما کوچک باشد باید بر روی سه نوار افقی که در قسمت بالا سمت راست می بینید کلیک کنید تا بتوانید لینک های صفحه ی اصلی ، درباره ی ما ، تماس با ما، ثبت نام و ورود را ببینید.

تغییر نما و طرح صفحات

نخست می خواهید نام برنامه را که در بالای صفحه نوشته تغییر دهید. این متن در هر صفحه ای وجود دارد‌. اگرچه فقط در یک قسمت پروژه از این نام استفاده می کنید در همه ی صفحات نمایش داده خواهد شد.به قسمت /views/shared folder in solution Explorer بروید و فایل Layout.cshtml را باز کنید‌.

این فایل یک صفحه ی Layout نامیده می شود و در پوشه ی اشتراکی قرار دارد که همه ی صفحات از آن استفاده می کنند

قالب هایLayout امکان نگه داری لایه های HTML مربوط به سایت شما را در یک مکان فراهم می کنند و سپس آن را در صفحات چندگانه به کار می برند. خط @Render Body()@ را پیدا کنید. RenderBody جایی است که همه ی صفحات view در آن نگه داری می شوند.

محتویات عنوان را با استفاده از علائم زیر تغییر دهید.

<!DOCTYPE html>

<html>

<head>

<metacharset="utf-8"/>

<metaname="viewport"content="width=device-width, initial-scale=1.0">



<title>@ViewBag.Title - Movie App</title>

    @Styles.Render("~/Content/css")

    @Scripts.Render("~/bundles/modernizr")

</head>

<body>

<divclass="navbar navbar-inverse navbar-fixed-top">

<divclass="container">

<divclass="navbar-header">

<buttontype="button"class="navbar-toggle"data-toggle="collapse"data-target=".navbar-collapse">

<spanclass="icon-bar">

</span>

<spanclass="icon-bar">

</span>

<spanclass="icon-bar">

</span>

</button>

                @Html.ActionLink("MVC Movie", "Index", "Movies", null, new { @class = "navbar-brand" })

            </div>

<divclass="navbar-collapse collapse">

<ulclass="nav navbar-nav">

<li>@Html.ActionLink("Home", "Index", "Home")

</li>

<li>@Html.ActionLink("About", "About", "Home")

</li>

<li>@Html.ActionLink("Contact", "Contact", "Home")

</li>

</ul>

                @Html.Partial("_LoginPartial")

            </div>

</div>

</div>

<divclass="container body-content">

        @RenderBody()

        <hr/>

<footer>

<p>&copy; @DateTime.Now.Year - My ASP.NET Application

</p>

</footer>

</div>

    @Scripts.Render("~/bundles/jquery")

    @Scripts.Render("~/bundles/bootstrap")

    @RenderSection("scripts", required: false)

</body>



</html>

برنامه را اجرا کنید و حالا دقت کنید "MVC Movie" را ببینید بر روی لینک about کلیک کنید، حالا صفحه "MVC Movie" را نشان می دهد. ما قالبLayout را تغییر دادیم و همه ی صفحات سایت عنوان جدید را نشان دادند.

وقتی اولین بار فایل Views\HelloWorld\Index.cshtml را ساختیم شامل کد زیر بود:

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

اکنون بیایید عنوان Index view را تغییر دهیم . قسمت MvcMovie\Views\HelloWorld\Index.chtmp را باز کنید. دو قسمت است که باید تغییر دهید: اول متنی که در عنوان مرورگر ظاهر شده است، و بعد از آن header دوم (h2) با کمی تغییر آنها متوجه خواهید شد که کدام قسمت کد کدام قسمت برنامه را تغییر می دهد.

@{
    ViewBag.Title = "Movie List";
}

<h2>My Movie List</h2>
<p>Hello from our View Template!</p>

برای نشان دادن عنوان HTML, کد بالا سبب ایجاد یک کد مخصوص اشیا ViewBag می شود(که در قلب Index.chtml view) قرار دارند. اگر به source code قالب layout نگاهی بیندازید، متوجه خواهید شد که قالب از این مقدار در قسمت title و به عنوان بخشی از قسمت head متعلق به HTML استفاده می کند که قبلا هم تغییر داده شده است.

<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - Movie App</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>

با استفاده از این روش viewbag می توانید پارامترهای دیگر را بین قالب view و فایل layout خود حرکت دهید.

برنامه را اجرا کنید و به آدرس http://localost:xx/Heloworld بروید‌.توجه کنید که عنوان مرورگر ، یعنی قسمت heading اول، و heading دوم تغییر کرده باشند.(اگر تغییری در مرورگر نمی بینید، احتمالا به محتوای ذخیره نگاه می کنید‌. دکمه ی Ctrl+F5 را در مرورگر خود فشار دهید تا سرور مجبور شود پاسخ دهد). عنوان مرورگر با viewBag ساخته شده است. عنوانی که در قالب Index.cshtml view تنظیم کردیم و Movieapp به فایل Layout اضافه شدند.

همچنین توجه کنید که محتوای قال Index.cshtml با قالب -Layout.cshtml view ادغام شده است و یک HTML واحد به مرورگر فرستاده شده است.قالب Layout امکان ایجاد تغییرات کلی را در همه ی صفحات برنامه ی شما فراهم می کند.

یک قسمت از عنوان (در این قسمت کلمه ی Hello باز قالب view) به صورت سخت کد درآمده است. برنامه ی MVC یک ( V(view یک C هم برای Controller دارید اما برای model هنوز حرفM وجود ندارد. بعدا در مورد ساخت پایگاه داده ها و دریافت مدل های داده ای از آن بیشتر صحبت خواهیم کرد.

ادامه آموزش در قسمت چهارم و از طریق مطالب آموزشی سایت افراگرافیک - www.afragraphic.ir خواهید دید.

mvc visual studio asp.net mvc آم

افرا گرافیک شنبه 9 آبان 1394 ساعت 09:58

0 نظر

افزودن کنترلرها در MVC-- آموزش گام به گام ام وی سی

کانون تبلیغاتی افرا گرافیک در نظر دارد به صورت گام به گام MVC5 را به شما عزیزان آموزش دهد. لذا قسمت دوم آموزش در زیر قرار داده شده است.

کلمه ی MVC مخفف model-view-controller می باشد. در حقیقت MVC الگوی ارتقا برنامه هایی است که به خوبی طراحی شده اند، آزمون پذیرند و پشتیبانی آنها آسان است. برنامه هایی که با MVC ساخته می شوند از اجزاء زیر تشکیل شده اند:

Models: کلاس هایی هستند که نمایانگر داده های برنامه و با استفاده از منطق اعتبار سنجی امکان کار براساس قوانین تجاری را فراهم میکنند.

Views: فایل های الگو که برنامه ی شما برای ساخت پاسخ های HTML پویا از آنها استفاده می کند.

Controllers: کلاس هایی که درخواست های ورودی مرورگر را بررسی می کنند، داده های مدل را بازیابی می کنند و در نهایت الگوهای view را که مسئول پاسخ به مرورگر هستند را مشخص می کنند.

همه ی این مفاهیم در این سری آموزش ها بررسی خواهند شد و به شما نحوه ی ساخت یک برنامه را خواهیم آموخت:

با ساخت یک کلاس controller آغاز می کنیم. در قسمت solution Explorer بر روی پوشه ی controller راست کلیک کنید سپس بر روی add و بعد از آن بر روی controller کلیک کنید.

در کادر add بر روی MVC 5 Controller -Empty و سپس add کلیک کنید.

نام Controller جدید خود را HelloWorldcontroller بگذارید و سپس بر روی add کلیک کنید.

controller خود را add کنید.

توجه کنید که در قسمت Solution Explorer فایل جدیدی با نام HelloWorldcontroller.cs و یک فولدر جدید Views\Helloworld ساخته شده است.Controller در IDE باز است.

کدهای زیر را جایگزین محتویات فایل کنید.

using System.Web;using System.Web.Mvc; 
 
namespace MvcMovie.Controllers 
{ 
    public class HelloWorldController : Controller 
    { 
        // 
        // GET: /HelloWorld/ 
 
        public string Index() 
        { 
            return "This is my <b>default</b> action..."; 
        } 
 
        // 
        // GET: /HelloWorld/Welcome/ 
 
        public string Welcome() 
        { 
            return "This is the Welcome action method..."; 
        } 
    } 
}

متدهای controller یک عبارت HTML همچون تصویر زیر باز می گردانند. نام controller را HelloWorldcontroller گذاشتیم و اولین متد index نامیده شد.

بیایید این عبارت را در یک مرورگر فراخوانی کنیم . برنامه را اجرا کنید (کلیدF5 یا Ctrl+F5) را فشار دهید. در مرورگر و در قسمت آدرس Helloworld را اضافه کنید (برای مثال در تصویر زیر (http://localost:1234/HelloWorld ).

صفحه ای که مرورگر نشان می دهد اینگونه خواهد بود. در روش بالا کد مستقیما همچون یک عبارت نشان داده شد. شما از سیستم خواستید که فقط چند HTML بسازد و سیستم هم انجام داد.

ASP.net MVC بر اساس URL های ورودی کلاس های متفاوتی از کنترل کننده ها (و متدهای متفاوتی درون آنها) را فراخوانی می کند. منطق مسیریابی URL در ASP.NET MVC به صورت پیش فرض از فرمتی مثل نمونه ی زیر استفاده می کند تا تعیین کند کدام کد باید ظاهر شود:

/[Controller]/[ActionName]/[Parameters]

شما فرمت مسیریابی را در فایل App_Start/RouteConfig.cs مشخص می کنید.

public static void RegisterRoutes(RouteCollection routes){
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

    routes.MapRoute(
        name: "Default",
        url: "{controller}/{action}/{id}",
        defaults: new { controller = "Home", action ="Index", id =UrlParameter.Optional}
    );}

اگر برنامه را اجرا کردید و هیچ بخش مربوط به URL را وارد نکردید، به صورت پیش فرض به قسمت Home در کنترل کننده می رود و اَکشن متد index را که در بخش پیش فرض کد بالا تعیین شده است را انتخاب می کند.

نخستین بخشURL ، کلاس کنترل کننده را که قرار است اجرا شود مشخص می کند. بنابراین HelloWorld به کلاس HelloWorldController اشاره می کند. بخش دوم URL اکشن متدی از کلاس را مشخص می کند که باید اجرا شود. توجه کنید که ما کافیست فقط عبارت /HelloWorld را جستجو کنیم و متد index به صورت پیش فرض اجرا می شود. دلیل اینکار این است که متد index یک متد پیش فرض است که درصورت مشخص نبودن متد مورد استفاده به صورت پیش فرض فعال می شود‌. پارامتر سوم URL مخصوصroute data است. در بخش های بعدی با این داده ها بیشتر آشنا خواهیم شد.

در مرورگر آدرس http://locaohost:xxxx/HelloWorld/welcome را وارد کنید. متد welcome اجرا می شود و عبارت This is the welcome action نمایش داده می شود. مسیر پیش فرض MVC اینگونه است /[Controller]/[ActionName]/[Parameters. برای این URL کنترل کننده Helloworld و اکشن متد welcome است ‌شما هنوز هم از [parameter] به عنوان بخشی از URL استفاده نکرده اید.

بیایید با تغییر این مثال شما را با پاس دادن اطلاعات پارامترها ازURL به controller آشنا کنیم‌ ( برای مثال HelloWorld/Welcome?name=Scott&numtimes=4). متد welcome را به صورتی تغییر دهید که دو پارامتر را دربر گیرد. توجه کنید که این کد از پارامتر انتخابی #C در مواقعی استفاده می کند که هیچ عددی برای پارامتر مشخص نشده و پارامتر به صورت پیش فرض روی عدد 1 قرار می گیرد.

public string Welcome(string name,int numTimes =1) {
     return HttpUtility.HtmlEncode("Hello "+ name +", NumTimes is: "+ numTimes);}

نکته ی امنیتی: کد بالا از Http server utility.HtmlEncode برای محافظت برنامه در برابر ورودی های مخرب استفاده شده است( یعنی جاوا اسکریپت).

برنامه را اجرا کنید و آدرس http://localhost:xxxx/HelloWorld/Welcome?name=Scott&numtimes=4 را در مرورگر وارد کنید. می توانید مقادیر یا نام های مختلفی را در URL امتحان کنید. سیستم اتصال مدلASP.NET MVC به صورت خودکار پارامترهای نامگذاری شده را از بین عبارت های موجود در ستون آدرس به پارامترهای متد شما مپ می کند.

و در نمونه ی بالا ، قسمت های URL (پارامترها) استفاده نشده اند، نام و تعداد پارامترها به صورت؟ علامت سئوال نشان داده شده اند.در URL بالا یک تفکیک کننده وجود دارد ، کاراکتر & عبارت ها را جدا می کند.

در متد Welcome کدهای زیر را جایگزین کنید:

public string Welcome(string name,int ID =1){
    return HttpUtility.HtmlEncode("Hello "+ name +", ID: "+ ID);}

حالا برنامه را اجرا کنید وurl زیر را اجرا کنید:

http://localhost:xxx/HelloWorld/Welcome/3?name=Rick

این بار بخش سوم URL با پارامتر اصلی ID مطابقت می کند. متد عملی Welcome حاوی یک پارامتر (ID) است که با URL تعیین شده درمتد RegisterRoutes مطابقت دارد.

public static void RegisterRoutes(RouteCollection routes){
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

    routes.MapRoute(
        name: "Default",
        url: "{controller}/{action}/{id}",
        defaults: new{ controller ="Home", action ="Index", id =UrlParameter.Optional}
    );}

در برنامه ی ASP.NET MVC، بسیار معمول است که پارامترها به جای اینکه به صورت عبارت عبور کنند به صورت داده های مسیری همانند کاری که در ID بالا انجام دادیم عبور کنند. شما می توانید با اضافه کردن مسیر جاری کنید که هم اعداد و هم تعداد تکرار اعداد در پارامترها به صورت داده های مسیری در URL نمایش داده شوند. در قسمت فایل App_Start\RouteConfig.cs مسیر Hello را اضافه کنید.

public class RouteConfig{
   public static void RegisterRoutes(RouteCollection routes)
   {
      routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

      routes.MapRoute(
          name: "Default",
          url: "{controller}/{action}/{id}",
          defaults: new{ controller ="Home", action ="Index", id =UrlParameter.Optional}
      );

      routes.MapRoute(
           name: "Hello",
           url: "{controller}/{action}/{name}/{id}"
       );
   }}

برنامه را اجرا کنید و آدرس /localhost:XXX/HelloWorld/Welcome/Scott/3. را در مرورگر وارد کنید.

در بعضی از برنامه های MVC مسیر پیش فرض به خوبی عمل می کند. دردبخش های بعدی این آموزش در مورد عبور دادن داده ها با استفاده ازmodeo binder نکات بیشتری خواهید آموخت، و برای این کار نیازی به تغیر مسیر پیش فرض نخواهید داشت.

در این مثال ها کنترل کننده بخش VC مربوط به MVC را انجام داد منظور از VC کارهای مربوط به کنترل و نمایش است. کنترل کننده مستقیما HTML را باز می گرداند. معمولا شما نیازی به بازگشت مستقیم HTML ندارید ، چون کد نویسی بسیار دشوار می شود‌. به جای آن از فایل های الگوی مجزا برای ساخت پاسخ های HTML استفاده می کنید.

ادامه آموزش در قسمت سوم و از طریق مطالب آموزشی سایت افراگرافیک - www.afragraphic.ir خواهید دید.

mvc visual studio asp.net mvc آم

افرا گرافیک دوشنبه 4 آبان 1394 ساعت 17:49

0 نظر

شروع به کار با mvc 5 - آموزش گام به گام ام وی سی

کانون تبلیغاتی افرا گرافیک در نظر دارد به صورت گام به گام MVC5 را به شما عزیزان آموزش دهد. لذا قسمت یک آموزش در زیر قرار داده شده است.

اولین قدم نصب و راه اندازی Visual Studio Express 2013 for web یاVisual studio است.
Visual Studio دارای یک محیط پیوسته قابل ارتقا است. همانطور که از برنامه ی ورد مایکروسافت برای ساخت‌ پرونده های خود استفاده می کنید، می توانید از این محیط قابل ارتقا نیز برای ساخت برنامه استفاده کنید. در قسمت بالای صفحه یک نوار ابزار وجود دارد که گزینه های مختلفی را نشان می دهند که در دسترس شماست. منوی دیگری نیز وجود دارد که راه های دیگری را برای انجام کارها در اختیار شما قرار می دهد.(برای نمونه به جای انتخاب New project از صفحه شروع می توانید از این منو استفاده کنید و به قسمت select file>New Project) بروید.‌

ساخت اولین نرم افزار
بر روی New project کلیک کنید، سپس از سمت چپ C# را انتخاب کنید و بعد از آن Web و سپس Asp.NET Web application را انتخاب کنید.

نام پروژه ی خود را MvcMovie بگذارید و بر روی Ok کلیک کنید.

در Visual studio برای پروژه ی Asp.Net که شما ساختید یک قالب پیش فرض وجود دارد، اکنون بدون انجام کار خاصی یک برنامه ی وب ساختید. حالا می تونید کار بر روی پروژه ی جدید را آغاز کنید‌.

با فشار دادن دکمه ی F5 شروع به رفع اشکالات پروژه کنید. فشار دادن دکمه ی F5 باعث شروع کار IIS و اجرای برنامه ی شما می شود. سپس ویژوال استودیو با باز کردن یک مرورگر به صفحه ی اصلی نرم افزار می رود توجه کنید که در نوار آدرس این عبارت را خواهید دید localhost:port# و چیزی شبیه example.com نمی بینید. دلیل این موضوع این است که localhost همیشه کامپیوتر محلی را نشان می دهد اما در این مورد برنامه ی وبی که شما ساخته اید را نشان می دهد. وقتی ویژوال استودیو یک پروژه ی وب را اجرا کرد از یک پورت تصادفی برای سرور وب استفاده می کند. در تصویر زیر شماره ی پورت 1258 است. وقتی برنامه را اجرا کردید شماره ی پورت متفاوتی را مشاهده خواهید کرد.

قالب پیش فرض به شما یک صفحه ی اصلی با قسمت هایی همچون تماس با ما و درباره ی ما می دهد. در تصویر بالا لینک های صفحه ی اصلی تماس با ما و درباره ی ما را نمی بینید. نمایش این لینک ها به اندازه ی پنجره ی مرورگر شما بستگی دارد شاید نیاز باشد با کلیک بر روی ایکون navigation بتوانید این لینک ها را ببینید.

این نرم افزار از لینک های ثبت نام و ورود به سیستم هم پشتیبانی می کند. گام بعدی ما تغییر این برنامه و یادگیری بیشتر ASP.NET MVC است.
ادامه آموزش در قسمت دوم و از طریق مطالب آموزشی سایت افراگرافیک - www.afragraphic.ir خواهید دید.

mvc visual studio asp.net mvc آم

افرا گرافیک یکشنبه 3 آبان 1394 ساعت 10:29

0 نظر

افرا گرافیک

ابر برجسب

جدیدترین یادداشت‌ها

نویسندگان

بایگانی

جستجو

اضافه کردن View درMVC-- آموزش گام به گام ام وی سی

افزودن کنترلرها در MVC-- آموزش گام به گام ام وی سی

شروع به کار با mvc 5 - آموزش گام به گام ام وی سی