Get an object from a MVC model in JQuery

Question

I have a DropDownListFor which holds keys from a Dictionary in a class which my MVC Model holds. When I select an item in that list, I would like to then set the text of a TextArea to that corresponding value in the dictionary. To accomplish this, I am trying to use JQuery.

My Issue

It doesn't seem like I can get my dictionary. To get it, I would have to make a call like this:

var fiConfigValues = $('#IdentifiFIConfiguration.Config.Configuration');

Where IdentifiFIConfiguration is the model in my ASP.NET MVC View, the Config is a class and the Configuration is the dictionary I am trying to reference.

However, it seems that code does not run, and I also don't know how to convert that var into a Dictionary so I can access the key/value pairs.

My Question

In JQuery, (or even in Razor if there is a way!), how can I access my dictionary that is nested within a couple of classes inside my Model so that I can change the value of my TextArea?

Answer 1

You are effectively wanting to do view/model binding on the client side. Usually one could leverage a framework like KnockOut.JS and KnockOut.Mappings to assist with creating the client models and binding to those.

However, if you can't go with that or don't want to mess with it, you can manually do things with JQuery and JS. This may be over kill, but I tend to lean towards more structure and clarity. One solution could be to iterate over your server side model and generate its client side counterpart. Then, set up a change event via Jquery and locate the corresponding client model in a collection based on a selected value. Once found, update the text area with the model's value. Code follows...

View Code (with client script):

    @model SoPOC.Models.IdentifiFIConfigurationViewModel

    @Html.DropDownListFor(model => model.SelectedConfigId,
                            new SelectList(Model.Config.ConfigurationList, "Key", "Key", Model.SelectedConfigId),
                            "Select a Config"
                            )

    <textarea id="configDescription" rows="10"></textarea>

    @section Scripts {
        <script type="text/javascript">
            //array to hold your client side models
            ConfigItemList = []

            //definition method to query your array
            ConfigItemList.GetItem = function (condition) {
                for (i = 0, L = this.length; i < L; i++) {
                    with (this[i]) {
                        if (eval(condition)) { return this[i]; }
                    }
                }
            }

            //Your client side item model
            ConfigItem = function (key, value) {
                var self = this;
                self.Key = key;
                self.Value = value;
            }

            //function to update views with model data
            function UpdateView(configItem) {
                console.log(configItem);
                $("#configDescription").val(configItem.Value);
            }

            //Your C# code to loop over your dictionary and create the client side version
            @if(Model.Config.ConfigurationList.Any())
            {
                foreach(var item in Model.Config.ConfigurationList)
                {
                    //We are mixing C# and JS code here
                    @:ConfigItemList.push(new ConfigItem(@item.Key, '@item.Value'));
                }
            }

            $(function () {
             //bind change event to drop down to update view with model data
                $("#SelectedConfigId").change(function () {
                    UpdateView(ConfigItemList.GetItem("Key === "+  $(this).val()));
                });

                console.log(ConfigItemList.length);
                console.log(ConfigItemList);
            });
        </script>
    }

The important parts are the server side iterations over your Dictionary object generating client side models to store into a client side array. After that, you have all the data in a usable structure you can query for. I left the debug output in to help you troubleshoot if needed.

Answer 2

maybe you could do this

var fiConfigValues = $('@IdentifiFIConfiguration.Config.Configuration');

i think fiConfigValues become a array in javascript not sure not a expert someone might give the right answer.

than you iterate

for(var key in fiConfigValues){
  var value = array[key];
  console.log(value);
}

that just my guessing

Answer 3

try this:

var fiConfigValues = $('@Model.Config.Configuration');