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?

@DhavalMarthak Sorry, I don't understand what you mean. It's just a dictionary with string values as the keys and values. — Toby Caulk
– Toby Caulk, Commented Jun 12, 2015 at 15:58
Can you - Yes. Should you - No. Better to handle the change event of your dropdownlist and use ajax to pass the selected value to a controller method that looks up the value and returns it, then update the DOM. — user3559349
– user3559349, Commented Jun 13, 2015 at 3:02

TSmith · Accepted Answer · 2015-06-12 20:47:37Z

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.

Thiago Custodio · Accepted Answer · 2015-06-12 17:24:37Z

0

try this:

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

answered Jun 12, 2015 at 17:24

Thiago Custodio

18.4k9 gold badges50 silver badges99 bronze badges

3 Comments

Toby Caulk Over a year ago

And then how would I access the key/value pairs?

Thiago Custodio Over a year ago

I could affirm if you had post your model class, but I believe you'll access your key value pair using the code above.

Chris Over a year ago

The dictionary is on the MVC model server side. What you have above will evaluate the @... to the class name and then Jquery will be unable to find anything with that as a selector.

DarkVision · Accepted Answer · 2015-06-12 18:12:16Z

0

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

answered Jun 12, 2015 at 18:12

DarkVision

1,4233 gold badges21 silver badges34 bronze badges

Collectives™ on Stack Overflow

Get an object from a MVC model in JQuery

3 Answers 3

Comments

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Related