2

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?

2
  • @DhavalMarthak Sorry, I don't understand what you mean. It's just a dictionary with string values as the keys and values.
    – Toby Caulk
    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
    Jun 13, 2015 at 3:02

3 Answers 3

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.

0

try this:

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

3
  • And then how would I access the key/value pairs?
    – Toby Caulk
    Jun 12, 2015 at 17:31
  • I could affirm if you had post your model class, but I believe you'll access your key value pair using the code above. Jun 12, 2015 at 17:33
  • 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.
    – Chris
    Jun 12, 2015 at 21:03
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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.