نمایش نتایج 1 تا 2 از 2

نام تاپیک: نمایش چندین ایتم در DropDownListFor با پلاگین Select2

  1. #1

    نمایش چندین ایتم در DropDownListFor با پلاگین Select2

    سلام


    می خواهیم لیستی را داخلDropDownListFor نمایش بدهم(بنز- بی ام و-هیوندا)
    واز پلاگین select2 هم استفاده میکنم
    مشکلم اینه که این ایتمها را کنار هم نمی توانم نمایش بدهم



    <div>
    @Html.DropDownListFor(model => model.Id, ViewBag.car as SelectList,
    "", htmlAttributes: new { @class = "form-control ", style = "width:100%", multiple = "true" })
    </div>




    @section scripts
    {
    <script>
    $(document).ready(function() {
    $('#Id').select2({
    placeholder: "نام ",
    maximumSelectionLength: 30,
    allowClear: true,
    tags: true
    });
    });
    </script>


    }






    public ActionResult About()
    {

    ViewBag.car = new SelectList(db.CarsType.ToList(),
    "Id", "Name",
    db.Cars.Select(c => new
    {
    Id= c.CarsId
    }).ToList());
    return View();
    }



    public class Add
    {
    public int[] Id { get; set; }
    }

  2. #2
    کاربر دائمی آواتار nunegandom
    تاریخ عضویت
    اردیبهشت 1390
    محل زندگی
    الان اصفهان
    سن
    32
    پست
    828

    نقل قول: نمایش چندین ایتم در DropDownListFor با پلاگین Select2

    سلام
    این رو نگاه کنید:
    Javascript:
    var CategoriyIds;
    var Primary_CategoryId;
    var Article_Tags;


    function LoadItems() {
    $.ajax({
    type: "get",
    async: true,
    url: "/Articles/Items",
    data: { lang: Number(ById('LanguageId').value) },
    dataType: "json",
    success: function (response) {
    var temp = JSON.parse(response);
    CategoriyIds = $("#CategoriyIds").select2({
    data: temp.Categories
    });
    Primary_CategoryId = $("#Primary_CategoryId").select2({
    data: temp.Categories
    });
    Article_Tags = $("#Article_Tags").select2({
    data: temp.Tags
    });
    }
    });
    }
    function LoadSelectedItems() {
    var article_id = Number($('#ArticleId').val());
    $.ajax({
    type: "get",
    async: true,
    cache: false,
    url: "/Articles/SelectedItems",
    data: { ArticleId: article_id },
    dataType: "json",
    success: function (response) {
    var temp = JSON.parse(response);
    $(CategoriyIds).val(temp.Caregories).trigger("chan ge");
    $(Primary_CategoryId).val(temp.PrimaryCategory).tr igger("change");
    $(Article_Tags).val(temp.Tags).trigger("change");
    }
    });
    }


    InitData();
    function InitData() {
    LoadItems();
    LoadSelectedItems();
    }


    $(document).on('click', '#AddNewCategory', function (e) {
    e.preventDefault;
    $('#CreatorModal .modal-title').text('دسته جدید');
    $('#CreatorModal .modal-body').load('/Categories/AddNewCategory');
    $('#CreatorModal .modal-footer').attr('methodfor', 'category');
    $('#CreatorModal').modal('show');
    });
    $(document).on('click', '#AddNewTag', function (e) {
    e.preventDefault;
    $('#CreatorModal .modal-title').text('تگ جدید');
    $('#CreatorModal .modal-body').load('/Tags/AddNewTag');
    $('#CreatorModal .modal-footer').attr('methodfor', 'tag');
    $('#CreatorModal').modal('show');
    });
    $(document).on('click', '#Modal_Save', function (e) {
    var methodfor = $('#CreatorModal .modal-footer').attr('methodfor');
    var data = $('#CreatorModal .modal-body form').serialize();
    if (methodfor === 'tag') {
    AJAXTag(data);
    }
    else if (methodfor === 'category') {
    AJAXCategory(data);
    }
    $('#CreatorModal .modal-body').innerHTML = '';
    $('#CreatorModal').modal('hide');
    });




    function AJAXTag(data) {
    $.ajax({
    type: "post",
    async: true,
    url: '/Tags/JAddNew',
    data: data,
    dataType: "json",
    success: function (response) {
    if (response.message === 'ok') {
    var newOption = new Option(response.text, response.id, false, false);
    $(Article_Tags).append(newOption).trigger('change' );
    $.notify({
    message: '<strong>تگ با موفقیت اضافه شده</strong>'
    }, {
    type: 'success'
    });
    } else if (response.message === 'error') {
    $.notify({
    message: '<strong>تگ اضافه نشد</strong>'
    }, {
    type: 'warning'
    });
    }
    }, error: function () {
    $.notify({
    message: '<strong>خطا - به برنامه نویس اطلاع دهید</strong>'
    }, {
    type: 'error'
    });
    }
    });
    }
    function AJAXCategory(data) {
    $.ajax({
    type: "post",
    async: true,
    url: '/Categories/JAddNew',
    data: data,
    dataType: "json",
    success: function (response) {
    if (response.message === 'ok') {
    var newOption = new Option(response.text, response.id, false, false);
    var newOption1 = new Option(response.text, response.id, false, false);
    Primary_CategoryId.append(newOption).trigger('chan ge');
    CategoriyIds.append(newOption1).trigger('change');
    $.notify({
    message: '<strong>دسته با موفقیت اضافه شده</strong>'
    }, {
    type: 'success'
    });
    } else if (response.message === 'error') {
    $.notify({
    message: '<strong>دسته اضافه نشد</strong>'
    }, {
    type: 'warning'
    });
    }
    }, error: function () {
    $.notify({
    message: '<strong>خطا - به برنامه نویس اطلاع دهید</strong>'
    }, {
    type: 'error'
    });
    }
    });
    }




    function ById(id) {
    return document.getElementById(id);
    }

    Controller:
    #region JMethods
    [HttpGet]
    public async Task<JsonResult> Items(Language lang)
    {
    var queryCategory = await db.CategoryRepository.AsQueryable().Where(y => y.LanguageId == lang).Select(y => new { id = y.CategoryId, text = y.Name }).ToListAsync();
    var queryTag = await db.TagRepository.AsQueryable().Where(y => y.LanguageId == lang).Select(y => new { id = y.TagId, text = y.Name }).ToListAsync();
    var result = new { Categories = queryCategory, Tags = queryTag };
    var json = Newtonsoft.Json.JsonConvert.SerializeObject(result );
    return Json(json, JsonRequestBehavior.AllowGet);
    }
    [HttpGet]
    public async Task<JsonResult> SelectedItems(int ArticleId)
    {
    var query = await db.ArticleRepository.AsQueryable().Include(y => y.Categories).Include(y => y.Tags).FirstOrDefaultAsync(y => y.ArticleId == ArticleId);
    var result = new { PrimaryCategory = query.Primary_CategoryId, Caregories = query.Categories.Select(y => y.CategoryId), Tags = query.Tags.Select(y => y.TagId) };
    var json = Newtonsoft.Json.JsonConvert.SerializeObject(result );
    return Json(json, JsonRequestBehavior.AllowGet);
    }
    #endregion



    View:
    کد HTML:
    <div class="form-group">                    @Html.LabelFor(model => model.CategoriyIds, htmlAttributes: new { @class = "control-label col-md-2" })                    <div class="col-md-10">                        <select class="form-control select2" id="CategoriyIds" name="CategoriyIds" multiple="multiple" data-placeholder="انتخاب دسته ها" style="width: 100%;"></select>                        @Html.ValidationMessageFor(model => model.CategoriyIds, "", new { @class = "text-danger" })                    </div>                </div>
                    <div class="form-group">                    @Html.LabelFor(y => y.Primary_CategoryId, htmlAttributes: new { @class = "control-label col-md-2" })                    <div class="col-md-10">                        <select class="form-control select2" id="Primary_CategoryId" name="Primary_CategoryId" data-placeholder="انتخاب دسته اصلی" style="width: 100%;"></select>                        @Html.ValidationMessageFor(model => model.Primary_CategoryId, "", new { @class = "text-danger" })                    </div>                </div>
                    <div class="form-group">                    @Html.LabelFor(model => model.Article_Tags, htmlAttributes: new { @class = "control-label col-md-2" })                    <div class="col-md-10">                        <select class="form-control select2" id="Article_Tags" name="Article_Tags" multiple="multiple" data-placeholder="انتخاب تگ ها" style="width: 100%;"></select>                        @Html.ValidationMessageFor(model => model.Article_Tags, "", new { @class = "text-danger" })                    </div>                </div>

