Question

我正在研究mvc5。单击@ Html.CheckBoxFor（）时，我不知道如何将表单提交给控制器在我的应用程序中，我得到的设备列表具有开/关等当前状态。我创建了切换开关以显示开/关状态。当用户点击一个交换机时需要在数据库中更新。如何在切换开关中提交表单单击数据类对象

像这样看 enter image description here

查看代码：

@model IEnumerable<SmartPlug_Test.Models.NodeDetails>

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS Includes -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

    <!-- JS includes -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

    <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
    <script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script>

    <style type="text/css">
        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }

            .switch input {
                display: none;
            }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
        }

            .slider:before {
                position: absolute;
                content: "";
                height: 26px;
                width: 26px;
                left: 4px;
                bottom: 4px;
                background-color: white;
                transition: .4s;
            }

        input[type="checkbox"]:checked + input[type="hidden"] + .slider,
        input[type="checkbox"]:checked + .slider {
            background-color: #2196F3;
        }

        input[type="checkbox"]:focus + input[type="hidden"] + .slider,
        input[type="checkbox"]:focus + .slider {
            box-shadow: 0 0 1px #2196F3;
        }

        input[type="checkbox"]:checked + input[type="hidden"] + .slider:before,
        input[type="checkbox"]:checked + .slider:before {
            transform: translateX(26px);
        }

        /* Rounded sliders */
        .slider.round {
            border-radius: 34px;
        }

            .slider.round:before {
                border-radius: 50%;
            }
    </style>
</head>
<body>
    <script type="text/javascript">

        $(document).ready(function () {
            $("#status").change(function () {
                if ($("#status").is(":checked")) {
                    $("form").submit();
                }
                else {
                    $("form").submit();
                }

            });
        });
    </script>



    <table class="table">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Imagepath)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.status)
            </th>

            <th>
                @Html.DisplayNameFor(model => model.city)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.nodemacaddress)
            </th>
        </tr>

        @using (Html.BeginForm())
        {
            foreach (var item in Model)
            {
                <tr>
                    <td>
                        @*@Html.DisplayFor(modelItem => item.Imagepath)*@

                        <img src=@Url.Content(@item.Imagepath) style="height:50px;width:100px;" />

                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.name)
                    </td>
                    <td>

                        <label class="switch">

                            @Html.CheckBoxFor(modelItem => item.status,@class = "form-control" })

                            <div class="slider round">
                            </div>

                        </label>

                    </td>

                    <td>
                        @Html.DisplayFor(modelItem => item.city)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.nodemacaddress)

                    </td>
                </tr>
             }


        }

    </table>
   @ViewBag.message
</body>
</html>

数据类

public class NodeDetails
    {

        [DisplayName("Device")]
        public string Imagepath { get; set; }
        [DisplayName("Status")]
        public bool status { get; set; }
        [DisplayName("Name")]
        public string name { get; set; }
        [DisplayName("NodeMacAddress")]
        public string nodemacaddress { get; set; }
        public int switchType { get; set; }
        public int id { get; set; }
        [DisplayName("City")]
        public string city { get; set; }
    }

在控制器中我想要这样

[HttpPost]
public ActionResult Details(NodeDetails nodeDetails)
{
     //Code for db update
}

如何在切换按钮中获取数据类按钮？

先谢谢

Answer 1

您可以使用表单标记内的复选框属性，它将提交表单，如下所示：

@Html.CheckBoxFor(m=>m.TestCheckbox, new { onclick = "this.form.submit();" })

单击@ Html.Checkbox时如何向Controller提交数据

1 个答案: