JQuery-Ajax programming with MVC

Question

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.

What errors are you getting in the browser console? Is the GetEmpData() method being hit. You need to provide some more details — user3559349
– user3559349, Commented Aug 28, 2015 at 5:38
use debugger to check whether the method is being hit , if not then check the RouteConfig in AppStart — J Santosh
– J Santosh, Commented Aug 28, 2015 at 5:48
You should not be writing javascript/jquery if you do't know how to debug it. For Chrome, start here — user3559349
– user3559349, Commented Aug 28, 2015 at 6:21

Felix · Accepted Answer · 2015-08-28 07:03:04Z

1

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?

answered Aug 28, 2015 at 7:03

Felix

10.2k10 gold badges64 silver badges105 bronze badges

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

Comments

Vankayalapati Suresh · Accepted Answer · 2015-08-28 06:43:37Z

0

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);
          }
       });

edited Aug 28, 2015 at 6:43

answered Aug 28, 2015 at 6:27

Vankayalapati Suresh

12 bronze badges

Collectives™ on Stack Overflow

JQuery-Ajax programming with MVC

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related