【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; ' οnclick=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"); } }); }); 

“`