Question

So I have a table that gets transformed to an array using:

var result = $("#enrolledStudents").sortable('toArray');

But when I go a head an pass that into my controller like so:

$("#update-enroll").click(function () {
            var result = $("#enrolledStudents").sortable('toArray');
            $.ajax({
                url: '@Url.Action("Enrollment", "Classroom")',
                data: { students: result },
                type: 'POST',
                traditional: true
            });
        });

My debugging breakpoint gets set off twice, causing issues to arise. What is the proper way to submit data to my controller on POST?

Answer 1

Per my comments, there are a couple things that could be causing this.

1. You have have the unobtrusive file(s) loaded multiple times
2. Your form has an action method defined, and your button is inside the form tag as a submit button. This will submit the form, and then the click will also submit the form – see example

Example

<form action="/somerowout/someaction">
  <input type="text" id="text1"/>
  <input type="text" id="text1"/>
  <input type="submit" />
</form>

If you need to validate a value on your form before posting, don’t hook up an additional Ajax call. Your javascript will look something like:

$(document).ready(function () {
    $("form").submit(function(){
        var result = $("#enrolledStudents").sortable('toArray');
        if(result == null){
            //do something to show validation failed
            return false;
        }
        return true;        
    });
});

And your form code would then look something like:

@using (@Ajax.BeginForm(new AjaxOptions { })) { 
    <input type="text" id="text1"/>
    <input type="text" id="text1"/>
    <input type="submit" />
}

---

If you want to use Ajax rather than the Html Helpers, use a div instead of a form, and you won’t get a duplicate post. Here’s how you could achieve this:

<div id="enrolledStudents">
  <--! your elements -->
  <button id="saveStudents">Save</button>
</div>

JavaScript

$(document).ready(function () {
    $("saveStudents").click(function(){
        var result = $("#enrolledStudents").sortable('toArray');
        if(result !== null){ /* do some kind of check here. */
            $.ajax({
                url: '@Url.Action("Enrollment", "Classroom")',
                data: { students: result },
                type: 'POST',
                traditional: true,
                success : function(data) {
                    if (data.status) {
                        window.location = data.route;
                    }               
                }
            })
        } else {
            /* notify ui that save didn't happpen */
        }           
    });
});

Example Controller Action
When posting your data using Ajax, here’s an example of how to pass the route

[HttpPost]
public ActionResult SomethingPost(SomeModel model) {
    if (Request.IsAjaxRequest()) {
        var json = new {
                   status = true,
                   route = @Url.RouteUrl("MyRouteName", new { /* route values */ })
        };
        return Json(json, JsonRequestBehavior.AllowGet);
    }
}