بایگانی برچسب: آموزش طراحی سایت با asp net

در این  آموزش ASP پروژه محور به نحوه  استفاده از  model binding  در یک پروژه ASP.NET Form پرداخته می شود.

model binding باعث می شود تجزیه و تحلیل و تعامل با داده نسبت به اشیای داده ی منیع (Object Data source  یا Sql Data Source ) ساده تر باشد. در این آموزش مطالب مقدماتی گفته می شود و مطالب پیچیده تر در آموزش های بعدی می آید.

ساختارها و الگوهای model binding با همه تکنولوژی های دسترسی به داده کار می کند. در این آموزش شما از Entity FrameWorkاستفاده می کنید ولی می توانید از هر تکنولوژی دیگری که با آن آشنایی دارید نیز استفاده کنید. از طریق یک سرور کنترل داده  (data-bound) مثل Grid view، List view، Details view  و Form view می توانید روش هایی که برای انتخاب، آپدیت، پاک کردن یا ایجاد کردن داده استفاده کرده اید را تعیین کنید. در این آموزش یک مقدار برای SelectMethod تعیین می کنید. با استفاده از این متد شما منطقی را برای دریافت داده فراهم می کنید. در آموزش بعدی UpdateMethod، DeleteMethod  و InsertMethod  را تنظیم خواهید کرد.

می توانید پروژه کامل را به زبان #C یا VB دانلود کنید. کدهای دانلود شده با visual studio 2012 و visual studio 2013  کار می کنند. در این آموزش از قالب های visual studio 2012  استفاده شده است که اندکی با قالب های نسخه ۲۰۱۳ متفاوت است.

در این آموزش برنامه را روی visual studio اجرا می کنید. همچنین می توانید آن را با استفاده از سرویس دهنده های hosting روی اینترنت قرار دهید. Microsoft از طریق اکانت trial مجانی Azure امکان استفاده ازhosting برای  ۱۰ وبسایت را در اختیار می گذارد.

چیزی که می سازید

در این آموزش آموزش ASP پروژه محور شما

• اشیاءی را می سازید که یک دانشگاه همراه با دانشجوبان ثیت نام شده در دروس مختلف را نشان می دهد
• جداول پایگاه داده را از اشیاء را می سازید
• پایگاه داده را با داده های تست راه اندازی می کنید
• داده را در Web Formها نمایش می دهید

ایجاد پروژه

در visual studio 2013  یک ASP.NET Web Application جدید به نام ContosoUniversityModelBinding  ایجاد کنید.

قالب Web Form را انتخاب کنید و بقیه گزینه ها را به حالت پیش فرض قرار دهید. بر روی OK کلیک کنید تا پروژه راه اندازی شود.

در ابتدا چند تغییر کوچک برای سفارشی کردن (Customize) ظاهر سایت انجام دهید. فایل Site1.Master  را باز کنید و عنوان را به ContosoUniversity به جای My ASP.NET Application تغییر دهید.

<title><%: Page.Title %> - Contoso University</title>

سپس header را از  Application name به ContosoUniversity تغییر دهید.

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" runat="server" href="~/">Contoso University</a>
</div>

همچنین در Site.Master لینک های navigation  را که در header قرار دارند تغییر دهید تا صفحاتی را که مربوط به این سایت هستند نمایش  دهد. شما نیازی به صفحه About یا Contact ندارید بنابراین این لینک ها می توانند حذف شوند در عوض لینک به صفحه ای به نام Student نیاز دارید. این صفحه هنوز ساخته نشده است.

<ul class="nav navbar-nav">
    <li><a runat="server" href="~/">Home</a></li>
    <li><a runat="server" href="~/Students">Students</a></li>
</ul>

Site.Master را ذخیره کنید و ببندید.

اکنون Web Form ای برای نمایش داده های دانشجو خواهید ساخت. روی پروژه تان راست کلیک کنید و گزینه Add و New Item را انتخاب کنید. قالب Web Form With Master Page را انتخاب کنید و نام آن را Student.aspx قرار دهید. Site.Master  را به عنوان  master page برای Web Form جدید انتخاب کنید.

ساخت مدل های داده و پایگاه داده

شما از Code First Migration برای اشیا و جدول های پایگاه داده متناظر با آن استفاده خواهید کرد. این جدول ها اطلاعاتی را درباره دانشجویان و درس های آنها ذخیره می کند. در پوشه Models کلاسی به نام UniversityModels.cs اضافه  کنید.

