[英]ASP.NET MVC multiple select dropdown
我正在使用以下代碼讓用戶在表單上選擇多個位置。
@Html.DropDownListFor(m => m.location_code, Model.location_type, new { @class = "form-control", @multiple = "multiple" }).
location_code 是List<int>
,location_type 是List<SelectListItem>
填充數據。
該代碼確實將控制器中的選定值返回給我,但是當用戶單擊編輯按鈕時,傳遞的對象不會顯示選定的值,而是顯示正常的初始化下拉列表,沒有任何選擇。
我真正想要的是,一旦用戶提交表單(包括多個選擇的值),它就會進入一個頁面,用戶確認詳細信息是否正確。如果不是,他按下編輯按鈕,對象再次傳遞給控制器。在這個階段它應該顯示選擇的多個值。其他字段表現正常。
對此有任何見解嗎?
在您看來:
@Html.ListBoxFor(m => m.location_code, Model.location_type)
這就是你所需要的。 您正在使用 ListBox 控件,因此它已經是一個多選列表。
然后回到你的控制器,你可以得到這樣的選定項目:
[HttpPost]
public string SaveResults(List<int> location_code)
{
if (location_code!= null)
{
return string.Join(",", location_code);
}
else
{
return "No values are selected";
}
}
我假設你已經知道一般的 MVC 東西,所以請記住:
首先獲取這個庫並設置它: https ://select2.org/getting-started/basic-usage
在您看來,您可以使用它
@Html.DropDownListFor(model => model.DistrictId, new SelectList(new List<object>(), "Id ", "Description"), "Select District", htmlAttributes: new
{
@class = "js-example-placeholder-multiple col-sm-12 form-select form-control",
@multiple="multiple",
id = "DistrictDropDownList"
})
然后,您可以為上面控件中使用的 model.DistrictId 添加屬性 viewmodel 作為字符串列表,如下所示
public class Places
{
//Other ViewModel properties
public List<string> DistrictId {get;set;}
}
當您將 ViewModel 提交回控制器時,您將擁有多個選定的 Id 作為字符串列表。
在 Asp.Net MVC 和 C#.Net 中使用 jQuery 的 MultiSelect DropdownList:
首先,我們將創建一個新的 mvc 應用程序並在模型文件夾中添加一個模型類文件。 在此模型類文件中添加以下代碼。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace MvcApplication1.Models
{
public class CountryModel
{
public List<Country> CountryList { get; set; }
public string SelectedCountryId { get; set; }
}
public class Country
{
public string CountryName { get; set; }
}
}
現在添加一個控制器類文件並添加以下代碼。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcApplication1.Models;
namespace MvcApplication1.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
CountryModel objcountrymodel = new CountryModel();
objcountrymodel.CountryList = new List<Country>();
objcountrymodel.CountryList = CountryDate();
return View(objcountrymodel);
}
public List<Country> CountryDate()
{
List<Country> objcountry = new List<Country>();
objcountry.Add(new Country { CountryName = "America" });
objcountry.Add(new Country { CountryName = "India" });
objcountry.Add(new Country { CountryName = "Sri Lanka" });
objcountry.Add(new Country { CountryName = "China" });
objcountry.Add(new Country { CountryName = "Pakistan" });
return objcountry;
}
}
}
在上面的代碼中,我創建了一個國家的集合。 這個列表我們將與下拉列表綁定。 現在創建視圖並將以下代碼添加到視圖中。
@model MvcApplication1.Models.CountryModel
@{
ViewBag.Title = "MultiSelect DropdownList Using jQuery in Asp.Net MVC and C#.Net";
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="../../Scripts/jquery.sumoselect.js" type="text/javascript"></script>
<link href="../../Css/dropdownliststyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
window.asd = $('.ddlMultiSlectBox).SumoSelect({ csvDispCount: 4 });
});
</script>
Country:
@Html.DropDownListFor(m => m.SelectedCountryId, new SelectList(Model.CountryList, "CountryName", "CountryName"), new {@multiple="multiple",@placeholder="Please select country", @class="ddlMultiSlectBox" })
在這段代碼中,我添加了 css 和 jQuery 庫參考,並使用 sumoselect 函數來顯示多選下拉列表。
現在我們已經運行了應用程序來檢查輸出。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.