How to parse JsonResult object from controller in MVC?

Question

I am trying to learn asp.net. I am making a demo website in which there would be an admin panel. The admin would update the Daily Messages which will get reflected in the main homepage. I am using MVC. I have created the table in database as

create table DailyMsg(Sno int primary key, msg varchar(max));

This is my controller

public class DailyMsgsController : Controller
    {
        private amenEntities db = new amenEntities();

        // GET: DailyMsgs
        public ActionResult Index()
        {
            return Json(db.DailyMsgs.ToList(),JsonRequestBehavior.AllowGet);
        }
}

On running the following URL, I am successfully able to see the data in JSON format.

https://localhost:44329/DailyMsgs

[{"Sno":1,"msg":"Hi!"}]

Now, I am stuck. I know that I would have to add another class for Data Access Layer, but I am confused as how should I parse this data and print it to the main HTML page.

From my research on the internet, I have found out that I might have to use JQuery. So, I wrote the following(with what I could understand from the internet as I am not familiar with JQuery) -

$.ajax({
    url: "/DailyMsgs/Index",
    type: "GET",
    success: function (data) {
        $("#div1").html(data);    
    }
});

This, of course, is not working and I can't see anything on my webpage.

My Homepage.html

<body>
    <div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
</body>
</html>
<script src="../Scripts/jquery-1.8.0.min.js"></script>
<script src="../Scripts/bootstrap.min.js"></script>
<link href="../Content/bootstrap.css" rel="stylesheet" />
<script src="../JQuery/DailyMsgsJQ.js"></script>

All I want is to read and parse msg from JSON and display it on webpage.

Could you guide me as how should I proceed or is there any other way to achieve the purpose? Thanks a lot!

I would start by opening a devtools in a browser and take a look at possible errors in the console and/or network tab. I am not very familiar with JQuery ajax, but I suspect the url is not right; I would try to either remove the leading slash (url: "DailyMsgs/Index") or using the full url. — HynekS
– HynekS, Commented Jan 8, 2022 at 11:29
agree, check the request in the network tab because if it worked you would have at least the json-text get appended — john Smith
– john Smith, Commented Jan 8, 2022 at 11:42
@HynekS I am getting Failed to load resource: the server responded with a 404() :44374/favicon.ico:1 — Anonymous
– Anonymous, Commented Jan 8, 2022 at 11:42
The favicon error just means you have no favicon (it's not related). Do you see the request for DailyMsgs/Index in the network tab? What about the console? Are there any errors? — HynekS
– HynekS, Commented Jan 8, 2022 at 11:50
No, the console doesn't show any other error. However, there isn't anything in the network tab. I guess, it isn't hitting the url. — Anonymous
– Anonymous, Commented Jan 8, 2022 at 11:57

Mostafa Sabeghi · Accepted Answer · 2022-01-08 12:26:11Z

2

Try this

$.ajax({
    url: "/DailyMsgs/Index",
    type: "GET",
    success: function (data) {
        $.each(data, function (index, element) {
            $("#div1").append(element.msg);    
        });
    }
});

If you still have error please get console.log(data); and send for me.

answered Jan 8, 2022 at 12:26

Mostafa Sabeghi

4824 silver badges11 bronze badges

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

3 Comments

Anonymous Over a year ago

Thanks, it worked. I had a question. It updates the data very slow. Its like i have to wait for 3 seconds then it shows 'Hi'. Is there anyway I can make it load fast? Thanks a lot for your help!

Mostafa Sabeghi Over a year ago

Load of the page depend to many item, there is nothing special that takes 3 seconds to load .

Mostafa Sabeghi Over a year ago

Use $("#div1").html(element.msg); if you have one message to show.

Marie Lena Brosch · Accepted Answer · 2022-01-08 12:18:57Z

1

Your <script> tags are outside your <html> tag. That means the scripts are probably not even executed, or not loaded in the correct order. You want jQuery and Bootstrap to be loaded first, so put them in the <head>. Put your custom script just before the closing </body>, so it is loaded last.

answered Jan 8, 2022 at 12:18

Marie Lena Brosch

311 bronze badge

Collectives™ on Stack Overflow

How to parse JsonResult object from controller in MVC?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related