C # WeChat portal and application development (9)-WeChat portal menu management and submission to WeChat Server

You can customize menus for public accounts (including service numbers and subscription numbers). To facilitate management, we usually manage and maintain menu data locally, update them to the server. Based on this method, this article describes how to submit a menu in my portal platform management system to the server. The portal application management system adopts the MVC + EasyUI-based route, because most domain name servers can only support. NET4.0. Therefore, based on MVC3 and C #4.0, it can be basically deployed in any.. NET Server.

1. Menu requirements and related Interface Design

You can manage the menus of public accounts locally through the website to maintain the hierarchical relationship between them. due to strict requirements on custom menus, the following are requirements for custom menus:

Currently, a custom menu can contain up to three level-1 menus, and each level-1 menu can contain up to five level-2 menus. A level-1 menu can contain up to four Chinese characters, and a level-2 menu can contain up to seven Chinese characters. The extra content will be replaced.

Therefore, as agreed, do not cross-border menu. Otherwise, some errors may be returned when you submit the menu to the server. When creating a local menu management, pay attention to the details. In an earlier article, I also introduced some content of the custom menu. You can review C # development portal and application (6)-portal menu management operations. this document describes how to submit a menu to the server by calling the previously described menu interface API in my platform management system.

According to the custom menu requirements, in the management system, the basic menu interfaces are designed as follows.

The main menu management interface is as follows.

The Interface Design for adding menus is as follows:

The menu modification interface is as follows:

The menu definition is stored in the database. To submit the menu to the server and take effect, you need to call the API for processing, I added a method to the Controller on the page to submit to the server.

 

2. Submit the menu to the server

The above interfaces are mainly used to maintain and manage menus Based on menu properties. Our ultimate goal is to put them on the server for us to handle customer-related events.

Submit menu operations. We can use JQuery Ajax to submit the menu on the MVC View page (provided that the corresponding processing is added to the Controller, which will be introduced later ), the script code is as follows.

// Click the event function BindSubmitEvent () {$ ("# btnSubmit") bound to the submit button "). click (function () {$. messager. confirm ("Submit menu confirmation", "Are you sure you want to submit the menu to the server? ", Function (action) {if (action) {// submit data $. ajax ({url :'/Menu/UpdateWeixinMenu', Type: 'post', dataType: 'json', success: function (data) {if (data. success) {$. messager. alert ("prompt", "menu submitted successfully");} else {$. messager. alert ("prompt", "failed to submit menu:" + data. errorMessage) ;}}, data :''});}});});}

The above red code is the method defined in the Controller of MVC. We only need to call the Controller method through the POST method to submit the menu to the server, as for the details, we can move it to the Controller or the lower layer for processing. The page does not need to involve too much logic.

The UpdateWeixinMenu method code of the Menu controller above is as follows (mainly based on the development model I mentioned earlier ).

/// <Summary> /// update menu /// </summary> /// <returns> </returns> public ActionResult UpdateWeixinMenu () {string token = base. getAccessToken (); MenuListJson menuJson = GetWeixinMenu (); IMenuApi menuApi = new MenuApi (); CommonResult result = menuApi. createMenu (token, menuJson); return ToJsonContent (result );}

The methods above are described one by one here. GetAccessToken is mainly used to obtain the access token for the current operation. Here, the operation can be cached using the cache. Otherwise, the AccessToken is frequently obtained. After the specified number of times per day, it cannot be reused on the current day.

The GetWeixinMenu method encapsulates a function to obtain the constructed custom menu data for convenience. The Code is as follows.

/// <Summary> /// generate the Json data of the menu /// </summary> /// <returns> </returns> private MenuListJson GetWeixinMenu () {MenuListJson menuJson = new MenuListJson (); List <MenuNodeInfo> menuList = BLLFactory <Menu>. instance. getTree (); foreach (MenuNodeInfo info in menuList) {ButtonType = (info. type = "click ")? ButtonType. click: ButtonType. view; string value = (type = ButtonType. click )? Info. key: info. url; MenuJson weiInfo = new MenuJson (info. name, type, value); AddSubMenuButton (weiInfo, info. children); menuJson. button. add (weiInfo);} return menuJson ;}

 

        private void AddSubMenuButton(MenuJson menu, List<MenuNodeInfo> menuList)        {            if (menuList.Count > 0)            {                menu.sub_button = new List<MenuJson>();            }            foreach (MenuNodeInfo info in menuList)            {                ButtonType type = (info.Type == "click") ? ButtonType.click : ButtonType.view;                string value = (type == ButtonType.click) ? info.Key : info.Url;                MenuJson weiInfo = new MenuJson(info.Name, type, value);                menu.sub_button.Add(weiInfo);                AddSubMenuButton(weiInfo, info.Children);            }        }

 

The above code is to convert the locally stored MenuNodeInfo data to the custom menu entity MenuJson through recursive traversal, so that we can call the API very conveniently, this function is mainly responsible for constructing the corresponding entity information. As for calling the API to submit the menu, it is better to let the API handle it yourself. Their code is as follows (that is, part of the code of the above function ).

        IMenuApi menuApi = new MenuApi();        CommonResult result = menuApi.CreateMenu(token, menuJson);        return ToJsonContent(result);

The final result is to return a common result CommonResult, which is a result object that is very convenient for script processing. If there is an error, an error is prompted. Otherwise, it is convenient to determine the Boolean value, that is, the above Page code script.

Success: function (data) {if (data. success) {$. messager. alert ("prompt", "menu submitted successfully");} else {$. messager. alert ("prompt", "failed to submit menu:" + data. errorMessage );}},

Through the above code, we can implement the front-end MVC View Interface, call the encapsulated API in the background, and implement menu submission.

If you are interested in or experience the relevant customer service response functions, you can follow my knowledge. For specific results, you can follow my portal: Guangzhou aiqidi, or scan the following QR code to learn more.

 

If you are interested in this series, you can follow my other articles. The series are as follows:

C # development portal and application (8)-portal application management system function Introduction

C # development portal and application (7)-Multi-customer service functions and development integration

C # development portal and application (6)-portal menu management operations

C # development portal and application (5) -- User Group Information Management

C # development portal and application (4) -- Focus on the user list and detailed information management

C # development portal and application (3) -- Response to text messages and text messages

C # development portal and application (2) -- Message Processing and response

C # development portal and application (1) -- getting started with Interfaces