مقدمه
راه های زیادی برای نمایش داده ها در برنامه وب شما وجود دارد. یکی از آنها استفاده از جداول داده با استفاده از MVC و Entity Framework است. در بیشتر نمونههای موجود، فیلتر کردن، مرتبسازی و صفحهبندی دادهها در سمت مشتری انجام شده است. اما در یک سناریوی بلادرنگ، زمانی که با داده های بزرگ کار می کنید، فیلتر کردن، مرتب سازی یا صفحه داده ها در سمت مشتری امکان پذیر نیست.
از این رو، این مقاله نحوه استفاده از جدول داده ها و اعمال فیلتر، مرتب سازی و صفحه بندی سمت سرور را با استفاده از MVC و Entity Framework به کاربر نشان می دهد.
- ویژوال استودیو 2015
- SQL Server Management Studio 2012 با پایگاه داده Northwind
- JQuery 3.2.1 (شامل ویژوال استودیو 2015)
- Bootstrap V3.0 (شامل ویژوال استودیو 2015)
- JQuery Data Table V1.10.16 (دانلود از https://datatables.net/download/index)
استودیو 2015 را باز کنید و به File - New - Project بروید - Visual C# را از قالب های نصب شده انتخاب کنید - ASP.Net Web Applications را از پنجره سمت راست انتخاب کنید - نام پروژه خود را وارد کنید و Location را انتخاب کنید و OK کنید.
سپس از صفحه بعد Template MVC را انتخاب کنید و با انتخاب کادرهای زیر، ارجاعات اصلی را برای MVC اضافه کنید.
سپس بر روی OK کلیک کنید تا یک برنامه وب برای شما ایجاد شود. پروژه را بسازید و اجرا کنید تا مطمئن شوید که به درستی اجرا می شود.
کتابخانه ها را به پروژه خود اضافه کنید
هنگامی که پروژه ایجاد شد، خواهید دید که به طور خودکار کتابخانه های جاوا اسکریپت JQuery و Bootstrap را به پوشه Script و تمام فایل های Stylesheet مرتبط را به پوشه Content اضافه کرده است.
اگر بسته jquery datatable را از https://datatables.net/download/index دانلود کرده اید ، فایل jquery.datatable.min.js را در Script Table و فایل jquery.dataTables.css را در پوشه Content کپی کنید.
اطمینان حاصل کنید که تمام فایل های اضافه شده به پروژه را درج کرده اید.
سپس به پوشه View بروید، Shared را انتخاب کنید، _Layout.cshtml را انتخاب کنید و کد زیر را در عنصر head بعد از عنصر عنوان اضافه کنید.
- <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" />
- <link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" />
- <link href="@Url.Content("~/Content/jquery.dataTables.css")" rel="stylesheet" />
- <script src="@Url.Content("~/Scripts/jquery-3.2.1.min.js")" type="text/javascript"></script>
- <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
- <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
- <script src="@Url.Content("~/Scripts/bootstrap.min.js")" type="text/javascript"></script>
- <script src="@Url.Content("~/Scripts/jquery.dataTables.js")" type="text/javascript"></script>
راه اندازی کلاس پایگاه داده با استفاده از Entity Framework
هنگامی که برنامه وب راه اندازی و اجرا شد، می خواهیم جزء Data را به آن اضافه کنیم. در دنیای واقعی، ما میخواهیم یک پروژه Web api جداگانه برای ایجاد برنامههای کاربردی وب مبتنی بر داده ایجاد کنیم، اما در اینجا از رویکرد مبتدیان استفاده میکنیم، بنابراین مدل داده را به همان پروژه اضافه میکنیم.
با کلیک راست بر روی Project Name - Add - New Folder، پوشه جدیدی به نام DataApi در همان پروژه ایجاد کنید.
روی DataApi کلیک راست کنید - Add - ADO.NET Entity Data Model - Specify Name for Data Model - OK را بزنید
سپس ابتدا کد محتوای مدل را از پایگاه داده انتخاب کنید. شما می توانید سایر محتویات مدل را نیز بر اساس نیاز خود ایجاد کنید. سپس رشته اتصال خود را ایجاد کنید که در فایل Web.Config ذخیره می شود. اکنون از Choose your Database Objects and Settings Tables مورد نیاز خود را انتخاب کرده و روی Finish کلیک کنید.