تاپیک های مشابه

  1. مشکل در استفاده از select2 در قالب
    نوشته شده توسط raminroozdar در بخش طراحی وب (Web Design)
    پاسخ: 1
    آخرین پست: دوشنبه 13 خرداد 1398, 20:18 عصر
  2. بروز رسانی WebGrid بعد از تغییر آیتم Dropdownlistfor
    نوشته شده توسط navidiran در بخش ASP.NET MVC
    پاسخ: 1
    آخرین پست: یک شنبه 25 آذر 1397, 01:45 صبح
  3. پاسخ: 2
    آخرین پست: دوشنبه 31 خرداد 1395, 17:08 عصر
  4. کار با DropDownListFor
    نوشته شده توسط jaykob در بخش ASP.NET MVC
    پاسخ: 1
    آخرین پست: شنبه 29 شهریور 1393, 18:27 عصر
  5. گزینه " لطفا یک آیتم را انتخاب کنید " در Html.DropDownListFor
    نوشته شده توسط p.parsaee در بخش ASP.NET MVC
    پاسخ: 1
    آخرین پست: دوشنبه 02 بهمن 1391, 04:12 صبح

قوانین ایجاد تاپیک در تالار

  • شما نمی توانید تاپیک جدید ایجاد کنید
  • شما نمی توانید به تاپیک ها پاسخ دهید
  • شما نمی توانید ضمیمه ارسال کنید
  • شما نمی توانید پاسخ هایتان را ویرایش کنید
  •