locked
how to displaying table data using ajax in mvc? RRS feed

  • Question

  • User1421057020 posted

    I m trying to displaying table data on index page but give an error

    HomeController.cs

        public class HomeController : Controller
        {
            private readonly InsAjaxEntities InsAjaxEntities;
    
            public HomeController()
            {
                InsAjaxEntities = new InsAjaxEntities();
            }
    
            // GET: Home
            public JsonResult Index()
            {
                return Json(InsAjaxEntities.students.ToList(), JsonRequestBehavior.AllowGet);
            }

    Index.cshtml

    @{
        ViewBag.Title = "Index";
    }
    
    <div class="container">
        <h2>List Of Student</h2>
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>
                        StudentID
                    </th>
                    <th>
                        StudentName
                    </th>
                    <th>
                        StudentAddress
                    </th>
                    <th>
                        StudentClass
                    </th>
                    <th>
                        StudentAge
                    </th>
                    <th>
                        StudentImage
                    </th>
                    <th>
                        Gender
                    </th>
                    <th>
                        Stateid
                    </th>
                    <th>
                        Cityid
                    </th>
                    <th>
                        Pincode
                    </th>
                    <th>
                        StudentHobby
                    </th>
                </tr>
            </thead>
            <tbody class="tbody"></tbody>
        </table>
    </div>
    
    @section scripts {
        <script src="~/Scripts/jquery.validate.min.js"></script>
        <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
    
        <script type="text/javascript">
            $(document).ready(function () {
                loadData();
            });
            function loadData() {
                $.ajax({
                    url: "/Home/Index",
                    type: "GET",
                    contentType: "application/json;charset=utf-8",
                    dataType: "json",
                    success: function (result) {
                        var html = '';
                        $.each(result, function (key, item) {
                            html += '<tr>';
                            html += '<td>' + item.studentid + '</td>';
                            html += ' <td>' + item.studentname + '</td>';
                            html += '<td>' + item.studentaddress + '</td>';
                            html += '<td>' + item.studentclass + '</td>';
                            html += '<td>' + item.studentage + '</td>';
                            html += '<td>' + item.studentimage + '</td>';
                            html += '<td>' + item.gender + '</td>';
                            html += '<td>' + item.stateid + '</td>';
                            html += '<td>' + item.cityid + '</td>';
                            html += '<td>' + item.pincode + '</td>';
                            html += '<td>' + item.studenthobby + '</td>';
                            html += '</tr>';
                        });
                        $('.tbody').html(html);
                    },
                    error: function (errormessage) {
                        alert(errormessage.responseText);
                    }
                });
            }
        </script>
    }
    <a href="@Url.Action("Create", "Home")" class="elements"><span>Create</span></a>
    

    I have 2 record in the table I want to display them on index page?

    help?

    Monday, June 22, 2020 6:25 PM

Answers

  • User1686398519 posted

    Hi raju bhai,

    First of all,based on the code you provided,I can display the data after making the following modifications.You can compare my code with your original code.

    • I created the relevant model according your code;
    • I changed the name of "Index" to "Getdata";
    • I added an "Index" action to return to the page.
    • Modify the ajax request url in "loadData()" method to "@Url.Action("Getdata")"

    Secondly, I did not get the same error as you. According to the error message, the object to be serialized has a circular reference, which means that one of its properties points directly or indirectly to its own instance. So I suggest you check if your model has circular references.

    This is the modified code.

    Model

        public class student
        {
            [Key]
            public int studentid { get; set; }
            public string studentname { get; set; }
            public string studentaddress { get; set; }
            public string studentclass { get; set; }
            public string studentage { get; set; }
            public string studentimage { get; set; }
            public string gender { get; set; }
            public int stateid { get; set; }
            public int cityid { get; set; }
            public string pincode { get; set; }
            public string studenthobby { get; set; }
        }

    Controller

            public ActionResult Index()
            {
                return View();
            }
            public JsonResult Getdata()
            {
                return Json(InsAjaxEntities.students.ToList(), JsonRequestBehavior.AllowGet);
            }

    Page

    url: "@Url.Action("Getdata")",

    Here is the result.

     

    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 23, 2020 6:23 AM

All replies

  • User303363814 posted

    The error you have is coming from the server.  Nothing to do with AJAX or client side tables.  (You should be able to test by just putting the /home/index url in your browser)

    Can you show the controller code that selects data?  How do you retrieve 'InsAjaxEntries' and what is the definition of the 'students' property? (If it is a collection of 'things' then also show the definition of 'thing')

    Monday, June 22, 2020 11:15 PM
  • User-474980206 posted

    Your code

    InsAjaxEntities.students.ToList()

    does not serialize. As you don’t show the entity we can not tell what is wrong, but most like you are serializing navigation properties.

    Tuesday, June 23, 2020 12:35 AM
  • User1421057020 posted

    hello bruce

    see this is my entity and table data

    I don't know how to serialize?help

    Tuesday, June 23, 2020 3:15 AM
  • User1686398519 posted

    Hi raju bhai,

    First of all,based on the code you provided,I can display the data after making the following modifications.You can compare my code with your original code.

    • I created the relevant model according your code;
    • I changed the name of "Index" to "Getdata";
    • I added an "Index" action to return to the page.
    • Modify the ajax request url in "loadData()" method to "@Url.Action("Getdata")"

    Secondly, I did not get the same error as you. According to the error message, the object to be serialized has a circular reference, which means that one of its properties points directly or indirectly to its own instance. So I suggest you check if your model has circular references.

    This is the modified code.

    Model

        public class student
        {
            [Key]
            public int studentid { get; set; }
            public string studentname { get; set; }
            public string studentaddress { get; set; }
            public string studentclass { get; set; }
            public string studentage { get; set; }
            public string studentimage { get; set; }
            public string gender { get; set; }
            public int stateid { get; set; }
            public int cityid { get; set; }
            public string pincode { get; set; }
            public string studenthobby { get; set; }
        }

    Controller

            public ActionResult Index()
            {
                return View();
            }
            public JsonResult Getdata()
            {
                return Json(InsAjaxEntities.students.ToList(), JsonRequestBehavior.AllowGet);
            }

    Page

    url: "@Url.Action("Getdata")",

    Here is the result.

     

    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 23, 2020 6:23 AM
  • User1421057020 posted

    hello YihinSun

    when I start working your logic I does not understand because I am confuse what you are trying to say and after some time I understood and logic is understood but one line is remaing your code please verify this line

    Configuration.ProxyCreationEnabled = false;

    in the conext constructor.

    Tuesday, June 23, 2020 4:52 PM
  • User1686398519 posted

    Hi raju bhai,

    I set ProxyCreationEnabled in DbContext, the code is still able to run.

            public Model3(): base("name=Model3")
            {
                this.Configuration.ProxyCreationEnabled = false;
            }

    This error is not because there is no serialized object, but a circular reference to the object during the serialization of the object, so I suggest you check your model before, especially the model named city.

    Best Regards,

    YihuiSun

    Wednesday, June 24, 2020 1:47 AM