در ابن فایل کلاس های Courses، Enrollment، Student ، SchoolContext را به صورت زیر تعریف کنید.

using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.ComponentModel.DataAnnotations;

namespace ContosoUniversityModelBinding.Models
{
    public class SchoolContext : DbContext
    {
        public DbSet<Student> Students { get; set; }
        public DbSet<Enrollment> Enrollments { get; set; }
        public DbSet<Course> Courses { get; set; }
    }

    public class Student
    {
        [Key, Display(Name = "ID")]
        [ScaffoldColumn(false)]
        public int StudentID { get; set; }

        [Required, StringLength(40), Display(Name="Last Name")]
        public string LastName { get; set; }

        [Required, StringLength(20), Display(Name = "First Name")]
        public string FirstName { get; set; }

        [EnumDataType(typeof(AcademicYear)), Display(Name = "Academic Year")]
        public AcademicYear Year { get; set; }

        public virtual ICollection<Enrollment> Enrollments { get; set; }
    }

    public class Enrollment
    {
        [Key]
        public int EnrollmentID { get; set; }
        public int CourseID { get; set; }
        public int StudentID { get; set; }
        public decimal? Grade { get; set; }
        public virtual Course Course { get; set; }
        public virtual Student Student { get; set; }
    }

    public class Course
    {
        [Key]
        public int CourseID { get; set; }
        public string Title { get; set; }
        public int Credits { get; set; }
        public virtual ICollection<Enrollment> Enrollments { get; set; }
    } 

    public enum AcademicYear
    {
        Freshman,
        Sophomore,
        Junior,
        Senior
    }
}

کلاس SchoolContext  از کلاس DbContext که ارتباط با پایگاه داده و تغییرات در داده را مدیریت می کند مشتق شده است.

در کلاس Student به attributeهایی که به FirstName ، LastName و Year اختصاص داده شده اند دقت کنید. این attribute ها برای اعتبارسنجی داده(data validation) استفاده خواهند شد. برای ساده سازی کد در این پروژه فقط همین attributeها برای اعتبارسنجی داده انتخاب شده اند. در یک پروژه واقعی باید برای تمام propertyهایی که اعتبار سنجی داده لازم دارند، attribute اعتبارسنجی اختصاص دهید.

فایل UniversityModels.cs را ذخیره کنید.

شما می توانید از ابزار (tools) برای Code First Migration جهت راه اندازی پایگاه داده مبتنی بر این کلاس ها استفاده کنید. در داخل کنسول Package Manager Console فرمان زیر را اجرا کنید.

enable-migrations -ContextTypeName ContosoUniversityModelBinding.Models.SchoolContext

اگر فرمان مورد نظر با موفقیت کامل شد پیغامی را دریافت می کنید مبتنی بر اینکه migration فعال شده است.

توجه داشته باشید که فایل جدیدی به نام Configuration.cs ساخته شده است. در Visual Studio ابن فایل به طور خودکار پس از ساخته شدن باز می شود. کلاس Configuration حاوی متدی به نام Seed است که به شما اجازه می دهد تا جدول های پایگاه داده را با داده تست پرکنید کنید.

کد زیر را به متد Seed اضافه کنید. بابد از کلمه using برای فضای نام ContosoUniversityModelBinding.Models استفاده کنید

namespace ContosoUniversityModelBinding.Migrations
{
    using System;
    using System.Data.Entity;
    using System.Data.Entity.Migrations;
    using System.Linq;
    using ContosoUniversityModelBinding.Models;

    internal sealed class Configuration : DbMigrationsConfiguration<SchoolContext>
    {
        public Configuration()
        {
            AutomaticMigrationsEnabled = false;
        }

