در این مقاله قصد دارم در مورد نحوه اتصال مقدار به dropdown از پایگاه داده و نحوه پیاده سازی multiselect کشویی با چک باکس لیست با استفاده از افزونه jQuery multiselect توضیح دهم.
دانش مورد نیاز
- دانش اولیه MVC
- دانش اولیه jQuery.
- دانش اولیه Entity Framework.
- دانش اولیه LINQ.
- جدول پایگاه داده با مقادیر ایجاد کنید.
- یکپارچه سازی Entity Framework.
- کنترلر ایجاد کنید، افزونه Multiselect را با منوی کشویی مشاهده و فعال کنید.
- مقدار را به کشویی متصل کنید.
- نمایش مقدار انتخاب شده از کشویی.
- جدول پایگاه داده با مقادیر ایجاد کنید.
مطابق شکل زیر یک جدول ایجاد کنید.
برای ایجاد جدول داده شده در بالا، کوئری زیر را اجرا کنید.
- CREATE TABLE [dbo].[Dropdown](
- [Id] [int] IDENTITY(1,1) NOT NULL,
- [Skill] [nvarchar](100) NULL,
- CONSTRAINT [PK_Dropdown] PRIMARY KEY CLUSTERED
- (
- [Id] ASC
- )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
- ) ON [PRIMARY]
- GO
من مقدار را مانند شکل زیر وارد کردم.
برای درج مقادیر بالا، اسکریپت SQL را اجرا کنید.
- SET IDENTITY_INSERT [dbo].[Dropdown] ON
- GO
- INSERT [dbo].[Dropdown] ([Id], [Skill]) VALUES (1, N'C#.NET')
- GO
- INSERT [dbo].[Dropdown] ([Id], [Skill]) VALUES (2, N'ASP.NET')
- GO
- INSERT [dbo].[Dropdown] ([Id], [Skill]) VALUES (3, N'ASP.NET MVC')
- GO
- INSERT [dbo].[Dropdown] ([Id], [Skill]) VALUES (4, N'LINQ')
- GO
- INSERT [dbo].[Dropdown] ([Id], [Skill]) VALUES (5, N'ENTITY FRAMEWORK')
- GO
- INSERT [dbo].[Dropdown] ([Id], [Skill]) VALUES (6, N'WEB-API')
- GO
- INSERT [dbo].[Dropdown] ([Id], [Skill]) VALUES (7, N'DOCUSIGN')
- GO
- INSERT [dbo].[Dropdown] ([Id], [Skill]) VALUES (8, N'JQUERY')
- GO
- INSERT [dbo].[Dropdown] ([Id], [Skill]) VALUES (9, N'HTML5')
- GO
- INSERT [dbo].[Dropdown] ([Id], [Skill]) VALUES (10, N'SQLSERVER')
- GO
- SET IDENTITY_INSERT [dbo].[Dropdown] OFF
- GO
ادغام EntityFramework
قبلاً در مقاله قبلی در مورد نحوه ادغام Entity Framework با MVC بحث کردم. برای این کار به دو لینک زیر مراجعه کنید.
- http://www.c-sharpcorner.com/blogs/implement-database-first-approach-with-entity-framework
- http://www.c-sharpcorner.com/article/asynchronous-file-upload-using-kendo-ui-asynchronous-upload-with-mvc-and-entityf/ --مراجعه به مرحله 2
هنگامی که Entity Framework را با برنامه MVC خود ادغام کردید، اسکرین شات را مانند شکل زیر دریافت خواهید کرد.
Create Controller، مشاهده و فعال کردن افزونه Multiselect با کشویی
من کنترلر را به نام DropdownController در پوشه کنترلر ایجاد کرده ام.
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using System.Web;
- using System.Web.Mvc;
- namespace DropdownMulitSelectCheckbox.Controllers {
- public class DropdownController: Controller {
- // GET: Dropdown
- public ActionResult Index() {
- return View();
- }
- }
- }
برای فعال کردن افزونه Multiselect، باید اسکریپت زیر و CSS را به برنامه خود ارجاع دهیم
- <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
- <link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css"
- rel="stylesheet" type="text/css" />
- <script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"></script>
- <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css"
- rel="stylesheet" type="text/css" />
- <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
کنترل HTML/Razor را به ایجاد کرکره اضافه کنید. در اینجا، من HTML را ایجاد کرده ام. برای ایجاد منوی کشویی چند انتخابی را انتخاب کنید.
- <div> <select id="mySkills" multiple="multiple" required name="mySkillsName">
- @if (ViewBag.mySkills != null)
- {
- foreach (var item in ViewBag.mySkills)
- {
- if (item.Text != null)
- {
- <option value="@item.Value">
- @item.Text
- </option>
- }
- }
- }
- </select> </div>
اسکریپت زیر را اضافه کنید تا افزونه چند انتخابی را به کنترل مربوطه فعال کنید.
- <script type="text/javascript">
- $(function() {
- $('#mySkills').multiselect({
- includeSelectAllOption: true
- });
- });
- </script>
در نهایت، View مانند شکل زیر خواهد بود.
- @ {
- ViewBag.Title = "Index";
- } < script src = "http://code.jquery.com/jquery-1.12.4.min.js" > < /script> < link href = "http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css"
- rel = "stylesheet"
- type = "text/css" / > < script src = "http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" > < /script> < link href = "http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css"
- rel = "stylesheet"
- type = "text/css" / > < script src = "http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js" > < /script> < script type = "text/javascript" > $(function() {
- $('#mySkills').multiselect({
- includeSelectAllOption: true
- });
- }); < /script> < h2 > Multiselect Dropdown with Checkbox < /h2> < div > < select id = "mySkills"
- multiple = "multiple"
- required name = "mySkillsName" > @if(ViewBag.mySkills != null) {
- foreach(var item in ViewBag.mySkills) {
- if (item.Text != null) { < option value = "@item.Value" > @item.Text < /option>
- }
- }
- } < /select> < /div>
برای اتصال مقدار به dropdown، باید مقدار را از پایگاه داده دریافت کنیم و مقدار را به dropdown اختصاص دهیم.
مقدار را از پایگاه داده، با استفاده از چارچوب Entity Framework دریافت کنید.
این مقدار ViewBag.mySkills برای انتخاب کنترلر (کشویی) در View، مطابق شکل زیر، اختصاص داده می شود. پایگاه داده را بررسی کنید تا ببینید آیا مقدار آن را دارد یا خیر. اگر هیچ مقداری در پایگاه داده وجود نداشته باشد، به این معنی است که استثنای مرجع تهی را که من شرط null را برای آن بررسی کردم، پرتاب می کند.