0

私はDropDownList Multiを実装しようとしています。私のアプリケーションでSchoolsを選択するためにSelectpickerを使用して選択します。Asp.Net Mvc Selectpicker

私はMVCとJQueryに慣れていません。なぜなら、Webformsを長年使っていたので、私はインターネットから学んでいます。ここで

はシナリオです:ときに、ユーザーが選択

public ActionResult Class() 
{ 
    IEnumerable<SelectListItem> ListClasses = db.scasy_class 
     .OrderBy(a => a.class_name) 
     .Select(c => new SelectListItem 
     { 
      Value = c.id.ToString(), 
      Text = c.class_name, 
      Selected = false 
     }); 
    ViewBag.Class = ListClasses.ToList(); 

    ClassViewModel classViewModel = new ClassViewModel() 
    { 
     SelectOptions = ListClasses 
    }; 

    return View(classViewModel); 
} 

、レイアウト上:DropDownListコントロールを埋めるために

@*DropDownList Select School*@            
@Html.DropDownList("Schools", null, null, new { id = "MultiSelect", @class = "selectpicker form-control", multiple = "", title = "School" }) 

コード:

私のレイアウトで、DropDownListコントロールがあります一部の学校、ドロップダウンリストを使用して、

$('#MultiSelect').on('change', function() { 
    $.each($("#MultiSelect option"), function() { 
     $.post("/Setup/Student/SetSchool/", { school: $(this).val(), selected: $(this).prop('selected') }); 
    }); 
}); 

とコントローラ。

public ActionResult SetSchool(int school, bool selected) 
{ 
    ArrayList school_nos = Session["Schools"] as ArrayList; 

    if (selected) 
    { 
     if (!school_nos.Contains(school)) 
     { 
      school_nos.Add(school); 
     } 
    } 
    else 
    { 
     if (school_nos.Contains(school)) 
     { 
      school_nos.Remove(school); 
     } 
    } 

    Session["Schools"] = school_nos; 

    return new HttpStatusCodeResult(HttpStatusCode.OK); 
} 

ここまで期待通りに動作します。 次回のリロードでは、ドロップダウンリストに同じデータを入力しようとしていますが、セッション情報を使用して以前に選択した学校にチックを表示しています。

$(document).ready(function() { 
    $.getJSON("/Setup/Student/GetSchool/", 
     function (data) {      
      var myData = []; 
      $.each(data, function (index, item) { 
       if (item.Selected == true) { 
        myData.push(item.Value); 
       } 
      }); 
      //alert(myData); 
      $('#MultiSelect').selectpicker('val', myData);      
     }); 
}); 

とコントローラ。

public JsonResult GetSchool() 
{ 
    IEnumerable<SelectListItem> ListSchools = db.scasy_school 
     .OrderBy(a => a.name) 
     .Select(a => new SelectListItem { Value = a.id.ToString(), Text = a.name}); 

    ArrayList school_nos = Session["Schools"] as ArrayList; 

    List<SelectListItem> ListSchoolsUpdated = new List<SelectListItem>(); 

    foreach (var item in ListSchools) 
    { 
     SelectListItem selListItem; 

     if (school_nos.Contains(item.Value.ToString())) 
     { 
      selListItem = new SelectListItem() { Value = item.Value.ToString(), Text = item.Text, Selected = true }; 
     } 
     else 
     { 
      selListItem = new SelectListItem() { Value = item.Value.ToString(), Text = item.Text, Selected = false }; 
     } 

     ListSchoolsUpdated.Add(selListItem); 
    } 
    return Json(ListSchoolsUpdated, JsonRequestBehavior.AllowGet); 
} 

コードではエラーは発生しませんが、選択した項目をドロップダウンリストに表示することはできません。

enter image description here

答えて

0

あなたのページのためのあなたのコントローラのアクションに学校選択

public class ClassViewModel { 
    public List<int> SelectedSchools {get; set;} 
    public List<SelectListItem> Schools {get; set;} 
} 

セットモデルクラスを宣言します。あなたのビューモデル

@model ClassViewModel 

は、その後、あなたのビューを使用して、このコードは、コメントの

@Html.ListBoxFor(m=> m.SelectedSchools , Model.Schools, new {id = "MultiSelect", @class = "selectpicker form-control", title = "School" }) 
+0

感謝をドロップダウンリスト表示するように設定

、DropDownListコントロールは_Layout.cshtmlです。 – Meliksah