将数据从javascript传递到asp.net MVC中的操作方法

Question

I have placed a bootstrap toggle switch in my application Now i want is to send the On and Off values to my action method

Bellow is my razor syntax

@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)

<fieldset style="height:60px">
    <legend style="text-align:center;  font-size:large; font-family:'Times New Roman'; background-color:#C8E6C9; color:red">Remote On/Off</legend>
    <input id="test_id" name="cmdName" type="checkbox" checked data-toggle="toggle">

</fieldset>}

For passing data to controller from JS i have searched many articles and found that ajax is the way to do it

Bellow is my script for ajax inside JS

<script>
var cmdName = '@Session["cmdName"]';


    $("#test_id").on("change", function (event) {
        if ($(this).is(":checked")) {
            $.ajax({
                url: '@Url.Action("MultiGraph")',
                type: 'Post',
                data: 'On',
                success: function () {
                    alert(data)
                }
            });
        } else {
            $.ajax({
                url: '@Url.Action("MultiGraph")',
                type: 'Post',
                data: 'Off',
                success: function () {
                    alert(data)
                }
            });
        }
    }); </script>

I have also used session variable but getting null value in it

Bellow is my controller code

public ActionResult MultiGraph(string search, string start_date, string End_date, string cmdName, int? page)
{
//search contain serial number(s)
//cmdName is for input checkbox 
}

Bellow is the image for my switch button

When i switch it to Off then this Off string should be sent to my action method and vise versa

Updated Code

After reading comments i have done the following changes to my code

I have added a new action method of type Post

 [HttpPost]
    public ActionResult ToggleSwitch (string search, string cmdName)
    {
        List<SelectListItem> items = new List<SelectListItem>();

        var dtt = db.ADS_Device_Data.Select(a => a.Device_Serial_Number).Distinct().ToList();

        foreach (var item in dtt)
        {
            if (!string.IsNullOrEmpty(item))
            {
                items.Add(new SelectListItem { Text = item, Value = item });
            }
        }

        ViewBag.search = items;

        return View();
    }

Bellow are changes in my razor

$("#test_id").on("change", function (event) {
        if ($(this).is(":checked")) {
            $.ajax({
                url: '@Url.Action("ToggleSwitch")',
                type: 'Post',
                data: '{"cmdName": "On"}',
                success: function () {
                    alert(data)
                }
            });
        } else {
            $.ajax({
                url: '@Url.Action("ToggleSwitch")',
                type: 'Post',
                data: '{"cmdName": "Off"}',
                success: function () {
                    alert(data)
                }
            });
        }
    });

But still i get no alert message, when i inspect element i found this error

I am stuck to this problem from almost 2 days

Any help would be appreciated

Answer 1

You need to use the $ character to invoque jQuery functions and pass your data from page to controller with the same name you defined in the action method using Json notation:

        '{"cmdName": "On"}',

         $.ajax({
            url: '@Url.Action("ToggleSwitch")',
            type: 'Post',
            data: '{"cmdName": "On"}',
            success: function () {
                alert(data)
            }

Furthermore, you might need to decorate your mvc action whith the [HttpPost] attribute.