توضیحات و دانلود

ساخت DropDownList با قابلیت انتخاب چند گزینه با jQuery BootStrap در ASP.NET MVC
0 0
ساخت DropDownList با قابلیت انتخاب چند گزینه با jQuery BootStrap در ASP.NET MVC

در این مقاله نحوه ساخت یک DropDown که قابلیت انتخاب چند گزینه با هم را دارد، آموزش داده می شود. در این مقاله از جی کوئری بوت استرپ و پلاگین Multi Select استفاده می شود.

در این مقاله شما موارد زیر را یاد خواهید گرفت

1-نحوه ساخت یک DropDown که قابلیت انتخاب چند گزینه با هم را داشته باشد

2-نحوه ارزیابی مقادیر انتخابی در DropDown که قابلیت انتخاب چند گزینه با هم را دارد

3-نحوه دسترسی به text و value گزینه های انتخاب شده

ابتدا یک فایل html ساخته و کتابخانه های مورد نیاز را به آن اضافه کنیم، می توان این کتابخانه ها را دانلود کرده و به صورت لوکال از آنها استفاده کرد که البته در اینجا ما از همان CDN های اصلی استفاده کرده ایم.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
 
   <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
   <script type="text/javascript" src="http://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
 
   <link rel="stylesheet" href="http://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" type="text/css" />

ابتدا یك جدول مانند زیر در SQL طراحی كنید.

سپس چند مقدار مانند زیر در آن وارد كنید.

 

توجه! بانك این سورس در لینك زیر قرار داده شده است!دانلود اسكریپت SQL

 

 فضای نام
ابتدا فضای نامهای زیر را اضافه كنید. 

using System.Configuration;
using System.Data.SqlClient;
using System.Collections.Generic;

  Model
كلاس Model ما شامل دو خصوصیت FruitId و  FruitName میباشد .

public class FruitModel
    {
        public int FruitId { getset; }
        public string FruitName { getset; }
    }

Controller
کنترل کننده متشکل از دو روش عمل است.
روش  GET
در داخل این روش ، PopulateFruits نامیده می شود.
در روش PopulateFruits ، رکوردها از جدول میوه ها با استفاده از DataReader استخراج می شوند و در لیست کلی ListListItem طبقه بندی می شود.
FruitName در Property Text در حالی که FruitId در Property Value ذخیره می شود.
در نهایت، کلاس کلاس FruitModel به View باز می گردد.
روش عمل برای اداره عملیات POST
id میوه های انتخابی در ListBox را گرفته و در نهایت در Popup نمایش میدهد.

public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            FruitModel fruit = new FruitModel();
            fruit.Fruits = PopulateFruits();
            return View(fruit);
        }
 
        [HttpPost]
        public ActionResult Index(FruitModel fruit)
        {
            fruit.Fruits = PopulateFruits();
            if (fruit.FruitIds != null)
            {
                List<SelectListItem> selectedItems = fruit.Fruits.Where(p => fruit.FruitIds.Contains(int.Parse(p.Value))).ToList();
 
                ViewBag.Message = "Selected Fruits:";
                foreach (var selectedItem in selectedItems)
                {
                    selectedItem.Selected = true;
                    ViewBag.Message += "\\n" + selectedItem.Text;
                }
            }
 
            return View(fruit);
        }
 
        private static List<SelectListItem> PopulateFruits()
        {
            List<SelectListItem> items = new List<SelectListItem>();
            string constr = ConfigurationManager.ConnectionStrings["Constring"].ConnectionString;
            using (SqlConnection con = new SqlConnection(constr))
            {
                string query = " SELECT FruitName, FruitId FROM Fruits";
                using (SqlCommand cmd = new SqlCommand(query))
                {
                    cmd.Connection = con;
                    con.Open();
                    using (SqlDataReader sdr = cmd.ExecuteReader())
                    {
                        while (sdr.Read())
                        {
                            items.Add(new SelectListItem
                            {
                                Text = sdr["FruitName"].ToString(),
                                Value = sdr["FruitId"].ToString()
                            });
                        }
                    }
                    con.Close();
                }
            }
 
            return items;
        }
    }

View

در داخل نمایش، در خط اول، کلاس FruitModel به عنوان مدل برای  View اعلام شده است.
View شامل یک فرم HTML است که با استفاده از روش Html.BeginForm با پارامترهای زیر ایجاد شده است.
ActionName - نام اکشن در این مورد Index است.
ControllerName - نام کنترل کننده. در این مورد نام Home است.
FormMethod - این روش فرم را یعنی GET یا POST مشخص می کند. در این مورد به POST تنظیم خواهد شد.
فرم شامل یک ListBox و یک Button است.
ListBox با استفاده از متد Html.ListBoxFor Html Helper ایجاد می شود.
پارامتر اول عبارت Lambda برای مشخص کردن  مقادیر انتخاب شده ListBox  است که هنگام ارسال فرم تحویل می دهد.
پارامتر دوم نام مقادیر برای نمایش ListBox است که از منبع داده اختصاص داده میشود.
هنگامی که دکمه Submit روی آن کلیک می شود، فرم ارسال می شود و مقادیر انتخاب میوه ها به کنترلر ارسال می شود.
در نهایت، نام چند میوه انتخاب شده با استفاده از جعبه پیام هشدار جاوا اسکریپت نمایش داده می شود.

@model CheckBox_DropDownList_MVC.Models.FruitModel
 
@{
    Layout = null;
}
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style type="text/css">
        body {
            font-familyArial;
            font-size10pt;
            padding10pt;
        }
    </style>
</head>
<body>
    @using (Html.BeginForm("Index""Home", FormMethod.Post))
    {
        @Html.Label("Fruits:")
        <br />
        <br />
        @Html.ListBoxFor(m => m.FruitIds, Model.Fruits, new { @class = "listbox" })
        <br />
        <br />
        <input type="submit" value="Submit" />
    }
 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.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 type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.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" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('.listbox').multiselect({
                includeSelectAllOption: true
            });
        });
    </script>
    @if (ViewBag.Message != null)
    {
        <script type="text/javascript">
            window.onload = function () {
                alert("@ViewBag.Message");
            };
        </script>
    }
</body>
</html>


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :