How To access and display the data from database using ajax jquery asp.net mvc

Question

I Am trying to fetch the data from database and display it in the page using ajax and jquery. Am new to this platform so can anyone help me Model:

 public class EmployeeModel
 {
    public int EmpId { get; set; }

    public string EmpName { get; set; }

    public int Age { get; set; }

    public int Salary { get; set; }

 }

Controller :

 private static readonly string connectionString =    ConfigurationManager.ConnectionStrings["ConnStringDb1"].ConnectionString;
    public ActionResult GetUser()
    {
        return View();
    }

    public JsonResult GetAllUser(int EmpId)
    {
        List<EmployeeModel> employee = new List<EmployeeModel>();
        string query = string.Format("Select * From Employee", EmpId);
        SqlConnection connection = new SqlConnection(connectionString);
        {
            using (SqlCommand cmd = new SqlCommand(query, connection))
            {
                connection.Open();
                SqlDataReader reader = cmd.ExecuteReader();

                while (reader.Read())
                {
                    employee.Add(
                        new EmployeeModel
                        {
                            EmpId = int.Parse(reader["EmpId"].ToString()),
                            EmpName = reader.GetValue(0).ToString(),
                            Age = int.Parse(reader["Age"].ToString()),
                            Salary = int.Parse(reader["Salary"].ToString())
                        }
                    );
                }
            }
            return Json(employee, JsonRequestBehavior.AllowGet);
        }
    }

ajax:

      @{
             ViewBag.Title = "Home Page";
             var EmployeeModel =                       (List<second_day.Models.EmployeeModel>)Model;
       }
     <div id="id"></div>
     <div id="firstName"></div>
<div id="lastName"></div>
<p id="getEmployee">Get Employee</p>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $('p#getEmployee').click(function () {
        GetEmployeeUsingAjax();
    });
});

 function GetEmployeeUsingAjax() {
    $.ajax({
        type: 'GET',
        url: '@Url.Action("GetAllUser")',
        data:{"EmpId":EmpId},
        dataType: 'json',
        success: function (data) {
            console.log(data);
            //$('#id').text(emp.employee.Id);
            //$('#firstName').text(emp.employee.FirstName);
            //$('#lastName').text(emp.employee.LastName);
        },
        error: function (emp) {
            alert('error');
        }
    });
}

Here i Need to fetch the data when its success else through error if it doesnt

Am new to this platform can anyone help me

you forgot the javascript man,i hope your editing the question right now — madalinivascu, Dec 20 '16 at 05:06
Possible duplicate of [How to render partial view in MVC5 via ajax call to a controller and return HTML](http://stackoverflow.com/questions/32610270/how-to-render-partial-view-in-mvc5-via-ajax-call-to-a-controller-and-return-html) — Muhammed Shevil KP, Dec 20 '16 at 05:07
so where do u face the problem ? u don't get data ? or not getting list of employess ? + u are passing empid but how does the query get appended with where Empid = @empid — FakeisMe, Dec 20 '16 at 05:26
I dint get the call from json when i debugged it and not retrieving list also — Sundar Stalin, Dec 20 '16 at 05:29
in your ajax call your EmpId is not defined , not declared but u are passing. on the controller the method GetAllUser is not marked with [HttpGet] attribute. — FakeisMe, Dec 20 '16 at 05:40
@SundarStalin - You must check your browser console first for error — Ubiquitous Developers, Dec 20 '16 at 06:19

score 1 · Accepted Answer · answered Dec 20 '16 at 05:47

1

 function GetEmployeeUsingAjax() {
        var EmpId = 2;
        $.ajax({
            type: 'GET',
            url: '@Url.Action("GetAllUser")',
            data: { "EmpId": EmpId },
            dataType: 'json',
            success: function (data) {
                alert(data);
                //$('#id').text(emp.employee.Id);
                //$('#firstName').text(emp.employee.FirstName);
                //$('#lastName').text(emp.employee.LastName);
            },
            error: function (emp) {
                alert('error');
            }
        });
    }

       [HttpGet]
        public JsonResult GetAllUser(int EmpId)
        {
        // your code
       }

 plus string.Format("Select * From Employee where empid = {0} ",EmpId)

answered Dec 20 '16 at 05:47

FakeisMe

464
3
9

Still in Controller the GetAllUser is not being hit when debugged thats what the problem i think – Sundar Stalin Dec 20 '16 at 05:53
Its working for me. Took ur code made the changes and it hits the controller. ok . wha error u see in the browser console ? – FakeisMe Dec 20 '16 at 05:56
@SundarStalin What is your controller name? – SᴇM Dec 20 '16 at 05:56
@SeM EmployeeController – Sundar Stalin Dec 20 '16 at 05:57
1

in ajax call change `url: '@Url.Action("GetAllUser")',` this part to - `url: '@Url.Action("GetAllUser", "EmployeeController")',` – SᴇM Dec 20 '16 at 05:58
the view from where u click is rendered from which controller ? Home ? then pls do what SeM has stated. – FakeisMe Dec 20 '16 at 05:58
It getting hit will check whther rendered and get back to you – Sundar Stalin Dec 20 '16 at 06:27
@FakeisMe How to Loop it and disaply the data – Sundar Stalin Dec 20 '16 at 06:36
if jquery use $.each(data, function(index, item) , javascript use for loop for(int i=0 ; i< data.length ; i++ ) inside ajax success – FakeisMe Dec 20 '16 at 06:46
@FakeisMe I am only getiing ID how – Sundar Stalin Dec 20 '16 at 07:36
function (data) { $.each(data.data, function (i, item) {}); – Sundar Stalin Dec 20 '16 at 07:37
what is data.data ? just data. then Item.Id , item.EmpName etc . Any other question please raise a new question. – FakeisMe Dec 20 '16 at 08:08
what @SeM meant was url: '@Url.Action("GetAllUser", "Employee")' you don't add the 'Controller' word – Jephren Naicker Aug 03 '17 at 21:13

score 0 · Answer 2 · answered Dec 20 '16 at 06:35

Please Check Below code :

var var EmpId = 2;
var abc = {
  "EmpId": EmpId 
};

 $.ajax(
{
url: '/ControllerName/GetAllUser/',
type: "GET",
async: false,
dataType: "json",
contentType: "application/json;",
data: JSON.stringify(abc),
success: function (result) {
alert(data);
}
});

And Action Should Be :

[HttpGet]
public JsonResult GetAllUser(int EmpId)
{

}

Happy !!

How To access and display the data from database using ajax jquery asp.net mvc

2 Answers2

Linked