C # programming: Use of controls and Ajax communication code instances,

C # programming: Use of controls and Ajax communication code instances,
Hide controls

Control front-end display, selection box

<P class = "form-group"> <label class = "col-sm-3 control-label"> API type </label> <p class = "col-sm-8"> <input class =" apiType "type =" radio "name =" apiType "value =" 0 "title =" Basic Data "/> basic data <input class =" apiType "type =" radio "name = "apiType" value = "1" title = "single entity" checked = "checked"/> single entity <input class = "apiType" type = "radio" name = "apiType "value =" 3 "title =" multi-entity "/> multi-entity <input class =" apiType "type =" radio "name =" apiType "value =" 2 "title = ""Business Data Interface"/> business data <span class = "help-block"> <span class = "required"> * </span> description: select the business connection type </span> </p>

If the apitype corresponding to the class changes, the function is triggered to determine which controls are displayed and hidden.

Note: whether hidden or displayed, the controls involved in the four conditions must be set in parallel, that is, they must be written even if not hidden.

<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 = ""; // you can display item = document. getElementById ("getApiListUrl") item. parentNode. parentNode. style = "display: none"; // The settings do not show 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 = 'apache']: 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"); // cannot be modified if it is disabled}); </script>

Control unavailable

Obtain the name in the input control. If the name is disabled for the following types

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

You can also enable

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

Standard Ajax Communication Writing

The Controller encapsulates the js function to the link and returns it to the front-end.

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

Click the js function at the front end to obtain the parameter id, enabled.

// Enable the function EnabledAPI (id, enabled, describe, tr) {var currentTr = $ (tr ). parent (). parent (). find ("td"); resourceName = currentTr [0]. innerHTML; // The value of the prompt message. The dialog box $ ("# hidId") appears "). val (id); $ ("# hidEnabled "). val (enabled); $ ("# sureMessage" ).html ("is it" + describe + "API:" + resourceName + "status? "); $ ('# ConfirmEnabledModel'). modal ('show ');}

Upload the value to the modal box id that is enabled or disabled, enabled

// <! -- Set whether to enable the confirmation modal box --> <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> 

Click the confirm modal box and pass the parameter value in id, enabled
''' // Confirm to enable $ ("# 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 ");}});});