asp.net MVC5弹出创建

Question

这是我用来显示详细信息但无法正常工作的ajax函数：

$("#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');
        });
     });

控制器功能：

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

            return PartialView(employee);
        }`

我是ASP.NET和Visual Studio的新手。 我正在使用Visual Studio 2013创建MVC Web应用程序以维护员工数据库。 无需使用ajax调用即可正常工作。 但是，当我们单击详细信息链接而不是导航至下一页时，我想将员工详细信息显示为弹出窗口。 我可以创建一个空白的弹出窗口，但不能创建所需的弹出窗口。 请告诉我如何使用ajax函数作为弹出窗口查看选定员工的详细信息。

Answer 1

当您要调用ajax时，只需定义一个数据类型为JSON的后端方法。 在您的控制器上：

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

您可以根据要求返回任何内容，例如员工列表，所需的任何DTO。 在您看来，您需要使用ajax调用此控制器：

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

很抱歉，如果格式化我的答案时出现问题，这是我第一次尝试在stackoverflow上回答。

Answer 2

在主视图和内部保留一个局部视图中创建一个Modal弹出窗口 ，该弹出窗口基本上是用于绑定员工详细信息的数据，就像下面这样。

例如，您创建了一个名为_EmployeeDetails.cshtml的局部视图，您的代码将像这样，

<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>

将您的Razor代码保留在_EmployeeDetails局部视图内。 并且不要忘了像下面这样在局部视图中引用您的员工模型。

@model Your_Project_Name.ModalFolderName.Employee

因此，当您从主视图中单击＃button1时 ，调用ajax方法，即表示您已正确编写。

只需更新该ajax代码中的一些内容，

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

在您的控制器动作方法PopDetails中 ，这样返回，

return PartialView("_EmployeeDetails",employee);

注意：请参见在主视图中，此@ Html.Partial（“ _ EmployeeDetails”，new Employee（））可能会出错。 为此，您需要在主视图中添加模型参考，例如波纹管，

@model Your_Project_Name.ModalFolderName

希望它能解决您的问题。 快乐编码:)