动态填写下拉列表

时间:2013-05-17 09:13:19

标签: asp.net-mvc dynamic listbox

所以我在ASP.NET MVC4中工作,我想动态加载下拉列表。

这是我的模特类:

public class Meeting
{
public int MeetingId { get; set; }
[Required(ErrorMessage = "A name is required")]
public String Name { get; set; }
[Required(ErrorMessage = "Location is required")]
public String Location { get; set; }
[Required(ErrorMessage = "A start date is required")]
[DataType(DataType.Date)]
public DateTime StartDate { get; set; }
[DataType(DataType.Date)]
[DateGreaterThan("StartDate")]
public DateTime? EndDate  { get; set; }

public int? CountryId { get; set; }
public virtual Country Country { get; set; }
public String Sport { get; set; }

public List<string> SelectedTeamIds { get; set; }
public virtual List<TeamViewModel> SelectedTeams { get; set; }

public List<int> SelectedEventIds { get; set; }
public virtual List<EventViewModel> SelectedEvents { get; set; }



   public Meeting()
   {
    SelectedTeamIds = new List<string>();
    SelectedTeams = new List<TeamViewModel>();

    SelectedEventIds = new List<int>();
    SelectedEvents = new List<EventViewModel>(); 
    }
}

这是我感兴趣的控制器方法:

public ActionResult Create()
{
  ViewBag.CountryId = new MultiSelectList(db.Countries, "CountryId", "CountryName");
  ViewBag.AvailableEvents = db.Events.Where(e => e.SchoolcupEvent == true);
  ViewBag.AvailableTeams = db.Teams;
  var model = new Meeting();
  return View(model);
}

这是这种方法的观点:

@model Project.Domain.POCO.Meeting

<h2>Create</h2>
 @using (Html.BeginForm()) {
@Html.ValidationSummary(true)

<fieldset>
    <legend>Meeting</legend>
    <div class="editor-label">
        @Html.LabelFor(model => model.Name)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Name)
        @Html.ValidationMessageFor(model => model.Name)
    </div>
    <div class="editor-label">
        @Html.DisplayName("Country")
    </div>
    <div class="editor-field">
        @Html.DropDownList("CountryId", "Pick a country")
    </div>
    <div class="editor-label">
        @Html.LabelFor(model => model.Location)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Location)
        @Html.ValidationMessageFor(model => model.Location)
    </div>
    <div class="editor-label">
        @Html.DisplayName("Start Date")
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.StartDate)
        @Html.ValidationMessageFor(model => model.StartDate)
    </div>
    <div class="editor-label">
        @Html.DisplayName("End Date")
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.EndDate)
        @Html.ValidationMessageFor(model => model.EndDate)
    </div>
     <div class="editor-label">
        @Html.Label("Sports type")
    </div>
    <div class="editor-field">
        @Html.RadioButtonFor(m => m.Sport, "Swimming" ) Swimming
        @Html.RadioButtonFor(m => m.Sport, "Athletics" ) Athletics
    </div>

    <div class="editor-label">
        @Html.Label("Select Event(s)")
    </div>
    <div class="editor-field">
        @Html.ListBoxFor(model => model.SelectedEventIds, new MultiSelectList(ViewBag.AvailableEvents, "EventId", "Discipline", Model.SelectedEventIds), new { @class = "superselect" })
    </div>
    <div class="editor-label">
        @Html.Label("Select Team(s)")
    </div>
    <div class="editor-field">
        @Html.ListBoxFor(model => model.SelectedTeamIds, new MultiSelectList(ViewBag.AvailableTeams, "TeamId", "TeamId", Model.SelectedTeamIds), new { @class = "superselect" })
    </div>
    <p class="Button">
        <input type="submit" />
    </p>
</fieldset>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
@Styles.Render("~/Content/Css/UserInterface.css")
}

会议由许多活动组成。 所以问题出在ListBox有事件,我怎样才能动态加载属于我之前选择的会议的事件。我对全能的谷歌进行了一些研究,但我得到的只是涉及javascript / jquery的答案,而且由于我的知识基本上是0,我希望如果可能的话以另一种方式解决这个问题。如果没有,你能简单地向我解释我需要做什么,以及我在做什么。提前谢谢。

2 个答案:

答案 0 :(得分:1)

我认为没有jquery或javascript就无法实现它。如果想使用ASP.NET MVC,你应该熟悉jquery,它至关重要。 在这里为您提供一些可能有用的提示:

  • 第一个下拉列表的选择的更改是可以的事件 被jquery抓住
  • 一个jquery函数可以发布所选的值 服务器并接收第二个下拉列表的相关数据。
  • 第二个下拉列表可以通过追加选项填充到空下拉列表中。如果第二个下拉列表取决于第一个下拉列表的选择,则您不必首先填写它。但是,每次选择第一个下拉列表时,您必须删除所有项目(选项)

但是,还有另一个名为ASP.NET Webforms的选项,您可以在VS-tools的帮助下定义事件处理。

答案 1 :(得分:0)

您可以一起避免使用jquery并使用LiteralControl类。

ASP.NET MVC`s LiteralControl Class.