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

时间:2016-09-28 13:42:24

标签: javascript jquery ajax asp.net-mvc-5

我在我的应用程序中放置了一个bootstrap切换开关 现在我想要将On和Off值发送到我的操作方法

Bellow是我的剃刀语法

@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>}

为了从JS向控制器传递数据,我搜索了很多文章,发现ajax是这样做的方式

Bellow是我在JS中的ajax的脚本

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

我还使用了会话变量,但在其中获取了空值

Bellow是我的控制器代码

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是我的开关按钮的图像

enter image description here

当我将其切换为关闭时,此关闭字符串应发送到我的操作方法,反之亦然

更新代码

阅读评论后,我对代码进行了以下更改

我添加了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();
    }

贝娄是剃刀的变化

$("#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)
                }
            });
        }
    });

但是我仍然没有得到警告信息,当我检查元素时我发现了这个错误

enter image description here

我差不多2天就遇到了这个问题

任何帮助将不胜感激

1 个答案:

答案 0 :(得分:0)

您需要使用<input type="text" /> <span role="alert" aria-live="assertive" id="err"></span> <select id="colours"> <option value="White">White invalid</option> <option value="Green">Green invalid</option> <option value="Red">Red</option> <option value="Blue">Blue</option> </select> var i = 0; $('#colours').on('keyup', function (e) { if ($(this).prop('selectedIndex') < 2) { $('#err').html('an error has occurred ' + i++); } else { $('#err').html(''); } }); 字符来调用$函数,并使用jQuery符号在操作方法中定义的相同名称将数据从页面传递到控制器:

Json

此外,您可能需要使用 '{"cmdName": "On"}', $.ajax({ url: '@Url.Action("ToggleSwitch")', type: 'Post', data: '{"cmdName": "On"}', success: function () { alert(data) } 属性修饰您的mvc操作。