Modal popup error: "The parameters dictionary contains a null entry for parameter 'id' of non-nullable type

I am trying to do a AJAX Get call to see the details of each student, from an ActionLink in a modal popup. The popup shows up but it does not show the body of the modal.

In the Console, I get this error message,

"The parameters dictionary contains a null entry for parameter 'id' of non-nullable type 'System.Int32' for method 'System.Web.Mvc.ViewResult Details(Int32)' in 'ContosoUniversity.Controllers.StudentController'. An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter. Parameter name: parameters"

I am confused as to what this error message means.

Details ActionLink

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

My modal

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

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

Answers 1

  • You have not added a data- attribute named id (you have just added an id attribute).

    The code to generate the link would need to be

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

    Alternatively, you could just build the full url

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

    and then in the script, access it using

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

Related Articles