Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise

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

share|improve this question
up vote 1 down vote accepted

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; }
}
share|improve this answer
    
This looks like this in the console: $(document.ready(function () { var parks = [{"parkID":1,"parkName":"Central"},{"parkID":2,"parkName":"East"},{"parkID":3,"p‌​arkName":"West"}]; slotAvailability(parks); })); which looks better but i get this as an error: Uncaught TypeError: undefined is not a function – mdixon18 Mar 14 '15 at 20:35
1  
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. – Darin Dimitrov Mar 14 '15 at 20:36
    
haha oh yeah lol, thank you! Love the new setup too thanks very much! – mdixon18 Mar 14 '15 at 20:41
    
Also the class ParkViewModel I can put that in the same file as NewBooking? – mdixon18 Mar 14 '15 at 20:42
    
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. – Darin Dimitrov Mar 14 '15 at 20:43

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.