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
– madalinivascu, Commented Dec 20, 2016 at 5:06
Possible duplicate of How to render partial view in MVC5 via ajax call to a controller and return HTML — Muhammed Shevil KP
– Muhammed Shevil KP, Commented Dec 20, 2016 at 5:07

FakeisMe · Accepted Answer · 2016-12-20 05:47:08Z

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, 2016 at 5:47

FakeisMe

4643 silver badges9 bronze badges

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

13 Comments

Sundar Stalin Over a year ago

Still in Controller the GetAllUser is not being hit when debugged thats what the problem i think

FakeisMe Over a year ago

Its working for me. Took ur code made the changes and it hits the controller. ok . wha error u see in the browser console ?

SᴇM Over a year ago

@SundarStalin What is your controller name?

Sundar Stalin Over a year ago

@SeM EmployeeController

SᴇM Over a year ago

in ajax call change url: '@Url.Action("GetAllUser")', this part to - url: '@Url.Action("GetAllUser", "EmployeeController")',

|

Laxman Gite · Accepted Answer · 2016-12-20 06:35:10Z

0

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 !!

answered Dec 20, 2016 at 6:35

Laxman Gite

2,3282 gold badges19 silver badges23 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

13 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related