CODEWITHSUNDEEP
c#asp.net-mvc
user441521
user441521

Reputation: 6998

Passing list to javascript to pass back to controller

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?

Upvotes: 1

Views: 3566

Answers (2)

ramiramilu
ramiramilu

Reputation: 17182

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

Upvotes: 1

RandomBoy
RandomBoy

Reputation: 464

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.

Upvotes: 0

Related Questions