提交时如何获取DropDownList项？

Question

我的项目中有以下详细信息

MODEL

  public class AnimalModels
  {
    public string AnimalId { get; set; }
    public List<SelectListItem> AnimalList { get; set; }
  }

查看

@model DropDownList.Models.AnimalModels

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<script src="@Url.Content("~/Scripts/Animal/Index.js")" type="text/javascript"></script>

@using (Html.BeginForm())
{
  @Html.ValidationSummary(true)
  <div>
    <fieldset>
      <div>@Html.LabelFor(model => model.AnimalId)</div>
      <div>@Html.DropDownListFor(model => model.AnimalId, Model.AnimalList)</div>
      <div>@Html.ValidationMessageFor(model => model.AnimalId)</div>
    </fieldset>
    <input type="submit" name="Submit" value="Submit" />
  </div>
}

CONTROLLER

  public class AnimalController : Controller
  {
    //
    // GET: /Animal/

    public ActionResult Index()
    {
      AnimalModels model = new AnimalModels();
      model.AnimalList = new List<SelectListItem>();
      return View(model);
    }

    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult Index(AnimalModels model)
    {
      //TODO: get animal list
      model.AnimalList = new List<SelectListItem>();
      return View(model);
    }

  }

Index.js

//[B]Document ready
$(document).ready(function () {
  //Populate ddl using ajax (jquery)
  $.ajax({
    url: 'Resources/Animals.xml',    // name of file with our data - link has been renamed
    dataType: 'xml',    // type of file we will be reading
    success: parse,     // name of function to call when done reading file
    error: showError    // name of function to call when failed to read
  });

});
//[E]Document ready

function parse(xmlDoc) {
  var options = new Array();
  $(xmlDoc).find("ITEMS").each(function () {
    $(this).find("ITEM").each(function () {
      var optionValue = $(this).find('VALUE').text();
      var optionLabel = $(this).find('TEXT').text();
      options.push('<option value="' + optionValue + '">' + optionLabel + '</option>');
    });
  });
  options = options.join('');
  $('#AnimalId').append(options);
}

var showError = function (xhr, status, err) {
  alert("Error loading file Animals.xml in Resources folder.\n" + xhr.status + " " + err + ".");
};

Animals.xml

<?xml version="1.0" encoding="ISO-8859-1"?>
<ITEMS>
    <ITEM>
        <VALUE>-1</VALUE>
        <TEXT></TEXT>
    </ITEM>
    <ITEM>
        <VALUE>0</VALUE>
        <TEXT>Tiger</TEXT>
    </ITEM>
    <ITEM>
        <VALUE>1</VALUE>
        <TEXT>Lion</TEXT>
    </ITEM>
</ITEMS>

我的问题是，当我点击提交按钮时，有没有办法获得所有下拉列表项？ 因为当我尝试调试它时，该值始终为null

Answer 1

添加到表单 -

@for (int i = 0; i < Model.AnimalList.Count; i++)
{
  @Html.HiddenFor(model=>model.AnimalList[i].Value)
  @Html.HiddenFor(model=>model.AnimalList[i].Text)
}

Answer 2

https://stackoverflow.com/users/2984635/user2984635建议的代码解决方案

Model，index.js（unused），Animal.xml（未使用）保持不变。

视图和控制器代码已更新。吼叫是更新：

查看

@model DropDownList.Models.AnimalModels

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

@*<script src="@Url.Content("~/Scripts/Animal/Index.js")" type="text/javascript"></script>*@

@using (Html.BeginForm())
{
  @Html.ValidationSummary(true)
  <div>
    <fieldset>
      <div>@Html.LabelFor(model => model.AnimalId)</div>
      <div>@Html.DropDownListFor(model => model.AnimalId, Model.AnimalList)</div>
      <div>@Html.ValidationMessageFor(model => model.AnimalId)</div>
        //[B]the update
        @for (int i = 0; i < Model.AnimalList.Count; i++) 
        { 
            @Html.HiddenFor(model=>model.AnimalList[i].Value) 
            @Html.HiddenFor(model=>model.AnimalList[i].Text) 
        }
        //[E]the update
    </fieldset>
    <input type="submit" name="Submit" value="Submit" />
  </div>
}

<强> CONTROLLER

public class AnimalController : Controller
    {
        //
        // GET: /Animal/

        public ActionResult Index()
        {
            AnimalModels model = new AnimalModels();
            model = new AnimalModels(); 
            //[B]the update
            model.AnimalList = new List<SelectListItem>(); 
            model.AnimalList.Add(new SelectListItem { Value = "0", Text = "Tiger" }); 
            model.AnimalList.Add(new SelectListItem { Value = "1", Text = "Lion" });
            //[E]the update
            return View(model);
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Index(AnimalModels model)
        {
            //[B]the update
            model.AnimalList[int.Parse(model.AnimalId)].Selected = true;
            //[E]the update
            return View(model);
        }

}