Get information from database with ajax ASP.NET

Question

I'm trying to get some information from a table in my database whenever a select-field changes.

I'm able to do the response and the Ajax jQuery function return success(function)
The problem is i don't know how to return the data from my database using ASP.net MVC.
The response i'm getting from my Ajax call on success is this text:

ProduktWebKort.Models.WarehouseCustomer[]

This is the part of my controller with the function called via Ajax

[HttpPost]
public string OnChange(int id)
{
    return db.Customers.Where(C => C.CustomerID == id).ToString();
}

My Ajax call looks like this:

<script type="text/javascript">
$(function () {
    // Document.ready -> link up remove event handler
    $("#CustomerID").change(function () {
        alert("Hej");
        var option = $('option:selected', this).val();
        $.ajax({
            type: "POST",
            url: '@Url.Action("Index/1", "Session")',
            contentType: "application/json; charset=utf-8",
            data: { id: 1 },
            dataType: "html",
            success: function (success) {
                alert('Success');
                console.log(success);
                for (var i = 0; i < success.length; i++) {
                    $(".form-horizontal").append("<li>" + success[i] + "      </li>");
                    console.log(success);
                }
            },
            error: function (e, text, string) {
                alert(e.message + text + string);
                console.log(e);
            }
        });
    });
});
</script>

I want to return every entry from WarehouseCustomer with the CustomerID of id from my select field.

Generally for responding to AJAX calls in an MVC 5 application, you'd actually use Web API. What is the current function returning, and what did you want it to return? — mason
– mason, Commented Mar 9, 2015 at 13:54
what are you trying to do? Get one customer with particular ID? Or get a list of customers? — teo van kot
– teo van kot, Commented Mar 9, 2015 at 13:59
What are you actually looking for? If you're just looking for suggestions then as @mason said, you should use Web API and return some JSON to bind it with your dropDown, if you've any other issue then update your question. — Mox Shah
– Mox Shah, Commented Mar 9, 2015 at 13:59
It currently returns a string like this: ProduktWebKort.Models.WarehouseCustomer[] I'm trying to return a list of all the WarehouseCustomers with a CustomerID of what is choosen by the select — Søren Fritzbøger
– Søren Fritzbøger, Commented Mar 9, 2015 at 13:59
@SørenFritzbøger You should edit your question to include the results. Information vital to the question such as expected output and actual output is a vital part of the question, and therefore belongs in the question itself instead of the comments. — mason
– mason, Commented Mar 9, 2015 at 14:00

VMAtm · Accepted Answer · 2015-03-09 14:08:36Z

1

The default implementation of the .ToString() method in .NET is returning the type of an object. So the resulting text you've got is exactly what are you dealing with: array of the WarehouseCustomer objects:

The default implementation of the ToString method returns the fully qualified name of the type of the Object, as the following example shows.

To get data from your server you should serialize the data object, either in XML or JSON form (preferred variant) to resolve them on the client side.

The ways you can do it are numerous, so you should just select the one you're comfortable with. I suggest you to see after @mason's answer as it looks like the best way to solve your problem.

answered Mar 9, 2015 at 14:08

VMAtm

28.4k17 gold badges85 silver badges133 bronze badges

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

Comments

mason · Accepted Answer · 2015-03-09 14:14:28Z

1

In an MVC 5 project, you use Web API to respond to AJAX requests. Web API examines the request for what is being requested and what format the client supports. It then serializes to JSON or XML or other formats appropriately. It also follows the MVC architecture closely, and has been merged into the MVC framework as of the upcoming MVC 6.

Install Web API in your project via NuGet. Enable attribute routing.

[RoutePrefix("api/customers")]
public class CustomerController : ApiController
{
    [Route("byid/{id}")]
    public List<Customer> GetCustomers(int id)
    {
        return db.Customers.Where(C=>C.CustomerID==id).ToList();
    }
}

That should return a list of customer objects in the data format requested by the client (by default JSON).

The URL you request should be an HTTP GET request to ~/api/customers/byid/{id}, ex: ~/api/customers/byid/5. I often use the MVC Helper @Url.Content() for mapping to Web API on the client side.

