ASP.NET MVC get list from controller with ajax

Question

I search solution for my problem in search engine and stackoverflow.I find a lot of answer but nothing of them didn't help to me. Here is my controller:

[HttpGet]
    public JsonResult Get()
    {
        var cl = new List<Category>();
        cl.Add(new Category()
            {
                Name = "C#"
            });
        cl.Add(new Category()
            {
               Name = "MVC"
            });
        return Json(cl.ToList(),JsonRequestBehavior.AllowGet);
    }

and category class is below:

 public class Category
{
    public string Name { get; set; }

}

In my view,I want to list each item in the data.

<script type="text/javascript">
    $(document).ready(function() {
        $.ajax({
            type: "GET",
            url: '@Url.Action("Get","Category")',
            contentType: "application/json;charset=utf-8",
            data: { a: "testing" },
            dataType: "json",
            success: function(data) {
                //<ul>
                     //<li>C#</li>
//<li>MVC</li>
            },
            error: function () { alert('error....'); }
        });
    });

</script>

How can I do it?

And the problem is...? Any errors? What happend if you debug? One thing I do see here is that your are passing a parameter {a:"testing"} and your Get() action don't have one. — Romias
– Romias, Commented Nov 23, 2013 at 13:18
Don't any error.In my view code ,Succes:function(data) {//} here data return list.I'd like display this list as <ul><li></li></ul> — Zamir
– Zamir, Commented Nov 23, 2013 at 13:34
In practice developer need special js libraries to establish such situation, for example kendoi ui: youtube.com/watch?v=PkeBZkqVcrs. Second you must use js for doing it. — Elvin Mammadov
– Elvin Mammadov, Commented Nov 23, 2013 at 14:21

hutchonoid · Accepted Answer · 2013-11-23 16:08:21Z

3

You could use the shorter getJSON like this:

var getUrl = '@Url.Action("Get")';
var resultDiv = $('#result');
$.getJSON(getUrl,  data: { a: "testing"},  function (data) {
                                resultDev.append('<ul>')
                                      $.each(data, function (index, item) {
                             resultDiv.append($('<li/>', { text: item.name }));
                                 });
                             });

Without seeing your markup I have made the assumption of outputting to a div just for demonstration purposes.

edited Nov 23, 2013 at 16:08

answered Nov 23, 2013 at 13:30

hutchonoid

33.4k15 gold badges102 silver badges106 bronze badges

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

1 Comment

hutchonoid Over a year ago

Sorry, didn't see parameters. I've added them to solution. I'm on an iPhone & can't run it. Let me know if still no good & I will delete answer.

Zamir · Accepted Answer · 2013-11-23 14:23:07Z

2

Thanks @hutchonoid. because of you I find solution.I am using your code and update my code:

$(document).ready(function() {
                    $.ajax({
            type: "GET",
            url: '@Url.Action("Get","Category")',
            contentType: "application/json;charset=utf-8",
            data: { a: "testing" },
            dataType: "json",
            success: function (data) {
               $.each(data, function(index,item) {
                   $("#cat").append('<li>'+item.Name+'</li>');
                });
            },
            error: function () { alert('error....'); }
        });

Others are the same.

answered Nov 23, 2013 at 14:23

Zamir

4411 gold badge8 silver badges18 bronze badges

Comments

İbrahim Ayağıbüyük · Accepted Answer · 2018-03-23 14:01:51Z

0

     public JsonResult Get(int userId)
    {
        using (Entities context = new Entities())
        {
            var appNo = context.UserApp.Where(p => p.UserId == userId && p.Status > 0).ToList();
            var builder = new StringBuilder();
            appNo.ForEach(p =>
            {
                builder.AppendFormat("<li><a href='https://demos.url.com>{0}</a></li>", p.Id);
            });
            return Json(builder.ToString(), JsonRequestBehavior.AllowGet);
        }
    }
<script>
$(document).ready(function () {
    $("#dropDownListUser").change(function () {
        var val = $(this).val();
        $.ajax({
            url: '@Url.Action("Get", "User", new {Area = "AREANAME"})',
            data: { 'userId': val },
            type: 'GET',
            success: function (data) {
                $('#ulid').html(data);
            }
        });
    });
});</script>

<ul id="ulid"></ul>

answered Mar 23, 2018 at 14:01

İbrahim Ayağıbüyük

111 bronze badge

1 Comment

Sterling Archer Over a year ago

Please explain why this answers the question, don't just dump out code

Collectives™ on Stack Overflow

ASP.NET MVC get list from controller with ajax

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related