CODEWITHSUNDEEP
asp.net-mvcperformance
Kamaal Shaik
Kamaal Shaik

Reputation: 77

JQuery-Ajax programming with MVC

I an new to jquery and trying to integrate My MVC Controller with Jquery-Ajax. But is not working properly. Please check with below code.

_ViewStart.cshtml

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

Shared/_Layout.cshtml(body section)

<body>
    @RenderBody()

    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)

    <script src="~/Scripts/AjaxProgramming.js"></script>
</body>

Controllers/AjaxProgrammingController.cs

public class AjaxProgrammingController : Controller
    {
        MVCClassesProjectEntities2 mcpe = new MVCClassesProjectEntities2();

        public ActionResult Home()
        {
            Response.Write("Index action method processed at: " + DateTime.Now.ToString());
            return View();
        }

        public ActionResult GetEmpData(int id)
        {
            Employee empDetails = mcpe.Employees.Find(id);
            return Json(empDetails, JsonRequestBehavior.AllowGet);
        }
    }

Scripts/AjaxProgramming.js

function fn_getEmp()
{
    var Id = $("#txtEmpId").val();

    $.ajax
    ({
        cache: false, 
        url: "/AjaxProgramming/GetEmpData/" + Id, 
        type: "GET", 
        data: "", 
        contentType: "application/json;",
        success: function (response)
        {
            var empList = "EmpName : " + response.EmpName + "<br>";
            empList += "Job : " + response.Job + "<br>";
            empList += "Salary : " + response.Salary + "<br>";
            empList += "DeptNo : " + response.DeptNo + "<br>";
            $("#spnStatus").html(empList);
        }
    });
}

Views/Home.cshtml

Enter Employee number : <input type="text" id="txtEmpId" name="txtEmpId" /><br /><br />
<input type="button" id="btnDetails" name="btnDetails" value="Get Emp Details" onclick="fn_getEmp()"/><br /><br />
<span id="spnStatus"></span>

when i click the button i am not getting the result. Please help me.

Upvotes: 0

Views: 107

Answers (2)

Felix
Felix

Reputation: 10078

The way I am reading the question is that the ajax call never gets to GetEmpData() method. I would say that either /AjaxProgramming/GetEmpData/5 is not routed to the right controller, or the parameter does not match what's in the route, or something similar.

As @Stephen Muecke suggested, first thing is to test your JavaScript portion. Do you see it in F12 tools. If you do - what's the error code. If it's 500, what's the returned XML. If these three questions sound unclear to you - then you are not yet ready to write AJAX queries.

By the way, why are you using $.ajax call, rather than $.get?

Upvotes: 1

Vankayalapati Suresh
Vankayalapati Suresh

Reputation: 1

I'm passing id through data instead of passing url.

Try below ajax code. 

 $.ajax
      ({
          cache: false,
          url: "/AjaxProgramming/GetEmpData/",
          type: "GET",
          data: { id: Id },
          contentType: "application/json;",
          success: function (response) {
          var empList = "EmpName : " + response.EmpName + "<br>";
                        empList += "Job : " + response.Job + "<br>";
                        empList += "Salary : " + response.Salary + "<br>";
                        empList += "DeptNo : " + response.DeptNo + "<br>";
                        $("#spnStatus").html(empList);
          }
       });

Upvotes: 0

Related Questions