频道栏目
首页 > 程序开发 > 软件开发 > C# > 正文
C#编程:控件的使用及Ajax通信代码实例
2018-01-18 11:41:15         来源:MaoLin Tian's Blog  
收藏   我要投稿

控件隐藏

控件前端显示,选择框

 <p class="form-group">
 <label class="col-sm-3 control-label">API类型</label>
  <p class="col-sm-8">
       <input class="apiType" type="radio" name="apiType" value="0" title="基础数据" />基础数据
       <input class="apiType" type="radio" name="apiType" value="1" title="单实体" checked="checked" />单实体
       <input class="apiType" type="radio" name="apiType" value="3" title="多实体" />多实体
       <input class="apiType" type="radio" name="apiType" value="2" title="业务数据接口" />业务数据
       <span class="help-block"><span class="required">*</span>说明:选择业务对接类型</span>
   </p>
 </p>

依据class对应的apitype如果发生改变,则触发函数,对应确定哪些控件显示,哪些隐藏。

注意:这里无论是隐藏还是显示,四种条件各自涉及到的控件要取并集,也就是说即使不隐藏也要写。

    <script type="text/javascript">
        $(function () {

            var item = document.getElementById("IsDependsBasic")
            item.parentNode.parentNode.style = "";
            item = document.getElementById("whiteList")
            item.parentNode.parentNode.style = "display:none";
            item = document.getElementById("showFields")
            item.parentNode.parentNode.style = "";  //可以显示
            item = document.getElementById("getApiListUrl")
            item.parentNode.parentNode.style = "display:none";   //设置不显示
            item = document.getElementById("importApiUrl")
            item.parentNode.parentNode.style = "display:none";
            item = document.getElementById("isEnable")
            item.parentNode.parentNode.style = "display:none";
            $(".apiType").change(function () {
                // var item = document.getElementById("getApiListUrl")
                // item.parentNode.parentNode.style = "display:none";
                //document.getElementById("importApiUrl")
                console.info(item)
                var apiType = $("input[name='apiType']:checked").val();
                if (apiType == "0") {
                    var item = document.getElementById("IsDependsBasic")
                    item.parentNode.parentNode.style = "display:none";
                    item = document.getElementById("whiteList")
                    item.parentNode.parentNode.style = "display:none";
                    item = document.getElementById("getApiListUrl")
                    item.parentNode.parentNode.style = "display:none";
                    item = document.getElementById("showFields")
                    item.parentNode.parentNode.style = "";
                    item = document.getElementById("importApiUrl")
                    item.parentNode.parentNode.style = "display:none";
                    item = document.getElementById("isEnable")
                    item.parentNode.parentNode.style = "display:none";

                }
                if (apiType == "1") {
                    var item = document.getElementById("IsDependsBasic")
                    item.parentNode.parentNode.style = "";
                    item = document.getElementById("whiteList")
                    item.parentNode.parentNode.style = "display:none";
                    item = document.getElementById("showFields")
                    item.parentNode.parentNode.style = "";
                    item = document.getElementById("getApiListUrl")
                    item.parentNode.parentNode.style = "display:none";
                    item = document.getElementById("importApiUrl")
                    item.parentNode.parentNode.style = "display:none";
                    item = document.getElementById("isEnable")
                    item.parentNode.parentNode.style = "display:none";

                }
                if (apiType == "3") {
                    var item = document.getElementById("whiteList")
                    item.parentNode.parentNode.style = "";
                    item = document.getElementById("IsDependsBasic")
                    item.parentNode.parentNode.style = "";
                    item = document.getElementById("getApiListUrl")
                    item.parentNode.parentNode.style = "display:none";
                    item = document.getElementById("showFields")
                    item.parentNode.parentNode.style = "";
                    item = document.getElementById("importApiUrl")
                    item.parentNode.parentNode.style = "display:none";
                    item = document.getElementById("isEnable")
                    item.parentNode.parentNode.style = "display:none";

                }
                if (apiType == "2") {
                    var item = document.getElementById("IsDependsBasic")
                    item.parentNode.parentNode.style = "display:none";
                    item = document.getElementById("whiteList")
                    item.parentNode.parentNode.style = "display:none";
                    item = document.getElementById("showFields")
                    item.parentNode.parentNode.style = "display:none";
                    item = document.getElementById("getApiListUrl")
                    item.parentNode.parentNode.style = "";
                    item = document.getElementById("importApiUrl")
                    item.parentNode.parentNode.style = "";
                    item = document.getElementById("isEnable")
                    item.parentNode.parentNode.style = "display:none";

                }
                if (apiType == "2") {
                    $("#getApiListUrl").val("");
                    $("#importApiUrl").val("");
                    $("#getApiListUrl").attr("readonly", false);
                    $("#importApiUrl").attr("readonly", false);
                }
                else {
                    $("#getApiListUrl").val("/Biz/GetObjectDataList");
                    $("#importApiUrl").val("/Biz/ImportObjectData");
                    $("#getApiListUrl").attr("readonly", "readonly");
                    $("#importApiUrl").attr("readonly", "readonly");
                    //禁用不可以修改
                }
            });
        });
    </script>

控件不可点

获取输入控件中的name,如果为以下这几种直接禁用

$("input[name='apiType']").attr("disabled", true);
$("input[name='appName']").attr("disabled", true);
$("input[name='resourceCode']").attr("disabled", true);

当然也可以启用

$("input[name='resourceCode']").attr("disabled", false);

Ajax通信标准写法

控制器将需要访问js函数封装到链接里返回给前端

 describe = "停用";
hrefEnabled = $"<a style='cursor: pointer; ' onclick=EnabledAPI('" + item.ID + "','" + setEnabled + "','" + describe + "',this)> <button class ='btn btn-primary' style ='padding:2px 5px'>停用 </button></ a >";

前端通过点击js函数,得到参数id,enabled

   //启用按钮
        function EnabledAPI(id, enabled, describe, tr) {
            var currentTr = $(tr).parent().parent().find("td");
            resourceName = currentTr[0].innerHTML;
            //提示信息赋值,弹框
            $("#hidId").val(id);
            $("#hidEnabled").val(enabled);
            $("#sureMessage").html("是否" + describe + "API:" + resourceName + "  的状态?");
            $('#ConfirmEnabledModel').modal('show');
        }

将值传到确认启用或停用的模态框id,enabled

 // <!--设置是否启用的确认模态框-->
                    <p class="modal fade" id="ConfirmEnabledModel" tabindex="-1" role="dialog" data-backdrop="static">
                        <p class="modal-dialog" role="document">
                            <p class="modal-content">
                                <p class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title" id="gridSystemModalLabel">API注册</h4>
                                </p>
                                <input type="hidden" value="" id="hidId" />
                                <input type="hidden" value="" id="hidEnabled" />

                                <p class="modal-body">
                                    <blockquote>
                                        <p id="sureMessage"></p>
                                    </blockquote>
                                    <p class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                        <button id="ConfirmEnabled" type="button" class="btn btn-primary">确定</button>
                                    </p>
                                </p>
                            </p><!-- /.modal-content -->
                        </p><!-- /.modal-dialog -->
                    </p>

点击确认模态框后,将参数值传进来id,enabled

```
       //确定启用
        $("#ConfirmEnabled").click(function () {
            var id = $("#hidId").val();
            var enabled = $("#hidEnabled").val();
            if (id == "")
                return false;
            if (enabled == "")
                return false;
            $('#ConfirmEnabledModel').modal('hide');
            $.ajax({
                type: "post",
                dataType: "json",
                url: "/API/EnabledAPI",
                data: {
                    id: id,
                    enabled: enabled
                },
                success: function (data) {
                    $('#APIModel').modal('hide');
                    alert(data.message ? data.message : "success");
                    window.location.reload();
                },
                error: function (data) {
                    alert(data.message ? data.message : "error");
                }
            });
        });
点击复制链接 与好友分享!回本站首页
相关TAG标签 C 控件 编程 Ajax
上一篇:C#编程:DFS分布式文件系统代码实例
下一篇:C# Winform 嵌入Google浏览器 Chrome 与JS交互讲解
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站