模态弹出错误：“参数字典包含不可为空类型的参数 'id' 的空条目

Question

我正在尝试通过模式弹出窗口中的ActionLink 进行 AJAX Get 调用以查看每个学生的详细信息。弹出窗口出现，但不显示模态框的主体。

在控制台中，我收到此错误消息，

“参数字典包含“ContosoUniversity.Controllers”中方法“System.Web.Mvc.ViewResult Details(Int32)”的不可空类型“System.Int32”的参数“id”的空条目。 StudentController'。可选参数必须是引用类型、可空类型或声明为可选参数。 参数名称：参数”

我对这个错误消息的含义感到困惑。

详情 ActionLink

@Html.ActionLink("Details", "Details", null, new { id = item.ID, @class = "modalDetails" }) 

我的模态

<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <a href="#" class="close" data-dismiss="modal">&times;</a>
                <h3 class="modal-title">Student Details</h3>
            </div>

            <div class="modal-body">

            </div>

            <div class="modal-footer">
                <a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a>

            </div>
        </div>
    </div>
</div>

AJAX 调用

<script type="text/javascript">
    $(function () {
        $(".modalDetails").click(function (e) {

            e.preventDefault();

            var id = $(this).data('id');
            //console.log('the id is: ' + id);

            var loadModal = function () {

                //var deferred = $.Deferred();//create a deffered object

                var url = "/Student/Details";

                $.get(url, { id: id }, function (data) {

                    $('.modal-body').html($(data).find('#details'));
                });

                //return deferred.promise();
            };

            loadModal();

            //loadModal().done(function () {
            //console.log("done loading modal!");
            $('#myModal').modal('show');// show the modal pop up
            // });

        });
    });
</script>

StudentController

// GET: /Student/Details/5

        public ViewResult Details(int id)
        {
            Student student = studentRepository.GetStudentByID(id);
            return View(student);
        }

Answer 1

您尚未添加名为id 的data- 属性（您刚刚添加了id 属性）。

生成链接的代码需要是

@Html.ActionLink("Details", "Details", null, new { data_id = item.ID, @class = "modalDetails" })

或者，您可以构建完整的网址

@Html.ActionLink("Details", "Details", "Student", new { id = item.ID}, new { @class = "modalDetails" })

然后在脚本中使用

var url = $(this).attr('href'); // outputs "/Student/Details/2" assuming item.ID = 2;
$.get(url, function (data) {
    ....
});