【问题标题】:How to Dynamically Assign DropDown Value in MVC 5 View如何在 MVC 5 视图中动态分配下拉值
【发布时间】:2017-02-09 03:45:48
【问题描述】:

我有一个包含基本地址信息的模型:

public class AddressModel()
{
    public string Address1 { get; set; }
    public string Address2 { get; set; }
    public string City { get; set; }
    public string State { get; set; }
    public string Zip { get; set; }
}

将其传递到我的视图中的表单时,我将值放入文本框中,但州除外,它是一个硬编码以包含美国各州的下拉框:

<form>
   <div class="container-fluid">
         <div class="col-md-3">
              <div class="form-group">
                   <!-- First Name -->
                   <label for="first_name_id" class="control-label">First Name</label>
                   <input type="text" class="form-control" id="first_name_id" name="first_name" placeholder="First Name" value="@Html.ViewData.Model.Patient.FirstName.First().ToString().ToUpper()@Html.ViewData.Model.FirstName.Substring(1).ToLower()">
                   </div>
              </div>
              <div class="col-md-3">
                   <div class="form-group">
                       <!-- Last Name -->
                       <label for="last_name_id" class="control-label">Last Name</label>
                       <input type="text" class="form-control" id="last_name_id" name="last_name" placeholder="Last Name" value="@Html.ViewData.Model.Patient.LastName.First().ToString().ToUpper()@Html.ViewData.Model.LastName.Substring(1).ToLower()">
                        </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <!-- Street 1 -->
                                <label for="street1_id" class="control-label">Street Address 1</label>
                                <input type="text" class="form-control" id="street1_id" name="street1" placeholder="" value="@Html.ViewData.Patient.BillingAddress1">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <!-- Street 2 -->
                                <label for="street2_id" class="control-label">Street Address 2</label>
                                <input style="margin-left: 0px" type="text" class="form-control" id="street2_id" name="street2" placeholder="Apartment, Suite, etc." value="@Html.ViewData.Patient.BillingAddress2">
                            </div>
                        </div>
                    </div>
                    <div class="container-fluid">
                        <div class="col-md-4">
                            <div class="form-group">
                                <!-- City-->
                                <label for="city_id" class="control-label">City</label>
                                <input type="text" class="form-control" id="city_id" name="city" placeholder="" value="@Html.ViewData.Model.BillingCity">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <!-- State Dropdown-->
                                <label for="state_id" class="control-label">State</label>
                                <select class="form-control" id="state_id">
                                    <option value="AL">Alabama</option>
                                    <option value="AK">Alaska</option>
                                    <option value="AZ">Arizona</option>
                                    <option value="AR">Arkansas</option>
                                    <option value="CA">California</option>
                                    <option value="CO">Colorado</option>
                                    <option value="CT">Connecticut</option>
                                    <option value="DE">Delaware</option>
                                    <option value="DC">District Of Columbia</option>
                                    <option value="FL">Florida</option>
                                    <option value="GA">Georgia</option>
                                    <option value="HI">Hawaii</option>
                                    <option value="ID">Idaho</option>
                                    <option value="IL">Illinois</option>
                                    <option value="IN">Indiana</option>
                                    <option value="IA">Iowa</option>
                                    <option value="KS">Kansas</option>
                                    <option value="KY">Kentucky</option>
                                    <option value="LA">Louisiana</option>
                                    <option value="ME">Maine</option>
                                    <option value="MD">Maryland</option>
                                    <option value="MA">Massachusetts</option>
                                    <option value="MI">Michigan</option>
                                    <option value="MN">Minnesota</option>
                                    <option value="MS">Mississippi</option>
                                    <option value="MO">Missouri</option>
                                    <option value="MT">Montana</option>
                                    <option value="NE">Nebraska</option>
                                    <option value="NV">Nevada</option>
                                    <option value="NH">New Hampshire</option>
                                    <option value="NJ">New Jersey</option>
                                    <option value="NM">New Mexico</option>
                                    <option value="NY">New York</option>
                                    <option value="NC">North Carolina</option>
                                    <option value="ND">North Dakota</option>
                                    <option value="OH">Ohio</option>
                                    <option value="OK">Oklahoma</option>
                                    <option value="OR">Oregon</option>
                                    <option value="PA">Pennsylvania</option>
                                    <option value="RI">Rhode Island</option>
                                    <option value="SC">South Carolina</option>
                                    <option value="SD">South Dakota</option>
                                    <option value="TN">Tennessee</option>
                                    <option value="TX">Texas</option>
                                    <option value="UT">Utah</option>
                                    <option value="VT">Vermont</option>
                                    <option value="VA">Virginia</option>
                                    <option value="WA">Washington</option>
                                    <option value="WV">West Virginia</option>
                                    <option value="WI">Wisconsin</option>
                                    <option value="WY">Wyoming</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <!-- Zip Code-->
                                <label for="zip_id" class="control-label">Zip Code</label>
                                <input type="text" class="form-control" id="zip_id" name="zip" placeholder="" value="@Html.ViewData.Model.BillingZip">
                            </div>
                        </div>
                    </div>
                </form>

有没有办法以这种当前格式分配下拉菜单的值/选项?我似乎无法找到以这种方式设置值的方法。给定状态列表,我是否使用 HTML Helper Method 进行下拉?目前,该值始终设置为 Alabama。

【问题讨论】:

  • 为什么你要手动生成所有的 html(这将给你正确的 2 路模型绑定或验证)而不是使用 HtmlHelper 方法(这将正确绑定并且少得多代码)

标签: asp.net-mvc razor


【解决方案1】:

每个 Option 元素都有一个“Selected”属性,例如

<option value="CA" selected="selected">California</option>

你也可以在javascript中设置

document.getElementById("state_id").value = "CA";

我不确定默认值是什么。是否有一个事件(例如更改另一个文本框中的文本)或一个可用的值(例如 CustomerID)来确定应默认哪个 Option 元素?让我知道...

【讨论】:

  • 所以,有一个搜索,比如说,customerID。我们的数据库为每个客户都有一个状态字段,我希望下拉框在加载客户 UI 时具有该状态的值。那么,也许 javascript onLoad 函数可以帮助完成这项任务?
  • 是的,类似于 window.onload = function(){ // 把你的逻辑放在这里,引用模型属性,设置选择值。您可能希望将 State 值(即“CA”)添加到模型中,以便轻松引用
  • 我考虑过将其设为列表,而不是在字段中硬编码选项,但我总是可以动态地将列表添加为带有 HTML 或其他内容的下拉菜单...谢谢您的指导,我需要某种方向。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-04-07
  • 1970-01-01
  • 2019-12-25
  • 1970-01-01
  • 1970-01-01
  • 2012-08-16
相关资源
最近更新 更多