Geek asks and answers

Pass the dictionary as a parameter to Http.Post in C #

I am trying to pass a dictionary to an action method inside Html.Post

Html.BeginForm("ProcessStage2", "Supplier", new {bookVars = Model.BookVars} , FormMethod.Post, new { name = "frmBook" })

I can pass other properties (int, string, ...) to the model, but not a dictionary. Is there a chance to achieve this? because the dictionary has 29 pairs, which seem to be too many to separate them and pass them separately.

+3
source share
4 answers

No. You cannot pass an object as a parameter. The only way is to store the object in the database and pass only the POST identifier only for that object. You must create a model containing a dictionary.

public int id {get;set;}
public Dictionary<string, int> Dictionary {get;set};

and download it from id from the server side.

+2
source

You can use hidden fields and editor templates. Take an example:

Model:

public class MyViewModel
{
    public IDictionary<string, string> BookVars { get; set; }
}

:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var model = new MyViewModel
        {
            // fill the dictionary with some dummy data
            BookVars = Enumerable
                .Range(1, 5)
                .ToDictionary(x => "key" + x, x => "value" + x)
        };
        return View(model);
    }

    [HttpPost]
    public ActionResult Index(MyViewModel model)
    {
        // the model.BookVars property will be properly bound here
        return View(model);
    }
}

(~/Views/Home/Index.cshtml):

@model MyViewModel

@using (Html.BeginForm())
{
    @Html.EditorFor(x => x.BookVars)
    <button type="submit">OK</button>
}

(~/Views/Home/EditorTemplates/KeyValuePair`2.cshtml):

@model KeyValuePair<string, string>

@Html.Hidden("Key", Model.Key)
@Html.Hidden("Value", Model.Value)

, : KeyValuePair`2.cshtml

, SO- , : KeyValuePair[grave accent]2.cshtml [grave accent] - .

, , , .

+2

(, base64).

+2

, , , json. , .

. :

public class MyViewModel
{
    public IDictionary<string, string> BookVars { get; set; }
}

:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        // mock data
        var model = new MyViewModel
                            {BookVars = new Dictionary<string, string> {{"key1", "value1"}, {"key2", "value2"}}};

        return View(model);
    }

    [HttpPost]
    public ActionResult Index(MyViewModel model)
    {
        // the binded model is avaliable
        return View(model);
    }
}

The view contains a form and includes a custom script to represent ajax. Values ​​can be saved and modified in any way. You can use hidden fields.

@model MyViewModel

<script src="/Scripts/script.js" type="text/javascript"></script>

<script type="text/javascript">
        $(document).ready(function () {
            $('form').frmBookSubmit();
        });
</script>

@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { name = "frmBook" }))
{
    <div class="books">
        @foreach (var item in Model.BookVars)
        {
            <input type="hidden" key="@item.Key" value="@item.Value" />        
        }
    </div>
    <input type="submit" />
}

Script.js, creates a simple jquery plugin to represent ajax using serialization of your json data:

(function ($) {

    $.fn.frmBookSubmit = function () {
        var $this = $(this);
        if ($this != null && $this != 'undefined' && $this.length > 0) {
            $this.submit(function (e) {
                e.preventDefault();

                var myviewmodel = new Object();
                myviewmodel.BookVars = $this.find(".books").booksCollect();
                var data = { model: myviewmodel };
                var jsonString = JSON.stringify(data);

                $.ajax({
                    url: $this.attr("action"),
                    type: 'POST',
                    dataType: 'json',
                    data: jsonString,
                    contentType: 'application/json; charset=utf-8'
                });

            });
        }
    };

    $.fn.booksCollect = function () {
        var books = new Array();
        $(this).find("input").each(function () {
            var k = $(this).attr('key');
            var v = $(this).attr('value');
            var item = {
                Key: k,
                Value: v
            };
            books.push(item);
        });
        return books;
    };

})(jQuery);

If you find this useful, you can also write your own json binder using, for example, the Newtonsoft.Json library.

You are done.

0
source

More articles:


All Articles