MVC 下拉列表/HTML Select 所选项目建模

Question

尝试使用 HTML.Select 代替 dropdown.for，因为出于某种原因模型报告为 bring null。（这不是主要问题，但我想知道原因）关于我的问题是因为我使用的是标准 html select 控件，视图无法关联 select 将项目值编辑为模型属性.

查看如下：

@model CustomerPortal.ViewModels.Interfaces.ICustomerEmailViewModel

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

<h2>Create</h2>

<script>
var customerId;
var emailTypeId;
</script>

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


<div class="form-horizontal">
    <h4>CustomerEmailViewModel</h4>
    <hr/>
    @Html.ValidationSummary(true, "", new {@class = "text-danger"})


    <div style="clear: both">
        <div style="float: left">
            @Html.LabelFor(model => model.CustomerId, new {@class = "control-label col-md-2"})
        </div>
        <div style="float: left;">
            <select id="Customer_Id" name=" Customer" onchange="this.options[this.selectedIndex].value;"></select>
            @Html.HiddenFor(model => model.CustomerId, new {id = "hdnCustomerId"})
        </div>
    </div>
    <br/>

    <div style="clear: both">
        <div>
            @Html.LabelFor(model => model.EmailAddress, htmlAttributes: new {@class = "control-label col-md-2"})
            <div class="col-md-10">
                @Html.EditorFor(model => model.EmailAddress, new {htmlAttributes = new {@class = "form-control"}})
                @Html.ValidationMessageFor(model => model.EmailAddress, "", new {@class = "text-danger"})
            </div>
        </div>
    </div>
  </div>


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

<script language="javascript" type="text/javascript">
    $(document)
        .ready(function() {

            customerId = $('#Customer_Id').val();
            emailTypeId = $('#CustomerEmailType_Id').val();

            $.getJSON('/api/CustomerEmailTypeApi/GetAllCustomerEmailTypes/',
                function(data) {
                    var items = '';

                    $.each(data,
                        function(i, emailType) {
                            items += "<option value='" + emailType.Value + "'>" + emailType.Text + "</option>";
                        });
                    $('#CustomerEmailType_Id').html(items);
                });

            $.getJSON('/api/CustomerApi/GetAllCustomers/',
                function(data) {
                    var items = '';

                    $.each(data,
                        function(i, customer) {
                            items += "<option value='" + customer.value +     "'>" + customer.Text + "</option>";
                        });
                    $('#Customer_Id').html(items);
                });
        });

</script>

控制器：

[ValidateAntiForgeryToken]
    public async Task<ActionResult> Create(CustomerEmailViewModel customerEmail)
    {

        if (ModelState.IsValid)
        {
            CustomerEmail cevm = new CustomerEmail
            {
                Id = customerEmail.Id,
                EmailAddress = customerEmail.EmailAddress,
                CustomerId = customerEmail.CustomerId,
                CustomerEmailTypeId = customerEmail.CustomerEmailType.Id
            };

            try
            {
                _portalUow.CustomerEmailRepository.Insert(cevm);
                _portalUow.Save();
            }
            catch (Exception)
            {
                Danger("An exception occured while updating the database.  The transaction was rolled back");
                return null; // System.Web.UI.WebControls.View(customer);
            }


            return RedirectToAction("Index");
        }

        return View(customerEmail);
    }

感谢您对此的任何帮助....

Answer 1

尝试使用@Html.DropDownListFor

@Html.DropDownListFor(model => model.property, new SelectList(Model.dropdownlist, "Value", "Text"), new { @class = "form-control" })

在控制器中，您还需要将下拉列表的值分配给 Model.dropdownlist。例如：

var list = new SelectList(new[]
        {
            new {ID="CustomerId1", Name="CustomerId1" },
            new {ID="CustomerId2", Name="CustomerId2" },               
        }, "ID", "Name", 1
        );
        your list instance = list;

MVC 下拉列表/HTML Select 所选项目建模

MVC dropdown / HTML Select selected item to model

model-view-controller

html-select

html.dropdownlistfor