Passing list to javascript to pass back to controller

Question

I'm using ASP.NET MVC and my model has a list as part of it. I want to pass that list to a javascript function and inside this function I turn around and want to pass it back to a controller.

Currently I have:

@Html.ActionLink("Edit", "Edit", "Data", new { onclick = string.Format("EditRecord({0});", Model.Types) })

Model.Types is defined as List

My javascript EditRecord is defined as:

function EditRecord(types)
{
   $.post("/Data/Edit/" { myTypes: types });
}

My controller is define as:

[HttpPost]
public ActionResult Edit(string[] myTypes)
{
   return View();
}

When I run this I get page can't be found. If I switch this from the list to just a normal data type like an int or string then it all works, so something with the fact that it's an array is throwing this off. Any ideas?

ramiramilu · Accepted Answer · 2014-05-08 16:20:49Z

Here goes my solution, Lets say you have a model holding List property in following way -

public class MyModel
{
    public List<string> Types { get; set; }
}

This model will be constructed in the following controller action and will be returned to the View -

    public ActionResult Index()
    {
        MyModel model = new MyModel();
        model.Types = new List<string>();
        model.Types.Add("Admin");
        model.Types.Add("User");
        model.Types.Add("SuperAdmin");

        return View(model);
    }

And the View has following Html -

@model Rami.Vemula.Dev.Mvc.Controllers.MyModel

@{
    ViewBag.Title = "Home Page";
}

<div class="row">
    <a href="#" id="ClickMe">Click me</a>
</div>

Now the JQuery part which will hold the logic to send the List to the controller action -

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
    $(document).ready(function () {
        $("#ClickMe").click(function () {
            var o = new Object();
            o.Types = @Html.Raw(Json.Encode(Model.Types));

            jQuery.ajax({
                type: "POST",
                url: "@Url.Action("GetJson")",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(o),
                success: function (data) {
                    alert(data);
                },
                failure: function (errMsg) { alert(errMsg); }
            });
        });
    });
</script>

Then on clicking the button, it will hit the following controller -

    public JsonResult GetJson(List<string> Types)
    {
        return Json(Types, JsonRequestBehavior.AllowGet);
    }

When you click the button, and put a breakpoint to check the values -

enter image description here

RandomBoy · Accepted Answer · 2014-05-08 16:14:56Z

0

By this your controller is returning blank view. Make sure that your view is created (right click-go to view). And if you want to return it it should be something like this:

rerurn View(myTypes);

But make sure that myTypes view is set up to accept string[].

if you want to pass your list to client consider ajax call that will send json object array and adjust your backend to accept it.

answered May 8, 2014 at 16:14

RandomBoy

4641 gold badge4 silver badges15 bronze badges

Collectives™ on Stack Overflow

Passing list to javascript to pass back to controller

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related