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

在主视图和内部创建一个模态弹出，保留部分视图，这基本上就像绑定员工详细信息一样绑定数据。

例如，您创建了一个名为_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（＆＃34; _EmployeeDetails＆＃34;，新员工（））可能会收到错误消息。为此，您需要在主视图中添加模型参考，如bellow，

@model Your_Project_Name.ModalFolderName

希望它能解决您的问题。快乐编码：）

asp.net MVC5弹出创建

2 个答案: