Question posted in
You can find the official documentation here.

how to display the data in mvc? – Jquery ajax

I am working with entity framework but issue is statename,cityname and image not displaying the index page

see output:

enter image description here

I want to print the statename,cityname and image on the index page?

enter image description here

HomeController.cs

    public class HomeController : Controller
    {
        private readonly InsAjaxEntities InsAjaxEntities;

        public HomeController()
        {
            InsAjaxEntities = new InsAjaxEntities();
        }

        public ActionResult Index()
        {
            return View();
        }
        public JsonResult Getdata()
        {
            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: "@Url.Action("Getdata")",
                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>';  //here I want to displaing the image
                        html += '<td>' + item.gender + '</td>'; 
                        html += '<td>' + item.stateid + '</td>';  //here I want to print the statename
                        html += '<td>' + item.cityid + '</td>';   //here I want to print the cityname
                        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>

how to print the statename and cityname and displaying the image on index page?

now store the stateid and city id in the table but how to print statename and cityname?

help?

Tags:

2

Answers


  1. 0

    You need to return a view model that joins student, state and city tables instead of InsAjaxEntities.students

    Have a look at this article: https://entityframework.net/joining

    Login or Signup to reply.
  2. 0

    Use Below code sample to achieve your goal and below points mention how you will use this code sample.

    var users = (from stu in DbContextName.StudentTableName 
                                        Join sta in DbContextName.StateTable on stu.stateid equals sta.stateid 
                                        Join cit in DbContextName.CityTable on sta.cityid equals sta.cityid                             
                             select new {
                                 stu.studentColumn1, stu.studentColumn2, stu.studentColumn3, stu.studentColumn4, stu.studentColumn5,
                                 sta.stateColumn1, sta.stateColumn2,
                                 cit.cit.citycolumn1, cit.citycolumn1
                             }).ToList();

    Use this code sample to get the data with above mention tables in context. As of now i just put the sample column name and table name use your actual column name and table name.
    Then create a ViewModel which contain all the fields which is return in above Var.
    Then Pass this ViewModel on View and bind.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search