Edit.cshtml

@{
    ViewData["Title"] = "Edit";
    Layout = "~/Views/Shared/_Layout_default.cshtml";
}

<form class="layui-form layui-form-pane" lay-filter="DataForm" style="margin:20px;">
    <div class="layui-form-item">
        <label class="layui-form-label">Floor:</label>
        <div class="layui-input-inline">
            <input type="hidden" name="Id" value="0" />
            <div id="divFloor" style="">
                <select name="Floor" id="sel_Floor" lay-filter="Floor" lay-search>
                    <option value="0"></option>
                </select>
            </div>
            <input type="text" id="txtFloor" autocomplete="off" style="display:none" disabled class="layui-input layui-disabled">
        </div>

    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">IP:</label>
        <div class="layui-input-inline">
            <div id="divIP">
                <select name="IP" id="sel_IP" lay-filter="IP" lay-search>
                    <option value="0"></option>
                </select>
            </div>
            <input type="text" id="txtIP" autocomplete="off" style="display:none" disabled class="layui-input layui-disabled">
        </div>
        <div class="layui-input-inline">
            <div id="divIPMantissa">
                <select name="IPMantissa" id="sel_IPMantissa" lay-filter="IPMantissa" lay-search>
                    <option value="0"></option>
                </select>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">Mac Address:</label>
        <div class="layui-input-inline">
            <input type="text" name="MacAddress" lay-verify="required|Mac" placeholder="Mac Address" autocomplete="off" class="layui-input">
        </div>

        <label class="layui-form-label">Location:</label>
        <div class="layui-input-inline">
            @*<input type="text" name="Location" placeholder="Location" autocomplete="off" class="layui-input">*@
            <select name="Location" id="sel_Location" lay-filter="Location" lay-search>
                <option value="0"></option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">Device/Computer:</label>
        <div class="layui-input-inline">
            @*<input type="text" name="Device" lay-verify="required" placeholder="Device/Computer" autocomplete="off" class="layui-input">*@
            <select name="Device" id="sel_Device" lay-filter="Device" lay-search>
                <option value="0"></option>
            </select>
        </div>

        <label class="layui-form-label">Node Name:</label>
        <div class="layui-input-inline">
            <input type="text" name="NodeName" placeholder="Node Name" autocomplete="off" class="layui-input">
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">User Name:</label>
        <div class="layui-input-inline">
            <input type="text" name="UserName" lay-verify="required" placeholder="User Name" autocomplete="off" class="layui-input">
        </div>

        <label class="layui-form-label">Expire At:</label>
        <div class="layui-input-inline">
            <input type="text" name="Expired" placeholder="Expire At" autocomplete="off" class="layui-input" id="Expired">
        </div>
    </div>

    <div class="layui-form-item">

        @*<label class="layui-form-label">Computer Name:</label>
            <div class="layui-input-inline">
                <input type="text" name="ComputerName" placeholder="Computer Name" autocomplete="off" class="layui-input">
            </div>*@

        <label class="layui-form-label">Purpose:</label>
        <div class="layui-input-inline">

            <select name="PurposeId" id="sel_Purpose" lay-filter="PurposeId" lay-search>
                <option value="0"></option>
            </select>
        </div>

    </div>

    <div class="layui-form-item" style="margin:30px 0px;">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-primary layui-border-blue" lay-submit lay-filter="formDemo">Save</button>
            <button type="button" id="btnCancel" class="layui-btn layui-btn-primary">Cancel</button>
        </div>
    </div>
</form>

@section Scripts
{
    <script src="~/js/helper.js"></script>
    <script>

        layui.use('form', function () {
            var form = layui.form;
            var laydate = layui.laydate;


            var IPSegmentList = [];


            laydate.render({
                elem: '#Expired' //指定元素
            });


            var _Id = ObjParameter.getQueryStringDecodeURI("Id");


            //自定义验证规则
            form.verify({
                Mac: function (value, item) {
                    if (value.length != 12) {
                        return "Mac地址必须是12位字符"
                    }

                    //if (value.indexOf("o") > 0 || value.indexOf("O") > 0) {
                    //    return "Mac地址不能有字母O"
                    //}

                    var reg = new RegExp("^[0-9A-Fa-f]*$");
                    if (!reg.test(value)) {
                        return "Mac只能输入16进制数"
                    }

                }

            });


            //监听提交
            form.on('submit(formDemo)', function (data) {

                var formData = form.val('DataForm');
                formData.IP = formData.IP + "." + formData.IPMantissa;


                //console.log(_Id);

                if (_Id > 0) {
                    formData.IP = $("#txtIP").val().trim();
                    //formData.Floor = "";
                }
                console.log(formData);

                $.post("/IPList/UpdateableIgnoreColumnsWhere", formData, function (data) {

                    console.log(data);
                    if (data.code == 0) {
                        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        parent.layer.close(index); //再执行关闭
                    } else {
                        layer.alert(data.msg, { title: '提示', icon: 5 });
                    }

                });

                return false;
            });


            $("#btnCancel").click(function () {
                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(index); //再执行关闭
            });

            //选择Floor下拉框事件
            form.on('select(Floor)', function (data) {

                console.log(data.value); //得到被选中的值
                var selVal = data.value;
                var result = IPSegmentList.filter(function (item) {
                    return item.Floor == selVal;
                });


                $("#sel_IP").empty();

                var html = '<option value="">Select IP Segment</option>';


                if (!objValidate.NotNull(selVal)) {
                    result = IPSegmentList;
                }
                $.each(result, function (i, v) {

                    html += '<option value="' + v.IPSegment + '">' + v.IPSegment + '</option>';

                });

                $("#sel_IP").append(html);
                layui.form.render("select");

            });

            form.on('select(IP)', function (data) {

                console.log(data.value); //得到被选中的值
                var selVal = data.value;

                //IP尾号选择
                $.ajax({
                    type: "Get",
                    url: "/IPList/QueryableNotDeletedAvailableIP",
                    async: true,
                    data: { IPSegment: selVal },
                    success: function (data) {
                        $("#sel_IPMantissa").empty();
                        var data = data.data;
                        var html = '<option value="">请选择</option>';
                        console.log(data);
                        var str = "";
                        $.each(data, function (i, v) {

                            str = v.IP.substring(v.IP.lastIndexOf(".") + 1);
                            html += '<option value="' + str + '">' + str + '</option>';

                        });

                        $("#sel_IPMantissa").append(html);
                        layui.form.render("select");

                    }
                });


                //IP楼层选择
                if (!objValidate.NotNull(selVal)) {
                    $("#sel_Floor").val("");
                    layui.form.render("select");
                    return false;
                }
                var result = IPSegmentList.find(function (item) {
                    return item.IPSegment == selVal;
                });

                $("#sel_Floor").val(result.Floor);
                layui.form.render("select");

            });

            var active = {
                //编辑时加载详情
                LoadDetails: function () {

                    $.ajax({
                        type: "Get",
                        url: "/IPList/QueryableInSingle",
                        async: true,
                        data: { Id: _Id },
                        success: function (data) {
                            var data = data.data;
                            form.val('DataForm', data);


                            $("#divFloor").css("display", "none");
                            $("#txtFloor").val(data.Floor).css("display", "block");



                            $("#divIP").css("display", "none");
                            $("#txtIP").val(data.IP).css("display", "block");

                            $("#divIPMantissa").css("display", "none");

                            $("#Expired").val(objDate.DateToStr(data.Expired, "/", 10, ''));

                            form.render();

                            //加载PurposeList数据
                            active.LoadPurposeList(data.PurposeId);
                        }
                    });
                }

                //加载PurposeList数据
                , LoadPurposeList: function (selectedVal) {

                    $.ajax({
                        type: "Get",
                        url: "/PurposeList/QueryableNotDeleted",
                        async: false,
                        data: {},
                        success: function (data) {
                            $("#sel_Purpose").empty();
                            var html = '<option value="">请选择</option>';
                            console.log(data.data);
                            $.each(data.data, function (i, v) {

                                if (selectedVal == v.PID) {
                                    html += '<option value="' + v.PID + '" selected>' + v.Name + '</option>';
                                } else {
                                    html += '<option value="' + v.PID + '">' + v.Name + '</option>';
                                }


                            });

                            $("#sel_Purpose").append(html);
                            layui.form.render("select");

                        }
                    });

                }


                //加载Floor数据
                , LoadFloorList: function () {

                    $.ajax({
                        type: "Get",
                        url: "/SegmentList/QueryableNotDeletedDistinct",
                        async: false,
                        data: {},
                        success: function (data) {

                            $("#sel_Floor").empty();
                            var data = data.data;
                            var html = '<option value="">请选择</option>';
                            console.log(data);
                            for (var i = 0; i < data.length; i++) {
                                html += '<option value="' + data[i] + '">' + data[i] + '</option>';
                            }

                            $("#sel_Floor").append(html);
                            layui.form.render("select");

                        }
                    });

                }

                //加载IPSegment数据
                , LoadIPSegmentList: function () {

                    $.ajax({
                        type: "Get",
                        url: "/SegmentList/QueryableNotDeletedWhere",
                        async: true,
                        data: {},
                        success: function (data) {

                            $("#sel_IP").empty();

                            var data = data.data;
                            IPSegmentList = data;
                            var html = '<option value="">Select IP Segment</option>';
                            /*console.log(data);*/
                            $.each(data, function (i, v) {
                                //console.log(v.Floor + " | " + selVal);
                                //if (v.Floor == selVal) {
                                html += '<option value="' + v.IPSegment + '">' + v.IPSegment + '</option>';
                                //}

                            });

                            $("#sel_IP").append(html);
                            layui.form.render("select");

                        }
                    });

                }

                //加载Device数据
                , LoadDeviceList: function () {

                    $.ajax({
                        type: "Get",
                        url: "/Enumeration/QueryableNotDeletedWhere",
                        async: false,
                        data: { Category: 'Device' },
                        success: function (data) {

                            $("#sel_Device").empty();
                            var data = data.data;
                            var html = '<option value="">请选择</option>';
                            console.log(data);
                            $.each(data, function (i, v) {

                                html += '<option value="' + v.Value + '">' + v.Text + '</option>';

                            });

                            $("#sel_Device").append(html);
                            layui.form.render("select");

                        }
                    });

                }
                //加载Location数据
                , LoadLocationList: function () {

                    $.ajax({
                        type: "Get",
                        url: "/Enumeration/QueryableNotDeletedWhere",
                        async: false,
                        data: { Category: 'Location' },
                        success: function (data) {

                            $("#sel_Location").empty();
                            var data = data.data;
                            var html = '<option value="">请选择</option>';
                            console.log(data);
                            $.each(data, function (i, v) {

                                html += '<option value="' + v.Value + '">' + v.Text + '</option>';

                            });

                            $("#sel_Location").append(html);
                            layui.form.render("select");

                        }
                    });

                }

            };

            //加载PurposeList数据
            active.LoadPurposeList();

            //加载Floor数据
            active.LoadFloorList();

            //加载IPSegment数据
            active.LoadIPSegmentList();

            //加载Device数据
            active.LoadDeviceList();

            //加载Location数据
            active.LoadLocationList();

            if (_Id > 0) {
                //加载详情
                active.LoadDetails();
            } else {

            }


        });
    </script>

}