首页 > 代码库 > MVC动态添加模块cshtml页面

MVC动态添加模块cshtml页面

2024-09-22 13:16:35   216人阅读

技术分享 
@model Lixise.HealthCloud.ServiceOrder.Models.ServiceOrderEdit
@using Lixise.HealthCloud.ServiceOrder.Utils
@{
    ViewBag.Title = "CreateOrder";
}
<style type="text/css">
    #close {
        /*background: url(img/close.png) no-repeat;
        width: 30px;
        height: 30px;*/
        cursor: pointer;
        position: absolute;
        right: 10px;
        top: 5px;
        /*text-indent: -999em;*/
        color: #fff;
        font-size: 16px;
    }

    #mask {
        background-color: #ccc;
        opacity: 0.7;
        filter: alpha(opacity=70);
        position: absolute;
        left: 200px;
        top: 0;
        z-index: 1000;
    }

    #dialog {
        position: fixed;
        z-index: 1001;
    }

    /*弹出层的样式*/
    .dialogCon {
        padding: 1px;
        position: relative;
        width: 670px;
        height: 380px;
        background: lightblue;
        /*border: 3px solid #9BE0F2;*/
        box-shadow: 0 0 15px 5px #888888;
        text-align: center;
    }

        .dialogCon .diaHead {
            width: 100%;
            height: 55px;
            
        }

        .dialogCon .diaBody {
            margin-top: 10px;
            width: 100%;
            height: 220px;
            
        }
            #diaBody label{
                width:111.6px;
                padding-bottom:15px;
            }
        .dialogCon .diaFoot {
            width:100%;
            height:auto;
        }
</style>
@*此页面的所有中文字段后期一律改为多语言*@

<form method="post" id="formOrder">
    <div class="bg-light lter b-b wrapper-md">
        <h1 class="m-n font-thin h3">
            <i class="icon icon-layers"></i> @T(Constanct.ServiceOrder_Add)
            <span class="panel-link">@Html.ActionLink(T(Constanct.Server_List_Title), "Services")</span>
            <span class="pull-right">
                <select class="input-sm w-sm inline" id="SelectModule" onchange="select()">
                    <option value=http://www.mamicode.com/"selEmpty">请选择模块</option>
                    <option value=http://www.mamicode.com/"selAboutInfo">
                        相关部件信息
                    </option>
                    <option value=http://www.mamicode.com/"selPaymentInfo">付款信息</option>
                    <option value=http://www.mamicode.com/"selLogisticsInfo">物流信息</option>
                </select>
                <span style="display:none;" id="toggleSle">
                    <select class="input-sm w-sm inline" id="SecondModule">
                        <option value=http://www.mamicode.com/"selEmpty">请选择</option>
                        <option value=http://www.mamicode.com/"selAlternator">发电机模块</option>
                        <option value=http://www.mamicode.com/"selEngine">发动机模块</option>
                        <option value=http://www.mamicode.com/"selControl">控制器模块</option>
                        <option value=http://www.mamicode.com/"selHarvester">采集器模块</option>
                        <option value=http://www.mamicode.com/"selOther">其他模块</option>
                    </select>
                </span>
                <button type="button" id="btnAdd" class="btn btn-info">点击新增模块</button>
            </span>
        </h1>
    </div>
    <div class="wrapper-md">
        <div class="col-sm-6">
            <div class="panel panel-default">
                <div class="panel-heading font-bold" name="moduleGrop">客户信息</div>
                <div class="panel-body">
                    <div class="form-group">
                        <label>公司名称</label>
                        <input type="text" class="form-control" placeholder="公司名称">
                    </div>
                    <div class="form-group">
                        <label>联系人</label>
                        <input type="text" class="form-control" placeholder="联系人">
                    </div>
                    <div class="form-group">
                        <label>联系电话</label>
                        <input type="text" class="form-control" placeholder="联系电话">
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-6">
            <div class="panel panel-default">
                <div class="panel-heading font-bold" name="moduleGrop">收货信息</div>
                <div class="panel-body">
                    <div class="form-group">
                        <label>收货人姓名</label>
                        <input type="email" class="form-control" placeholder="收货人姓名">
                    </div>
                    <div class="form-group">
                        <label>收货人地址</label>
                        <input type="email" class="form-control" placeholder="收货人地址">
                    </div>
                    <div class="form-group">
                        <label>收货人电话</label>
                        <input type="email" class="form-control" placeholder="收货人电话">
                    </div>
                    <div class="form-group">
                        <label>收货人邮箱</label>
                        <input type="email" class="form-control" placeholder="收货人邮箱">
                    </div>
                    <div class="form-group">
                        <label>收货人邮编</label>
                        <input type="email" class="form-control" placeholder="收货人邮编">
                    </div>
                </div>
            </div>
        </div>

        @*<div class=‘col-sm-6‘>
            <div class=‘panel panel-default‘>
                <div class=‘panel-heading font-bold‘>
                    <span name="moduleGrop">付款信息</span>
                    <button class=‘btn btn-info pull-right‘ name="selField" type="button">选择字段</button>
                </div>
                <div class=‘panel-body‘>

                    <div class=‘dialogCon‘>
                        <div id="diaHead">
                            <h3>请选择字段</h3>
                            <div id=‘close‘>?</div>
                        </div>
                        <div id="diaBody">
                            <div class="col-sm-12">
                                <label class="checkbox-inline i-checks">
                                    <input type="checkbox" value=http://www.mamicode.com/"option1"><i></i> 发电机型号
                                </label>
                                <label class="checkbox-inline i-checks">
                                    <input type="checkbox" value=http://www.mamicode.com/"option2"><i></i> AVR型号
                                </label>
                            </div>
                        </div>
                        <div id="diaFoot">
                            <button class=‘btn btn-primary pull-in‘ type="button">保存</button>
                        </div>
                    </div>

                </div>
            </div>
        </div>*@

    </div>

</form>


@section FootScripts{
    <script type="text/javascript">
        var jsonvalue = http://www.mamicode.com/null;
        $(function () {
            var moduleName = null;
            var emptyModule = "";
            var seleteVal = null;
            //动态添加模块
            $("#btnAdd").click(function () {
                
                if ($("#SelectModule option:selected").val() == "selEmpty") {
                    alert("请选择需要添加的模块");
                    return;
                }
                if ($("#SelectModule option:selected").val() == "selAboutInfo") {
                    if ($("#toggleSle option:selected").val() == "selEmpty") {
                        alert("请选择相关部件模块");
                        return;
                    }
                    else{
                        moduleName = $("#toggleSle option:selected").text();
                        seleteVal = $("#toggleSle option:selected").val();
                    }
                }
                else {
                    moduleName = $("#SelectModule option:selected").text();
                    seleteVal = $("#SelectModule option:selected").val()
                }
                //动态添加模块
                var emptyModule = "<div class=‘col-sm-6‘><div class=‘panel panel-default‘><div class=‘panel-heading font-bold‘><span name=‘moduleGrop‘>" + moduleName + "</span><button class=‘btn btn-info pull-right‘ name=‘" + seleteVal + "selField‘ type=‘button‘>添加字段</button></div><div class=‘panel-body‘></div></div></div>";

                //对比是否存在当前模块名称，存在则return 不存在则添加
                if (!IsExistModule(moduleName)) {
                    alert("已有此模块，请添加其他模块！");
                    return;
                }

                $(".col-sm-6").last().after(emptyModule);
                
                
                //选择字段
                var aa = $("[name=‘" + seleteVal + "selField‘]");
                $("[name=‘" + seleteVal + "selField‘]").click(function () {
                    var aa = $("[name=‘" + seleteVal + "selField‘]");
                    Dialog(function () {
                        console.log(‘我是点击后的事件‘);
                        console.log(aa);
                    });

                })
            })
            
        });
        //二级下拉框的显示与隐藏
        function select() {
            if ($("#SelectModule option:selected").val() == "selAboutInfo") {
                $("#toggleSle").css("display", "inline");
            }
            else
                $("#toggleSle").css("display", "none");
        };
        //当前要添加的模块名与当前存在的模块名是否相同，返回bool
        function IsExistModule(moduleName) {
            var result = true;
            $("[name=‘moduleGrop‘]").each(function () {
                if (moduleName == this.innerText) {
                    result = false;
                }
            });
            return result;
        }

        //点击添加字段的弹出层效果
        function Dialog(okcallback) {
            //获取当前页面的高度和宽度
            //var sWidth = document.body.scrollWidth || document.documentElement.scrollWidth;
            var sWidth = document.getElementById("formOrder").scrollWidth || document.documentElement.scrollWidth;
            var sHeight = document.body.scrollHeight || document.documentElement.scrollHeight;

            //获取页面的可视区域高度和宽度
            var wHeight = document.documentElement.clientHeight || document.body.clientHeight;

            //创建遮罩层
            var oMask = document.createElement("div");
            oMask.id = "mask";
            oMask.style.height = sHeight + "px";
            oMask.style.width = sWidth + "px";
            document.body.appendChild(oMask);            //添加到body末尾

            //创建弹出层
            var oDialog = document.createElement("div");
            oDialog.id = "dialog";
            oDialog.innerHTML = "<div class=‘dialogCon‘><div class=‘diaHead‘><h3>请选择字段</h3><div id=‘close‘>?</div></div><div class=‘diaBody‘><div class=‘col-sm-12‘><label class=‘checkbox-inline i-checks‘><input type=‘checkbox‘ value=http://www.mamicode.com/‘option1‘> 发电机型号
"; document.body.appendChild(oDialog); //获取弹出层的宽和高 var dHeight = oDialog.offsetHeight; var dWidth = oDialog.offsetWidth; //设置弹出层的left和top oDialog.style.left = (sWidth / 2 - dWidth / 2) + 200 + "px"; oDialog.style.top = wHeight / 2 - dHeight / 2 + "px"; //获取关闭按钮 var oClose = document.getElementById("close"); //点击关闭按钮和点击登陆框以外的区域都可以关闭登陆框 oClose.onclick = oMask.onclick = function () { document.body.removeChild(oDialog); document.body.removeChild(oMask); }; $(‘button[name="savaField"]‘).eq(0).click(function () { var $eles = $(‘#dialog‘).find(‘.checkbox-inline‘); //找到所有字段 if ($eles.length > 0) { //当前弹出层有字段 $eles.each(function () { var $this = $(this); if ($this.find(‘input[checked="checked"]‘).length > 1) { //将要传递的数据放进去 var ss = $this.find(‘input[checked="checked"]‘).text(); jsonvalue.push(); } }); } }); if (okcallback) { $(‘button[name="savaField"]‘).eq(0).off(‘click.iosdialog‘).on(‘click.iosdialog‘, okcallback); } //点击保存，将字段传递到模块 } </script> }
View Code

 

MVC动态添加模块cshtml页面


联系
我们