        protected override void Seed(SchoolContext context)
        {

            context.Students.AddOrUpdate(
                 new Student { 
                     FirstName = "Carson", 
                     LastName = "Alexander", 
                     Year = AcademicYear.Freshman },
                 new Student { 
                     FirstName = "Meredith", 
                     LastName = "Alonso", 
                     Year = AcademicYear.Freshman },
                 new Student { 
                     FirstName = "Arturo", 
                     LastName = "Anand", 
                     Year = AcademicYear.Sophomore },
                 new Student { 
                     FirstName = "Gytis", 
                     LastName = "Barzdukas", 
                     Year = AcademicYear.Sophomore },
                 new Student { 
                     FirstName = "Yan", 
                     LastName = "Li", 
                     Year = AcademicYear.Junior },
                 new Student { 
                     FirstName = "Peggy", 
                     LastName = "Justice", 
                     Year = AcademicYear.Junior },
                 new Student { 
                     FirstName = "Laura", 
                     LastName = "Norman", 
                     Year = AcademicYear.Senior },
                 new Student { 
                     FirstName = "Nino", 
                     LastName = "Olivetto", 
                     Year = AcademicYear.Senior }
                 );

            context.SaveChanges();

            context.Courses.AddOrUpdate(
                new Course { Title = "Chemistry", Credits = 3 },
                new Course { Title = "Microeconomics", Credits = 3 },
                new Course { Title = "Macroeconomics", Credits = 3 },
                new Course { Title = "Calculus", Credits = 4 },
                new Course { Title = "Trigonometry", Credits = 4 },
                new Course { Title = "Composition", Credits = 3 },
                new Course { Title = "Literature", Credits = 4 }
                );

            context.SaveChanges();

            context.Enrollments.AddOrUpdate(
                new Enrollment { StudentID = 1, CourseID = 1, Grade = 1 },
                new Enrollment { StudentID = 1, CourseID = 2, Grade = 3 },
                new Enrollment { StudentID = 1, CourseID = 3, Grade = 1 },
                new Enrollment { StudentID = 2, CourseID = 4, Grade = 2 },
                new Enrollment { StudentID = 2, CourseID = 5, Grade = 4 },
                new Enrollment { StudentID = 2, CourseID = 6, Grade = 4 },
                new Enrollment { StudentID = 3, CourseID = 1 },
                new Enrollment { StudentID = 4, CourseID = 1 },
                new Enrollment { StudentID = 4, CourseID = 2, Grade = 4 },
                new Enrollment { StudentID = 5, CourseID = 3, Grade = 3 },
                new Enrollment { StudentID = 6, CourseID = 4 },
                new Enrollment { StudentID = 7, CourseID = 5, Grade = 2 }
                );

            context.SaveChanges();
        }
    }
}

Configuration.cs را ذخیره کنبد.

در داخل Package Manager Console دستور add-migration initial را اجرا کنید. سپس دستور update database را اجرا کنید. اگر هنگام اجرای این دستور با استثنا مواجه شدید امکان دارد مقادیر StudentID و CourseID با مقادیری که در داخل متد Seed وجود دارد متفاوت باشند. جدول ها در پایگاه داده را باز کنید و مقادیر موجود در StudentID و CourseID را پیدا کنید. آن مقادبر را برای Seed کردن جداول Enrollment به کد اضافه کنید.

فایل data base اضافه شده است اما فعلا در داخل پروژه پنهان است. بر روی Show All Files کلیک کنید تا فایل را نمایش دهد.

توجه داشته باشید که فایل mdf. اکنون در پوشه App-Data قرار دارد. بر روی mdf. دابل کلیک کنید و Server Explorer را باز کنید. حالا جدول ها موجوداند و در داخل آنها داده وجود دارد.

نمایش داده از Students و جدول های مرتبط

با وجود داده در پایگاه داده حالا می توانید داده را بازیابی(retrieve) کنید و آن را در صفحه وب نمایش دهید. از کنترل Grid view برای نمایش داده به صورت سطری و ستونی استفاده کنید.

فایل Students.aspx را باز کنید و placeholderای به نام MainContent را پیدا کنید. در این placeholder  یک کنترل Grid view که شامل کد زیر است اضافه کنید.

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <asp:GridView runat="server" ID="studentsGrid"
        ItemType="ContosoUniversityModelBinding.Models.Student" DataKeyNames="StudentID" 
        SelectMethod="studentsGrid_GetData"
        AutoGenerateColumns="false">
        <Columns>
            <asp:DynamicField DataField="StudentID" />
            <asp:DynamicField DataField="LastName" />
            <asp:DynamicField DataField="FirstName" />
            <asp:DynamicField DataField="Year" />          
            <asp:TemplateField HeaderText="Total Credits">
              <ItemTemplate>
                <asp:Label Text="<%# Item.Enrollments.Sum(en => en.Course.Credits) %>" 
                    runat="server" />
              </ItemTemplate>
            </asp:TemplateField>        
        </Columns>
    </asp:GridView>
</asp:Content>

در این قطعه کد چند نکته وجود دارد که باید به آنها توجه کرد. اول توجه کنید که مقداری برای SelectMethod در Gridview ، تنظیم  شده است. این مقدار نام متدی را که جهت بازیابی داده برای Gridview استفاده می شود معین می کند. این متد را در مرحله بعد خواهید ساخت. دوم اینکه ویژگی(property)  به نام ItemType برای کلاس Students که قبلا ساخته اید set شده است. با set کردن این مقدار می توانید به propertyهای آن کلاس در کد مراجعه کنید. به عنوان مثال کلاس Students حاوی یک collection به نام Enrollmentsاست. می توانید از Item.Enrollments برای بازیابی آن collection استفاده کنید.

