Question

我正在View中传递一个对象（模型），我在其中编写了javascript代码。该对象具有某些属性，我想在javascript中访问这些属性，以便根据这些属性的值创建下拉列表。这是我的目标：

public class TestObject
{
    public BuildData ExteriorColor { get; set; }
    public BuildData InteriorColor { get; set; }
 }

和

public class BuildData
{
    public List<ExteriorInteriorData> Data { get; set; }
    public bool isInstalled { get; set; }
    public BuildData()
    {
        Data = new List<ExteriorInteriorData>();
    }
}

现在在视图中我有一个TestObject到ViewData的对象，我想在选择列表中填充List<ExteriorInteriorData>中的值。基本上我想做这样的事情：

for (var i = 0; i < data.ExteriorColor.Data.length; i++) {
            $("#Exterior_Color").append($("<option " + (i == 0 ? "selected" : "") + "></option>").val(data.ExteriorColor.Data[i].ColorName + ", " + data.ExteriorColor.Data[i].RgbValue).html(data.ExteriorColor.Data[i].ColorName));
    }

那么，如何访问Javascript中TestObject内的对象Viewdata？

Answer 1

如果您在同一视图中编写JavaScript，则只需使用此代码在js对象中转换模型对象。

var jsModel = @Html.Raw(Json.Encode(Model))

如果你想要在外部文件中然后创建一个html元素并在数据字段中设置这个模型并在这样的js中得到这个模型

查看

<div data-JsObject="@Html.Raw(Json.Encode(Model))" id="JSOBJ"> </div>

JS外部文件

var list = JSON.parse($("#JSOBJ").data("JsObject"))

我希望它对你有用。

Answer 2

除了javascript，你可以使用defualt razor helper for create dropdownlist：

@Html.DropDownListFor(model => model.ExteriorColor.Data, new SelectList(Model.ExteriorColor.Data, "Value", "Text"))

在ExteriorInteriorData中修复Value和Text By属性

Answer 3

试试这个。在标签内使用for循环。

@model [yourproject].Models.TestObject
<select id="Exterior_Color" name="Exterior_Color">
    @foreach (var item in this.Model.ExteriorColor)
    {
        <option value="@item.RgbValue">@item.ColorName</option>
    }
</select>

您只需从javasrcipt

中获取所选项目即可

$("#Exterior_Color").val();

如何在javascript中访问对象属性？

3 个答案: