How i can assign dictionary(key:value) pair data using formdata to controller action in MVC

Question

this is my UI code in which i have multiple text fileds that i add dynmically from add rows button

<div class="col-md-12">
    <div class="col-md-8" style="float:left;overflow-y: auto;height:260px;">
        <div class="text-right" style="margin-bottom:10px;">
            <input type="button" class="btn btn-primary" value='Add Row' id='addButton' />
            <input type="button" class="btn btn-default" value='Remove Row' id='removeButton'>
        </div>
        <div id='TextBoxesGroup'>
            <div id="TextBoxDiv1">
                <div class="col-md-12">
                    <div class="col-md-6 form-group">
                        <label class="control-label col-md-2">Key</label>
                        <div class="col-md-10">
                            <input type='text' id='key1' class="form-control">
                        </div>
                    </div>
                    <div class="col-md-6 form-group">
                        <label class="control-label col-md-2">Value</label>
                        <div class="col-md-10">
                            <input type="text" id="value1" class="form-control" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4" style="top:40px;">
        PLEASE PASTE DATE HERE:
        <textarea style="width:340px;height:200px;margin-bottom:20px;"></textarea>
    </div>
</div>

I want to bind this values to dictionary using javascript

var specList = [];
for (var i = 1; i < counter; i++) {
    var _key = $("#key" + i).val();
    var _value = $("#value" + i).val();
    specList.push({
        key: _key,
        value: _value
    });
    alert(specList['key']);
}

than i want to append using formData Like this

var formdata = new FormData($('#formAddProduct').get(0));
formdata.append('prodSpecification', JSON.stringify(specList));

than I want to get on controller action

Here is my model code

public Dictionary<string,string> prodSpecification { get; set; }

I am stuck here from almost one month I will be very thankful if some one give me good answer

You cannot `.append()` complex objects to `FormData` - each property name/value needs to be added individually. - `formdata.append('prodSpecification[0].Key', yourKey); formdata.append('prodSpecification[0].Value', yourValue);` etc (and the indexers must start at zero and be consecutive). Why are you doing this instead of using view model and generating your inputs correctly? — , Mar 23 '17 at 10:32
Hi kindly refer this link http://stackoverflow.com/questions/16553561/passing-list-of-keyvaluepair-or-idictionary-to-web-api-controller-from-javascrip it will help you — Vignesh, Mar 23 '17 at 10:44
other data is going well to controller main issue is of dictionary i am also passing images thats why i am using formData. — AbcMvc, Mar 23 '17 at 11:54
@StephenMuecke is this line formdata.append('prodSpecification[0].Key', yourKey); adds all keys or we need a loop to assign all keys — AbcMvc, Mar 23 '17 at 11:56
You need to add one for each item in the dictionary - so you will then also have `formdata.append('prodSpecification[1].Key', anotherKey);` for the 2nd item etc. But abandon all this and generate your view correctly - and for dynamically adding items to a collection - refer [this answer](http://stackoverflow.com/questions/40539321/a-partial-view-passing-a-collection-using-the-html-begincollectionitem-helper/40541892#40541892) — , Mar 23 '17 at 12:00

score 0 · Answer 1 · answered Mar 23 '17 at 10:42

0

I am not sure if you are posting via ajax or via form

but assuming by ajax, then you could do

$.post('@Url.Action("MyAction")', { prodSpecification: specList });

answered Mar 23 '17 at 10:42

Alan Tsai

2,465
1
13
16

How i can assign dictionary(key:value) pair data using formdata to controller action in MVC

1 Answers1