در فایل code-behind باید متدی که برای مقدار SelectMethod معین شده است اضافه کنید. Student.aspx.cs را باز کنید و عبارت using را برای فضاهای نام ContosoUniversityModelBinding.Models و System.Data.Entity اضافه کنید.

using ContosoUniversityModelBinding.Models;
using System.Data.Entity;

سپس متد زیر را اضافه کنید. توجه داشته باشید که نام این متد با نامی که برای SelectMethod گذاشته اید مطابقت داشته باشد.

()public IQueryable<Student> studentsGrid_GetData
}
    SchoolContext db = new SchoolContext();
    var query = db.Students.Include(s => s.Enrollments.Select(e => e.Course));
    return query;
{

عبارت include موجب بهبود کارایی این query می شود اما برای اینکه این query به درستی کار کند ضرورری نیست. بدون query داده از طریق بار کردن کند(lazy loading ) بازیاتی می شود که در آن هر بار که داده بازیابی می شود یک query جدا به پایگاه داده فرستاده می شود. با استفاده از عبارت include داده از طریق بارکردن سریع(eager loading) بازیابی می شود که تمام داده از طریق یک query از پایگاه داده بازیابی می شود. در حالتی بخش بیشتری از داده مورد استفاده قرار نمی گیرد eager loading کارایی پایینی خواهد داشت.

به طور پیش فرض داده با استفاده از مقادیر property که به عنوان کلید(key) در نظر گرفته شده است مرتب می شود. می توانید برای تعیین کردن مقدار متفاوت برای مرتب کردن از عبارت OrderBy استفاده کنید.در این مثال از propertyای به نام StudentID برای مرتب سازی استفاده می شود. در مباحث مربوط به مرتب سازی(sorting)، صفحه بندی(paging) و فیلتر کردن (filtering) می توانبد به کاربر این قابلیت را بدهید که ستون مورد نظر خود را برای مرتب سازی انتخاب کند.

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

تولید خودکار متدهای model binding

هنگام کار با این آموزش می توانید کدهای این آموزش را در پروژه خود کپی کنید، البته یکی از معایب این روش این است که از ویژگی هایی که visual studio به صورت خودکار جهت تولید کد برای model binding پیاده سازی می کند آگاه نخواهید شد. وقتی روی پروژه خودتان کار می کنید، تولیدکد به طور خودکار باعث صرفه جویی در زمان می شود و به شما این حس را می دهد که چگونه یک عملیات (operation) را پباده سازی کنید. این بخش، تولید کد به صورت خودکار(automatic) را توضیح می دهد.

وقتی که بر روی propertyهای DeleteMethod،InsertMethod، UpdateMethod یا SelectMethod یک مقدار را set می کنید، می توانید گزینه Create New Method را انتخاب کنید.

visual studio علاوه براینکه متدی را در  کدهای پشت صحنه می سازد، یک کد پیاده سازی برای کمک به کاربر برای اجرای عملیات تولید می کند. اگر شما ItemType (که یک property است) را قبل از استفاده از تولید کد خودکار تنظیم  کنید، کد تولید شده، از آن property برای عملیات استفاده می کند. به عنوان مثال وقتی که  UpdateMethod تنظیم شود کد زیر تولید می شود.

// The id parameter name should match the DataKeyNames value set on the control
public void studentsGrid_UpdateItem(int id)
{
    ContosoUniversityModelBinding.Models.Student item = null;
    // Load the item here, e.g. item = MyDataLayer.Find(id);
    if (item == null)
    {
        // The item wasn't found
        ModelState.AddModelError("", String.Format("Item with id {0} was not found", id));
        return;
    }
    TryUpdateModel(item);
    if (ModelState.IsValid)
    {
        // Save changes here, e.g. MyDataLayer.SaveChanges();

    }
}

نیازی نیست که کد بالا به پروژه شما اضافه شود.

نتیجه آموزش asp پروژه محور

در این آموزش کلاس هایی تولید کردید و از آنها یک پایگاه داده ساختید. جدول های پایگاه داده را با داده تست پر کردید. از model binding برای بازیابی داده از data base استفاده کردید و سپس داده را در یک Gridview  نمایش دادید.