使用 html <select> 标签绑定 Mvc 模型

Question

我有一个下拉列表，这个列表使用ajax调用

绑定值

<script type="text/javascript">
function getCityName(data) {
    $('#ddlCity').empty();
    if (data != 0) {
        $.ajax({
            type: "POST",
            url: "/Home/GetCityList",
            data: { 'CityId': data },
            cache: false,
            //contentType: "application/json",
            datatype: "JSON",
            success: function (result) {
                var cityData = result.Data;
                var defaultV = new Option("--Select--", 0, true);
                $('#ddlCity').append(defaultV);
                for (var i = 0; i < cityData.length; i++) {
                    var opt = new Option(cityData[i].CityName, cityData[i].Id);
                    $('#ddlCity').append(opt);
                }
            }
        });
    }
    else {
        alert('Select State');
    }
}

<div>@Html.LabelFor(c => c.CityId)</div>
<div><select id="ddlCity"></select></div>

听说我想在模型类中绑定模型道具 CityId 如何绑定它...

Answer 1

元素需要一个 name 属性来匹配模型属性。 在 select 标签的 name 属性中添加 CityId：

<div><select id="ddlCity" name = "CityId"></select></div>

Answer 2

<select> 标签需要添加 MVC Name 属性， @Html.NameFor(x=>x.Entity Property) 和模型中的名称属性绑定值。 html代码如下：

<div><select id="ddlCity" name="@Html.NameFor(c=>c.CityId)"></select></div>

感谢您回答这个话题。

Answer 3

下面是例子-

<div class="col-sm-6">
                <div class="form-group formMain required">
                    <label asp-for="CountryId" class="col-sm-4 control-label mandatory"></label>
                    <div class="col-sm-8">
                        <select asp-for="CountryId" asp-items="Model.CountryList"></select> 
                        <span asp-validation-for="CountryId" class="text-danger"></span>
                    </div>
               </div>
            </div>

“CountryList”是从 ViewModel 属性传递的，“CountryId”是用于在数据库表中保存值的字段。

Answer 4

如果您确定要使用 JavaScript 填充此下拉列表，则需要将模型值传递给 JavaScript 并测试它是否被选中。

所以是这样的：

var cityId = @Model.CityId;

// ...

        var defaultSelected = cityId == 0;
        var defaultV = new Option("--Select--", 0, defaultSelected);

        // ...

        for (var i = 0; i < cityData.length; i++) {             
            var thisCitySelected = cityData[i].Id == cityId;
            var opt = new Option(cityData[i].CityName, cityData[i].Id, thisCitySelected);
            $('#ddlCity').append(opt);
        }

除此之外，如果您希望绑定在合并包含表单时起作用，您必须为输入元素命名：

<div><select id="ddlCity" name="ddlCity"></select></div>

Answer 5

我会这样做：

我会忘记您尝试使用的 ajax 并使用 @Ajax.BeginForm 和 @Html.DropDownListFor。

我假设您正在尝试链接选择列表，用户选择一个州并填充该州的城市。

首先你需要你的模型，一个用于主视图，一个用于我们需要的局部视图：

主视图模型：

List<CityData> CityDatas;
Int SelectedCity;
List<StateData> StateDatas;
Int SelectedState;

部分视图模型：

List<CityData> CityDatas;
Int SelectedCity;

接下来，您需要将模型中的数据绑定到视图中（我假设状态数据在您第一次加载主视图时存在）：

@Ajax.BeginForm("GetCityList", New AjaxOptions() { UpdateTargetId = "CityData", InsertionMode = InsertionMode.Replace, HttpMethod = "Get" })
{
    @Html.DropDownListFor(x => x.SelectedState, new SelectList(Model.StateDatas, "StateId", "State"), new { @class = "form-control", id = "ddlState", onchange = "$(this.form).submit();" })
}
<div id="CityData">
    @Html.Partial("_CityDataPartialView", new PartialViewModel( CityDatas = Model.CityDatas, SelectedCity = Model.SelectedCity))
</div>

注意我是如何在局部视图中获得城市下拉列表的，这样我们就可以使用 Ajax 更新下拉列表，控制器中的 ActionResult 返回带有 List<CityData> 和 Int 的局部视图因为它的模型：

Public ActionResult GetCityList(int SelectedState) {
    //Get the data for the cities and put it in the model, which is a list of CityData
    List<CityDatas> Data = Context.From.Database.Or.Wherever.Using.SelectedState;
    Int selected = 0; // Here you can pre-select a city if you want
    return ParitalView("_CityDataPartialView", new PartialViewModel( CityDatas = Data, SelectedCity = selected));
}

然后不要忘记创建以List<CityData> 和Int 作为模型的“_CityDataPartialView”部分视图：

@model PartialViewModel
@Html.DropDownListFor(x => x.SelectedCity, new SelectList(Model.CityDatas, "Id", "CityName"), new { @class = "form-control", id = "ddlCity" })

现在，当您选择一个州时，它将执行 Ajax 调用以获取城市并更新包含城市下拉列表的局部视图，并且所有内容都将绑定到模型 => states、selected state、cities、selected城市。

当您第一次加载主视图的模型时，请记住发送new List<CityData>()for CityDatas，否则它会给您一个错误。

另外，您需要在您的网络配置中将 UnobtrusiveJavaScriptEnabled 设置为 true：

<appSettings>
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>

...并且还引用了jquery.unobtrusive-ajax.js...或者@Ajax 的东西都不起作用。

这尚未经过测试，但可能稍作调整即可使用。