Question

我有一个网页，其中包含使用Html.DropDownListFor创建的2个下拉列表。

这2个列表用相同的元素填充，但是我希望用户在每个列表中选择2个不同的元素

我没有提供任何代码，因为我什么也没做，我只是想知道如何做

我必须使用JavaScript吗？如果是这样，它与我自己绑定在模型上的下拉列表有什么关系？

编辑： 这是我的模型课：

public class CreateWarModel
    {
        public List<HouseModel> Houses { get; set; }
        public string SelectedAllyHouse { get; set; }
        public string SelectedEnnemyHouse { get; set; }

        public CreateWarModel() { }
    }

这是cshtml：

<div class="col-md-10">
        @Html.DropDownListFor(x => Model.SelectedAllyHouse, new SelectList(Model.Houses, "ID", "Name"), htmlAttributes: new { @class = "form-control", id = "AllyHouse" })
</div>

<div class="col-md-10">
        @Html.DropDownListFor(x => Model.SelectedEnnemyHouse, new SelectList(Model.Houses, "ID", "Name"), htmlAttributes: new { @class = "form-control", id = "EnnemyHouse" })
</div>

Answer 1

让我通过一个例子来说明这一点。

以下是用于收集旅行信息的模型。行程的来源和目的地来自一组预定义的车站。

因此，会有两个下拉菜单显示相同的数据，但是每个下拉菜单的选择将分配给模型的不同属性。

// This model is used for collect and display of a Trip.
public class TripModel
{
    public int TripId { get; set; }

    //Id of the source station.
    public int SourceId { get; set; }

    // Id of the destination trip
    public int DestinationId { get; set; }

   // Collection of all available stations.
    public SelectList Stations { get; set; }
}

// Model for Station data.
public class StationModel
{
    public int StationId { get; set; }

    public string StationName { get; set; }
}

以下是我的视图Create.cshtml的代码，用户可以在其中输入新行程的详细信息。

@model WebApplication1.Models.TripModel
@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Create</h2>

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>TripModel</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.TripId, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.TripId, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.TripId, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.SourceId, htmlAttributes: new { @class =     "control-label col-md-2" })
            <div class="col-md-10">
                @*Creating dropdownlist for SourceId property of the model*@
                @Html.DropDownListFor(model => model.SourceId, Model.Stations);
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.DestinationId, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @*Creating dropdownlist for DestinationId property of the model*@
                @Html.DropDownListFor(model => model.DestinationId, Model.Stations);
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

以下是我的控制器代码。

public class TripController : Controller
{
    private List<StationModel> stations;
    public TripController()
    {
        stations = new List<StationModel>();
        stations.Add(new StationModel { StationId = 1, StationName = "Station01" });
        stations.Add(new StationModel { StationId = 2, StationName = "Station02" });
        stations.Add(new StationModel { StationId = 3, StationName = "Station03" });
        stations.Add(new StationModel { StationId = 4, StationName = "Station04" });
        stations.Add(new StationModel { StationId = 5, StationName = "Station05" });
        stations.Add(new StationModel { StationId = 6, StationName = "Station06" });
    }
    // GET: Account
    public ActionResult Index()
    {
        return View();
    }

    // GET: Account/Details/5
    // GET: Account/Create
    [HttpGet]
    public ActionResult Create()
    {
        var model = new TripModel();

        model.Stations = new SelectList(stations, "StationId", "StationName");

        return View(model);
    }

    [HttpPost]
    public ActionResult Create(TripModel model)
    {
        return View("Details", model);
    }
}

Details.cshtml用于显示行程详细信息。

@model WebApplication1.Models.TripModel

@{
    ViewBag.Title = "Details";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Details</h2>

<div>
    <h4>TripModel</h4>
    <hr />
    <dl class="dl-horizontal">
        <dt>
            @Html.DisplayNameFor(model => model.TripId)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.TripId)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.SourceId)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.SourceId)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.DestinationId)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.DestinationId)
        </dd>

    </dl>
</div>
<p>
    @Html.ActionLink("Back to List", "Index")
</p>

这是用户界面的外观。

创建旅行页面。

详细信息页面。

这就是您如何将两个具有相同数据的下拉列表与选择应用于模型的不同属性的方式。

我希望这可以帮助您解决问题。

2 Html.DropDownListFor具有2个不同的选择MVC C＃

1 个答案: