Value not passing from view to controller using ajax

Question

I am trying to pass a value across to my controller using ajax.

ajax code as follows:

           var myId = $(".slectOne[checked]").attr("data-id");

            $.ajax({
                url: '@Url.Action("reservation_step_1", "Home")', 
                type: 'POST',
                data: { id: myId },
            });

controller code as follows:

        [HttpPost]
        [AllowAnonymous]
        public ActionResult reservation_step_1(string id)
        {
            string val = id;

            return RedirectToAction("reservation_step_2", "Home", new { val = val });
        }

I am unsure if I am doing anything wrong but my "id" value is "null" in the controller.

it seems that your issue is in routing, try to change the name of the parameter to and change the httpmethod to get — Amro Mustafa, Aug 08 '18 at 05:55

score 0 · Accepted Answer · answered Aug 07 '18 at 20:56

This will definitely work.

Controller

public class HomeController : Controller
{
    [HttpPost]
    public ActionResult reservation_step_1(string id)
    {
        string val = id;

        return RedirectToAction("reservation_step_2", "Home", new { val = val });
    }

    //my controller action name, yours is different
    public ActionResult Tut118()
    {
        return View();
    }

View

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Tut118</title>
    <script src="~/Scripts/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#theButton").click(function () {
                //kudos to https://stackoverflow.com/questions/5450104/using-jquery-to-get-all-checked-checkboxes-with-a-certain-class-name
                var myId = $('.slectOne:checkbox:checked').attr("data-id");
                $.ajax({
                    type: "Post",
                    url: '@Url.Action("reservation_step_1", "Home")',
                    data: { 'id': myId },
                    dataType: 'json',
                    success: function (data) {
                        $.each(data, function (i, anObj) {
                            $("#Asentamientos").append($('<option>').text(anObj.Text).attr('value', anObj.Value));
                        });
                    }
                });
            })

            //kudos to https://stackoverflow.com/questions/9709209/html-select-only-one-checkbox-in-a-group
            // the selector will match all input controls of type :checkbox
            // and attach a click event handler
            $("input:checkbox").on('click', function () {
                // in the handler, 'this' refers to the box clicked on
                var $box = $(this);
                if ($box.is(":checked")) {
                    // the name of the box is retrieved using the .attr() method
                    // as it is assumed and expected to be immutable
                    var group = "input:checkbox[name='" + $box.attr("name") + "']";
                    // the checked state of the group/box on the other hand will change
                    // and the current value is retrieved using .prop() method
                    $(group).prop("checked", false);
                    $box.prop("checked", true);
                } else {
                    $box.prop("checked", false);
                }
            });
        })
    </script>
</head>
<body>
    <div>
        <h3>CheckBoxes</h3>
        <label>
            <input data-id="1" type="checkbox" class="slectOne" value="1" name="fooby[1][]" />CheckBox1
        </label>
        <label>
            <input data-id="2" type="checkbox" class="slectOne" value="1" name="fooby[1][]" />CheckBox2
        </label>
        <label>
            <input data-id="3" type="checkbox" class="slectOne" value="1" name="fooby[1][]" />CheckBox3
        </label>
    </div>
    <input type="button" id="theButton" value="PassData" />
</body>
</html>

I just gave this a try, but passes a null value. I tried to break point each line to see what is happening in the controller and found that the value is passing from view to controller, runs through "reservation_step_1" action once then values turn to null and passes null value to the receiving action. Any idea why this happens sir? — Daniel, Aug 08 '18 at 09:25
@Daniel the only thing I can say is that I know things like this are a pain. I know my code works (I don't know why yours is not). You can google to find solutions. — kblau, Aug 08 '18 at 16:36
your code works just fine, i am just unsure why it is looping through the action twice, on the 1st loop i can see the values being passed but on the 2nd loop the values turn to null — Daniel, Aug 09 '18 at 13:09
it could loop twice if the .ajax code is called twice. Like once from a trigger on button click, and another time just calling the .ajax outside of a trigger. — kblau, Aug 09 '18 at 17:45
You're 100% right, I've commented out my "using (Html.BeginForm())"reservation_step_1", "Home")), FormMethod.Post))" and then only ran through once(No loop) but now once i click my submit button, the data passes well but my next page does not load. It just stays on the page where i clicked the button — Daniel, Aug 10 '18 at 12:19

Value not passing from view to controller using ajax

1 Answers1

Linked