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

Question

I am passing an object(model) in View where I have javascript code written. The object has certain properties that I want to access in javascript in order to create a drop down list from the values of those properties. Here is my object:

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

and

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

Now in the View I have an object of TestObject through ViewData and I want to populate the values present in List<ExteriorInteriorData> in a select list. Basically I want to do something like this:

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));
    } 

So, How do I access the object TestObject present in Viewdata inside of Javascript?

Answer 1

if you are writing JavaScript in same view then you just need to convert your model object in js object using this code.

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

if you want in external file then create an html element and set this model in data- field and get this model in js like this

View

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

JS External file

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

I hope it'll work for you.

Answer 2

except of javascript you can use defualt razor helper for create dropdownlist :

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

repale Value and Text By properties in ExteriorInteriorData

Answer 3

Try this. Use for loop within the tag.

@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>

You can simply get selected item from javasrcipt

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