0

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);
        }
Truecolor
  • 437
  • 2
  • 6
  • 22

1 Answers1

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) {
    ....
});
  • No, not really - could be just `$(".modalDetails").click(function (e) { e.preventDefault(); $.get(url, function (data) { $('.modal-body').html($(data).find('#details')); $('#myModal').modal('show'); }); })` –  Mar 08 '17 at 01:25
  • But its a bit unclear why your returning a view that you only want to use part of - why not just return a partial containing only the `#details` bit? –  Mar 08 '17 at 01:26
  • I am not aware of how to return the partial view with AJAX. I wanted to ask if you can refer me to some sources where I can get a good understanding of jQuery and AJAX `Get` and `Post` data calls? I have been Googling a lot, and it is getting very confusing at times. – Truecolor Mar 08 '17 at 01:26
  • That's a bit broad. What specifically are you struggling with? –  Mar 08 '17 at 01:28
  • Also your would get better performance (and not have to re-parse the validator for client side validation) if you generate the modal in the view initially, and then just update its textboxes by returning json containing the objects values. –  Mar 08 '17 at 01:29
  • Well for now, I am trying to learn using jQuery and Bootstrap, creating modal popups for our web app and then using AJAX (json) call methods to Get and Post data for one of those popups. It is part of a project assignment. – Truecolor Mar 08 '17 at 01:29
  • 1
    The basic steps should be (1) create a partial view with a form for editing a `Student` (2) in the view, use `@Html.Partial()` to render it in the view (3) in the `.click()` handler, call a method that returns json of the selected `Student` and update the corresponding form controls and show the model. –  Mar 08 '17 at 01:46
  • 1
    For submitting, handle the forms `.submit()` event, check `.isValid()` (and if not cancel), then serialize the form and send to the POST method. The main issue is how to handle `ModelState` being invalid but that's a big subject on its own. –  Mar 08 '17 at 01:48
  • May be this is a little late to ask, but I am still going to try. Like you had mentioned before, I was told by my prof. to refactor my code to return a Partial view from the server and append just that content, instead of the whole view. If possible, are you able to refer me to a source which will help me in learning how to use a PartialView with `$.get`, please? – Truecolor Mar 09 '17 at 15:34
  • 1
    @Truecolor, Refer [this answer](http://stackoverflow.com/questions/29142422/rendering-partial-view-on-button-click-in-asp-net-mvc/29142790#29142790) for a typical example –  Mar 09 '17 at 23:55