C#编程：控件的使用及Ajax通信代码实例

控件隐藏

控件前端显示，选择框

 <div class="form-group">
 <label class="col-sm-3 control-label">API类型</label>
  <div 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>
   </div>
 </div>

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

 // <!--设置是否启用的确认模态框-->
                    <div class="modal fade" id="ConfirmEnabledModel" tabindex="-1" role="dialog" data-backdrop="static">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div 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>
                                </div>
                                <input type="hidden" value="" id="hidId" />
                                <input type="hidden" value="" id="hidEnabled" />

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

点击确认模态框后，将参数值传进来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");
                }
            });
        });