title: value not coming from razor ajax to action method
body: <p>Id in the action method is always null. lost where i am doing anything wrong. action method is called as expected.</p>
  
  <p>jQuery function:</p>
  
  <pre><code>function success(result) {
      var Id = $('#UserId').val();
      var data = JSON.stringify({ 'Id': Id });
      alert(data);
      $.ajax({
          type: "GET",
          url: "@Url.Action("ListAppointments", "Appointment")",
          data: data,
  
          success: function (result2) {
              $("#partialViewAppointments").html(result2);
              $('#example').DataTable();
  
          }
      });
  }
  </code></pre>
  
  <p>Action Method: </p>
  
  <pre><code>public PartialViewResult ListAppointments(string Id)
  {
      var userId = Convert.ToInt32(Id);
      var o = (from s in db.tblAppointments.ToList()
               where s.UserId == userId
               select new AppointmentViewModel { AppointmentInstructorName = s.InstructorName, AppointmentLessonAddress = s.Address, LessonDateTime = s.LessonDate, UserId = s.UserId, Id = s.ID });
  
      return PartialView(o);
  }
  </code></pre>