Your success handler should be like this:

success: function (customers) {
            alert('Success');
            console.log(customers);
            for (var i = 0; i < customers.length; i++) {
                $(".form-horizontal").append("<li>" + customers[i].Name + "</li>");
                console.log(success);
            }
        },

edited Mar 9, 2015 at 14:14

answered Mar 9, 2015 at 14:08

mason

32.8k12 gold badges83 silver badges127 bronze badges

4 Comments

teo van kot Over a year ago

just don't understand why use WebAPI, espesially download something if you don't need WebAPI at all for this task?

mason Over a year ago

@teovankot What do you mean "don't need Web API at all for this task"? Web API is the standard way of responding to AJAX requests in an MVC project. It's simple to add and integrates well. Are you sure your answer works? And why did you decorate your action method with HttpPost attribute when it's not modifying data? That should be an HttpGet. And OnChange is not a good way of naming a function that's supposed to return a collection of customer objects.

teo van kot Over a year ago

JSON Hijacking is a reason why i decorate this method with POST. I just don't get what is the difference between WebAPI and Controller method for this case. And if you need to download something when you can not doing why you should? About naming methods it's to author of question.

mason Over a year ago

@teovankot Did you downvote? Care to explain why? Web API does use controllers, perhaps you mean you don't understand the difference between MVC and Web API? They're similar, but Web API is geared towards programmatic server/client interaction while MVC is geared towards returning HTML to the client. They're both part of ASP.NET, and should be used in conjunction.

teo van kot · Accepted Answer · 2015-03-09 15:15:24Z

0

Your problem on both server and client side. If you want to get List of customers on server side you should write your Controller like this:

[HttpPost]
public JsonResult OnChange(int id)
{
    return Json(db.Customers.Where(C => C.CustomerID == id).ToList());
}

On client side you should change your ajax code like this if you want to work with IEnumerable result:

     $.ajax({
        type: "POST",
        url: '@Url.Action("OnChange", "Session")',
        data: { id: 1 },
        dataType: "json",
        success: function (success) {
        alert('Success');
        console.log(success);
        $.each(success, function (i, item) {
           $(".form-horizontal").append("<li>" + item.CustomerID  + "</li>");                                              
           }); 
        },
        error: function (e, text, string) {
            alert(e.message + text + string);
            console.log(e);
        }
    });

I hope your OnChange method is in Session Controller. You can access other properties of your list elements like this (item.CustomerID), as you understand.

edited Mar 9, 2015 at 15:15

answered Mar 9, 2015 at 14:07

teo van kot

12.5k10 gold badges41 silver badges73 bronze badges

11 Comments

Søren Fritzbøger Over a year ago

The code seems to work, but i am having a problem with the Json data. i get a 500 response, and this error is in the response from the console: invalid json primitive: id

teo van kot Over a year ago

actually whoule your $.ajax method is a mess... I add all corrections to answer. So you shold use dataType: 'json' and url should send data to your controller method.

Søren Fritzbøger Over a year ago

Now i'm getting a syntaxerror unexpected token s and i have no idea why i'm getting this And the response is:

"SELECT      [Extent1].[CustomerID] AS [CustomerID],      [Extent1].[Name] AS [Name],      [Extent1].[Customer_CustomerID] AS [Customer_CustomerID]     FROM [dbo].[Customer] AS [Extent1]     WHERE [Extent1].[CustomerID] = @p__linq__0"

Søren Fritzbøger Over a year ago

For some reason ASP.NET just won't allow me to return any kind of database data Uncaught TypeError: Cannot use 'in' operator to search for '64' in System.Collections.Generic.List1[ProduktWebKort.Models.Customer]`

mason Over a year ago

You should probably modify the method signature to return an ActionResult, and add return Json(db.Customers.Where(C => C.CustomerID == id).ToList());, as in this question.

|

Collectives™ on Stack Overflow

Get information from database with ajax ASP.NET

3 Answers 3

Comments

4 Comments

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related