Question posted in
You can find the official documentation here.

Jquery ajax – How to pass Id to Jquery statement – ASP.NET MVC

I’m trying to pass the EmployeeId of the row I click to the jQuery statement, but I get null everytime.
I would appreciate to know what am I doing wrong.

Checkout my below Code :

Index.cshtml

@using (Html.BeginForm("Index", "Employee", FormMethod.Post, new { @id = "myForm" }))
{

    <table class="table">
        -- headers
      

        @foreach (var item in Model)
        {


            <tr>


                <td> <button class="btn btn-success" id="BtnId" onclick="Update(@item.EmployeeId)"><i class="fa fa-toggle-on"></i></button> </td>
                <td>
                    @Html.DisplayFor(modelItem => item.EmployeeId)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.DepartmentId)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Address)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.IsDeleted)
                </td>
               
            </tr>

      
        }
 </table>
}

    <script>
       $(document).ready(function () {
           var Update = function (EmployeeId) {
    
             
    
                $("#BtnId").on('click', function () {
                    var myformdata = $("#myForm").serialize();
                   
                    $.ajax({
                        type: "POST",
                        url: "Employee/Index?EmployeeId="+EmployeeId,
                        data:myformdata,
                        success: function () {
    
                        }
                    });
    
                   
                });
            }
        });
    </script>

Employee Controller

public class EmployeeController : Controller
{
    EmployeeModule EM = new EmployeeModule();

    public ActionResult Index()
    {
        return View(EM.List());
    }

   
     [HttpPost]
    public ActionResult Index(int id)
    {
       
      

        bool a = EM.ExecuteSP(id);

        return View(EM.List());

    }

}

Given an ID,the ExecuteSP method sets the column IsDelete to 2 . But as I said I just get a null ID everytime.

Tags:

2

Answers


  1. 0

    In controller, You are expecting id name, So you need rename from EmployeeId to id like below.

     $(document).ready(function () {
           var Update = function (EmployeeId) {
                    $.ajax({
                        type: "POST",
                        url: "Employee/Index",
                        data: {id: EmployeeId},
                        success: function () {

                        }
                    });
            }
        });
    Login or Signup to reply.
  2. 0

    The ID attribute in each page should be unique, hence using #BtnId is incorrect because ID is repeating. Add BtnId to the class attribute and add EmployeeId to data-id attribute instead. See the code below.

    @foreach (var item in Model)
{
   <tr>
      <td>
         <button class="btn btn-success BtnId" data-id="@item.EmployeeId"><i class="fa fa-toggle-on"></i></button>
       </td>
       <td>
          @Html.DisplayFor(modelItem => item.IsDeleted)
       </td>
   </tr>
}

    Then in your script, it’s better to bind the event to the button; Use $(this).data("id") and assign it to the variable EmployeeId which we will use in ajax.

     $(document).ready(function () {

   var EmployeeId = $(this).data("id");

   $(document).click(".BtnId",function(){
      $.ajax({
         type: "POST",
         url: "Employee/Index",
         data: {id: EmployeeId},
         success: function () {

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

Back To Top
Search