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

ListBox با CheckBoxesدر ASP.Net MVC Razor
0 0
ListBox با CheckBoxesدر ASP.Net MVC Razor

 در این مقاله با یک مثال توضیح خواهم داد ، نحوه اتصال (جمع کردن) ListBox چند گزینه ای را انتخاب کنید (چند گزینه ای) را با CheckBoxes از بانک اطلاعاتی با استفاده از jQuery در ASP.Net MVC Razor انتخاب کنید.
عنصر ListBox با استفاده از Bootstrap وپلاگین چند گزینه ای jQuery Bootstrap  با CheckBoxes اضافه می شود.

دانلود Bootstrap وپلاگین چند انتخاب jQuery Bootstrap 
لینک های دانلود به شرح زیر است.
Bootstrap
http://getbootstrap.com/
پلاگین چند گزینه ای jQuery BootStrap
شما باید فایلهای افزونه را از مکان زیر بارگیری کنید.
https://github.com/davidstutz/bootstrap-multiselect/
مستندات کامل را می توانید در صفحه زیر بخوانید.
http://davidstutz.github.io/bootstrap-multiselect/
بانک اطلاعات
در این مقاله از یک جدول به نام میوه هایی استفاده می شود که طرح آن به شرح زیر است.

جدول میوه ها سوابق زیر را دارند.

توجه : می توانید جدول بانک اطلاعاتی SQL را با کلیک روی لینک  دانلود کنید. فایل SQL را بارگیری کنید
فضاهای نام
باید نامهای زیر را وارد کنید.

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

Model
کلاس Model زیر دارای دو ویژگی Fruits و FruitIds است.
ویژگی Fruits یک لیست عمومی از کلاس SelectListItem است که یک کلاس داخلی ساخته شده از ASP.Net MVC است که کلیه خصوصیات مورد نیاز برای جمع کردن ListBox را دارد.

public class FruitModel
{
    public List<SelectListItem> Fruits { get; set; }
    public int[] FruitIds { get; set; }
}

Controller
Controller از دو روش تشکیل شده است :
روش انجام عملیات GET
در داخل این روش Action ، روش PopuleFruits نامیده می شود.
در داخل روش PopuleFruits ، سوابق جدول Fruits با استفاده از DataReader  و لیست عمومی کلاس SelectListItem جمع می شود.
FruitName در ویژگی Text ذخیره می شود در حالی که FruitId در ویژگی Value ذخیره می شود.
سرانجام شی کلاس FruitModel به View برگشت داده می شود.
روش انجام عملیات POST
این روش ارتباط حاصل از عملکرد POST را از View دریافت می کند.
با ارسال فرم ، مقادیر ارسال شده از طریق شی کلاس FruitModel ذخیره می شوند.
سپس روش PopuleFruits استفاده می شود و Fruit انتخاب شده با استفاده از بیان Lambda جمع می شود.
سرانجام چند نام میوه انتخاب شده در یک شی ViewBag قرار می گیرند که بعداً با استفاده از جعبه پیام هشدار JavaScript در View نمایش داده می شوند.
توجه : برای اطلاعات بیشتر در مورد نمایش پیام با استفاده از JavaScript Alert MessageBox ، لطفا مقاله نمایش پیام از Controller در View با استفاده از Alert MessageBox جاوا اسكریپت را مطالعه کنید .

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
در داخل View ، در اولین خط کلاس FruitModel به عنوان Model برای View اعلام می شود.
View شامل یک فرم HTML است که با استفاده از روش Html.BeginForm با پارامترهای زیر ایجاد شده است.
ActionName - نام عمل در این حالت Index است.
ControllerName - نام Controller در این حالت Home است.
FormMethod - این روش فرم یعنی GET یا POST را مشخص می کند. در این حالت روی POST تنظیم می شود.
فرم شامل یک لیست ListBox و یک دکمه ارسال است.
ListBox با استفاده از روش Html.ListBoxFor Html Helper ایجاد می شود.
اولین پارامتر عبارت Lambda برای مشخص کردن ویژگی است که هنگام ارسال فرم ، مقادیر منتخب ListBox را نگه می دارد.
پارامتر دوم ویژگی کلاس Model برای جمع کردن ListBox یعنی منبع اطلاعات آن است.
در پارامتر سوم ، ویژگی Class برای ListBox تنظیم می شود. کلاس اعمال شده به ListBox برای انتخاب عنصر ListBox با استفاده از jQuery استفاده خواهد شد.
در داخل برنامه رویداد handler در jQuery document ، پلاگین چند انتخابی jQuery Bootstrap به عنصر ListBox اعمال می شود.
با کلیک بر روی دکمه ارسال ، فرم ارسال می شود و مقادیر میوه های انتخاب شده به Controller ارسال می شود.
سرانجام چند نام میوه انتخاب شده با استفاده از جعبه پیام هشدار JavaScript نمایش داده می شوند.

@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-family: Arial;
            font-size: 10pt;
        }
    </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 استفاده کنید.

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