آموزش پیشرفته ASP.Net Web Forms نمایش دسته بندی اخبار در وب سایت خبری
672 بار بازدید -
3 سال پیش
-
به نام خدا ، با
به نام خدا ، با آموزش asp.net webform در خدمت شما عزیزان هستیم.در قسمت قبلی اومدیم ساختار کلی یک وبسایت خبری رو ایجاد کردیم به این نحو که دیتابیس و جداول مربوطه رو داخل پایگاه داده اسکیوال سرور (sql server) ایجاد کردیم و استراکچر و ساختار پوشه بندی ها رو داخل محیط ویژوال استودیو ایجاد کردیم.در این جلسه پیج هامون رو اضافه میکنیم و کدهاشو مینویسیم.برای شروع کار داخل پوشه Pages/MasterPage میشیم و دوتا مسترپیج اضافه میکنیم.یک مسترپیج برای User ها به نام AdminMasterPage و یک مسترپیج برای Action ها به نام ActionMasterPage.داخل پوشه Pages/Admin یک پوشه به نام NewsTypeView برای موجودیت NewsType میسازیم.داخل پوشه NewsTypeView هم یک فرم جدید به نام index.aspx اضافه میکنیم که باید از مسترپیج AdminMasterPage ارث بری کنه.قدم بعدی ما میاییم و بوت استرپ رو به پروژه اضافه میکنیم.باید توجه داشته باشید که بوت استرپ رو به مسترپیج تون اضافه کنید تا فقط با یکبار انجام این کار ، بوت استرپ در تمام فرم هایی که از فرم مسترپیج ارث بری میکنند در دسترس خواهد بود.نکته بعدی اینکه حتما بوت استرپ رو بالای asp:ContentPlaceHolder اضافه کنید چون اگر بوت استرپ رو پایین asp:ContentPlaceHolder اضافه کنید فقط خود مسترپیج میتونه از قابلیت های بوت استرپ استفاده کنه اما اگر بوت استرپ رو بالای asp:ContentPlaceHolder اضافه کنید علاوه بر خود مسترپیج ، تمام فرم هایی که از مسترپیج ارث بری میکنند نیز میتونن از قابلیت های بوت استرپ استفاده کنن.عملکرد asp:ContentPlaceHolder نیز قبلا توضیح داده ایم که مثل یک گیره عمل میکنه و محتوا رو داخل خودش نگه میداره و با استفاده از اون میشه هر محتوایی رو در هر قسمتی از صفحه وب نگه داشت.به این صورت که خود کاربر هم میتونه asp:ContentPlaceHolder های جدیدی به فرم مسترپیج اضافه کنه تا بتونه تو فرم ها از اون برای مدیریت لوکیشن عناصر ، روی صفحه وب استفاده کنه.قدم بعدی میاییم سراغ کدنویسی صفحه ، تو مسترپیج مون داخل تگ body داخل تگ فرزندش یعنی form ، یک div ایجاد میکنیم و بهش کلاس بوت استرپ container رو میدیم تا بوت استرپ صفحه رو داخل یک قاب ثابت بندازه تا محتوا و عناصر از کناره های صفحه بیرون نزنند.داخل div یک تگ فرزند div دیگه میزنیم و بهش کلاس بوت استرپ row رو میدیم تا یک سطر ایجاد کنه. داخل div row یک تگ فرزند div میزنیم و بهش کلاس بوت استرپ col-md-11 رو میدیم تا یک ستون با پهنای 11 (بعنوان هدر سایت) در صفحه وب ایجاد کنیم و داخلش متن "گروه برنامه نویسی هیلتن" رو مینویسیم تا هدر سایت به کاربر نمایش داده بشه.قدم بعدی هم کلاس فونت مورد نظر رو که جلسات قبل نوشته بودیم به پروژه اضافه میکنیم و در div container فراخوانیش میکنیم.با استفاده از کلاس css میاییم و جهت نمایش متن "گروه برنامه نویسی هیلتن" رو rtl میکنیم و به هدر سایت هم رنگ مورد نظر رو اختصاص میدیم تا از نظر ظاهری بهتر شه.مرحله بعدی ما میاییم و به سمت راست صفحه یک List Group و سمت چپ صفحه نیز یک gridview اضافه میکنیم.row (سطر) قبلی که ایجاد کردیم برای هدر سایت بود ، برای قسمت body هم ما باید یک row و دوتا col دیگه اضافه کنیم که تو قسمت یا col راست صفحه List Group مون قرار بگیره و تو قسمت وسط یا col دیگه مون هم گریدویو قرار بگیره.بنابراین یک div ایجاد میکنیم و بهش کلاس بوت استرپ row رو میدیم تا یک سطر ایجاد کنه داخل div row هم دوتا div col ایجاد میکنیم ، یک col-md-8 و یک col-md-4 که جمعا میشن 12 تا (بوت استرپ صفحه وب رو به 12 ستون تقسیم میکنه بنابراین مجموع col یا ستون هایی که ایجاد میکنید باید حداکثر 12 تا باشند). کلاس col-md-8 ، ستونی به پهنای 8 ایجاد میکنه که از سمت چپ صفحه شروع میشه و به اندازه 8 واحد به طرف سمت راست صفحه رو احاطه میکنه که قراره داخلش گریدویو مون رو قرار بدیم. کلاس col-md-4 هم از امتداد col-md-8 ، یک ستون دیگه به پهنای 4 ایجاد میکنه که در اینجا سمت راست صفحه رو دربر میگیره که داخلش List Group مون قرار میگیره.بعد از این ما میاییم و با انتیتی فریمورک (Entity Framework) مدل مون رو اضافه میکنیم.گام بعدی هم باید گرید ویو رو اضافه کنیم ، در قسمت های قبلی ما گفتیم که بجای گریدویو میشه از jquery datatable استفاده کنیم که در واقع یک datatable با قابلیت های پیشرفته گریدویو هست بعنوان مثال قابلیت Pagination یا همون پیج بندی صفحات رو داره و خیلی قابلیتهای دیگه . بعد از اون یک تابع GetList مینویسیم تا مقادیر رو از دیتابیس واکشی کنه و تو datatable (شبیه گریدویو) نمایش بده.
3 سال پیش
در تاریخ 1400/08/22 منتشر شده
است.
672
بـار بازدید شده