ASP MVC send an Array object to a JavaScript function

Question

I am using ASP MVC for my university coursework. However I have encountered a problem, before I was sending too many AJAX requests which was causing my page to take way too long to load. Therefore I thought I could improve the situation by sending the arrays from the database to the view and then put them into my jquery function inline.

So here is how it looks I have my simple model:

public class NewBooking
    {
        public IEnumerable<dynamic> parks { get; set; }
    }

Then in my controller I set the parks with information from the database as you can see here:

public ActionResult Index()
        {
            var model = new NewBooking();

            var parks = Database.Open("SQLServerConnectionString").Query("SELECT * FROM Park");

            var output = from o in parks
                         select new { parkID = o.parkID, parkName = o.parkName };
            model.parks = output.ToList();

            return View(model);
        }

Now, this returns to the view all the information I am expecting, as you can see below if I simply called the model parks in the view:

@model build_01.Models.Timetabler.NewBooking
@{
    @Model.parks
}

I know this method wouldn't however with a for loop it works fine, now to my issue; I'm trying to call a JavaScript function and pass this array to it.

$(document.ready(function () {
        slotAvailability(@Model.parks);
    }));

Is there something I can do to this @Model.parks to be able to send it to the function? Kind of like how I would do JSON if I was using AJAX.

As it stands trying to call it like this gives me this error in my console:

Uncaught SyntaxError: Unexpected number

I can see why, if I was to inspect element I can see that the function parse looks like this:

slotAvailability(System.Collections.Generic.List`1[&lt;&gt;f__AnonymousType3`2[System.Object,System.Object]]);

Thanks

Darin Dimitrov · Accepted Answer · 2015-03-14 20:32:32Z

2

You should use the Json.Encode function. Also make sure tha you close your parenthesis at the proper place, after document:

$(document).ready(function () {
    var parks = @Html.Raw(Json.Encode(Model.parks));
    slotAvailability(parks);
});

Also using dynamic seems like a bad design here. You don't get any Intellisense. You'd rather have a view model:

public class ParkViewModel
{
    public int ParkId { get; set; }
    public int ParkName { get; set; }
}

and then your NewBooking model:

public class NewBooking
{
    public IEnumerable<ParkViewModel> Parks { get; set; }
}

answered Mar 14, 2015 at 20:32

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

mdixon18 Over a year ago

This looks like this in the console: $(document.ready(function () { var parks = [{"parkID":1,"parkName":"Central"},{"parkID":2,"parkName":"East"},{"parkID":3,"parkName":"West"}]; slotAvailability(parks); })); which looks better but i get this as an error: Uncaught TypeError: undefined is not a function

Darin Dimitrov Over a year ago

Yes, that's because you have invalid javascript. You should close your parenthesis after document. See my updated answer. Basically you should have $(document) and then invoke the ready function on the result of it.

mdixon18 Over a year ago

haha oh yeah lol, thank you! Love the new setup too thanks very much!

mdixon18 Over a year ago

Also the class ParkViewModel I can put that in the same file as NewBooking?

Darin Dimitrov Over a year ago

Standard C# convention dictates that each class goes into a separate file with the same name as the class. So you would rather have a ParkViewModel.cs containing this view model.

|

Collectives™ on Stack Overflow

ASP MVC send an Array object to a JavaScript function

1 Answer 1

10 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Related