ASP.NET MVC – Pass dictionary data from view to controller

I want to introduce you simple approach how to pass the dictionary data to controller.
I think it’s useful post for ASP.NET MVC developers.

So let’s think we have some name – value pairs on the client. For example collection of textbox values and titles from them.
Let’s start. I’ll add sample markup. I’ve added collection of textboxes with titles.

Below the markup and script code:

<table id="StepsTable">
    <tr>
        <td>Step 1</td>
        <td>@Html.TextBox("step1")</td>
    </tr>
    <tr>
        <td>Step 2</td>
        <td>@Html.TextBox("step2")</td>
    </tr>
    <tr>
        <td>Step 3</td>
        <td>@Html.TextBox("step3")</td>
    </tr>
</table>
<input id="SendToControllerButton" type="button" value="Send to the server"/>
    <script>
        $(document).ready(function () {

            $("#SendToControllerButton").click(function () {

                var data = {};

                //Collects the data from textboxes and adds it to the dictionary
                $("#StepsTable tr").each(function (index, item) {
                    var tds = $(this).find("td");
                    var textBoxTitle = $(tds).eq(0).text();
                    var textboxValue = $(tds).eq(1).find("input").val();
                    data["stepsDictionary[" + index + "].Key"] = textBoxTitle;
                    data["stepsDictionary[" + index + "].Value"] = textboxValue;
                });

                //Makes ajax call to controller 
                $.ajax({
                    type: "POST",
                    data: data,
                    url: "/Home/ProcessStepsValues",
                    success: function (message) {
                        alert(message);
                    }
                });

            });

        });
    </script>

The code is simple. It constructs dictionary item from title which is just text in column and textbox value.
And then sends the data to controller.Below controller method. It’s just takes our key-value collection.

 [HttpPost]
        public string ProcessStepsValues(Dictionary<string, string> stepsDictionary)
        {
            string resultMessage = string.Empty;
            if (stepsDictionary != null)
            {
                resultMessage = "Dictionary data passes to controller successfully!";
            }
            else
            {
                resultMessage = "Something goes wrong, dictionary is NULL!";
            }
            return resultMessage;
        }

Here if dictionary not null we return the message which appears in alert.
Notice that name of the parameter in controller method is the same as dictionary name on the client.
On the picture below you can see that all data collects and from response we get success message.
Also you can notice how looks the form data which we pass to controller.

1

Hope this post will help you!
Thanks!

Advertisements

One thought on “ASP.NET MVC – Pass dictionary data from view to controller

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s