asp.net MVC5 Pop up creation

Question

this is the ajax function that I use to show the details but not working:

$("#button1").click(function () {
            debugger;
            var $buttonClicked = $(this);
            var id = $buttonClicked.attr('data-id');
            var options = { "backdrop": "static", keyboard: true };
            $.ajax({
                type: 'GET',
                url: '/Employee/PopDetails',
                contentType: 'application/html; charset=utf-8',
                data: { 'EmpId': id },
                datatype: 'html',
                success: function (data) {
                    debugger;
                    $('#myModalContent').html(data);
                    $('#myModal').modal(options);
                    $('#myModal').modal('show');

                },
                error: function () {
                    alert("Dynamic content load failed.");
                }
            });
        });

        $("#closbtn").click(function () {
            $('#myModal').modal('hide');
        });
     });

controller function:

   ` public PartialViewResult PopDetails(int? id)
        {
            Employee employee = db.Employees.Find(id);

            return PartialView(employee);
        }`

I am new to ASP.NET and Visual studio. I am creating an MVC web application using visual studio 2013 for maintaining employee database. It works fine without using ajax calls. But i want to show the employee details as a pop up when we click on the details link instead of navigating to the next page. I am able to create a blank popup but not what I need. Please tell me how to view the selected employee's details as a popup using ajax functions.

Answer 1

When you want to call an ajax, you just need to define a backend method with datatype JSON. At your controller:

      //Get your employees by Id
            public JsonResult GetEmployees(int employeesId)
            {
                using (var employeeDal = new employeeDal ())
                {
                    var employees =employeeDal .GetEmployeesById(employeesId);
                    return this.Json(employees, JsonRequestBehavior.AllowGet);
                }
            } 

You can return anything maybe a list of employees, any DTOs you want based on your requirement. At your view, you need to call this controller with ajax:

 <script type="text/javascript">
        $(function () {
            $('#GetEmployees').click(function() {
                $.getJSON("/Employees/GetEmployees", { UserId: $("#YourEmployeeId").val()}, function (data) 
         {
          //Do something with returned data
         }
        });
</script>

I'm sorry if something is wrong in formatting my answer, it's the first time I try to answer at stackoverflow.

Answer 2

Create a Modal popup in your main view and inside that keep your partial view , which is basically to bind data for employee details just like bellow.

For example, you created a partial view called _EmployeeDetails.cshtml and your code will be like this,

<div class="modal fade" id="myModal" role="dialog" tabindex="-1">
 <div class="modal-dialog">
  <div class="modal-header">Details Info</div>
   <div class="modal-body">
       @Html.Partial("_EmployeeDetails", new Employee())
   </div>
 </div>
</div>

Keep your Razor code inside your _EmployeeDetails partial view. And don't forget to reference your employee model inside your partial view like bellow.

@model Your_Project_Name.ModalFolderName.Employee

So when you click #button1 from main view call the ajax method, that you have written correctly.

Just update few things in that ajax code,

//rest code
$('#myModalContent').html().html('');
$.ajax({
type: 'GET',
url: '/Employee/PopDetails/'+id,
contentType: 'application/html; charset=utf-8',
datatype: 'html',
success: function (data) {
  //debugger;
  $('#myModalContent').html(data);
  $('#myModal').modal(options);
  $('#myModal').modal('show');
 })

And in your controller action method PopDetails , return like this,

return PartialView("_EmployeeDetails",employee);

Note: See, in your main view, you might get an error for this @Html.Partial("_EmployeeDetails", new Employee()). For this you need to add your model reference in your main view like bellow,

@model Your_Project_Name.ModalFolderName

Hope it solve your issue. Happy Coding :)