Mvc4+easyui-based Web development Framework Experience Summary (6)--Application of drop-down list processing in the page

In many web interface, we can see a lot of drop-down list of elements, some are fixed, some are dynamic, some are dictionary content, some are the name field in other tables, sometimes referring to foreign key ID, sometimes refers to the name of the text content, the correct rapid use of the processing of the drop-down list, Can improve the aesthetics of our program interface and friendly, this article mainly introduces in my web development framework and related extended Web applications used in some of the representative drop-down list of processing scenarios, I hope to give you a reference to learn.

1, fixed drop-down list processing

The representative fixed list has the person sex The treatment, generally is male, the female two kinds, moreover for the convenience, generally uses the text direct use, the following effect is shown.

And their page code is simple, as shown below.

<class="easyui-combobox" id="sex" name="sex" style="  width:120px; "> <option> men </option> <option> women </option> </select>    

This method is relatively simple, requires a few options to add, do not need additional JS code for binding processing, and do not require background code. However, this hard-coded approach is recommended for less, unless you need to extend only a few items in a fixed situation.

In this way, in the Easyui process, the ComboBox's control binding code is shown below.

$ ("#Sex"). ComboBox (' SetValue ', info. SEX);

And get the value of the control we will not repeat, generally through the JS code to handle them uniformly, as shown in the following code.

var postdata = $ ("#ffAdd"). Serializearray ();

Another way to fix a list is to display text that stores values, such as 0,1. As in my frame, there is the user information to modify the interface inside, whether to subscribe to the public number of information, it is stored after the value is a value, the display is text.

The interface code is shown below, which is also a fixed list, although they display different content from the background store.

                    <Tr><Th><LabelFor= "Subscribe"> whether to subscribe to the public number:</Label></Th><Tdcolspan= "3"><SelectId= "Subscribe"Name= "Subscribe"Class= "Easyui-combobox"Style= "width:150px"><OptionValue= "1" > subscription </option> <value= "0" > Cancel </option> Span style= "color: #0000ff;" ></select> &nbsp;&nbsp;&nbsp; </td> </tr>       

For such a control, the binding code is the same as above, but only the content of the binding is numeric.

$ ("#Subscribe1"). ComboBox (' SetValue ', info. Subscribe);

And if we need to display this value as text in the view view through the lable control, we just need to handle it simply.

$ ("#Subscribe2"). Text (info. Subscribe = = "1"? "Subscription": "Cancel");

2, dynamic drop-down list processing

Just said, fixed list for some general simple options, but for the need to change or more options, need to use dynamic drop-down list, dynamic drop-down list there are several ways, one is similar to dictionary binding text processing, one is bound foreign key reference name way and so on.

Let's take a look at two different ways to handle this.

1) drop-down list of dictionary text content

In many cases, we need to use a lot of dictionary content, in most cases the value of the reference dictionary (the general case is the text content) to store it. Dictionary list In many cases is very convenient, we can be in the background of the dynamic management of dictionary items, so that timely feedback to the interface elements, to achieve the dynamic display of the list content.

For example, in my Contacts editing Web interface, I need to use the contents of many dictionary items, the interface effect is as follows.

The red box above is a dynamic drop-down list item, how do we dynamically bind its content to the Web interface?

First, we need to define a dictionary function on the Controller of the dictionary view to return the JSON information to the interface, as shown in the following background code.

        ///<summary>///Gets the corresponding dictionary data according to the dictionary type, facilitates the binding of the UI control///</summary>///<param name= "Dicttypename" >Dictionary type name</param>///<returns></returns>Public ActionResult Getdictjson (StringDicttypename) {list<clistitem> treelist =New list<clistitem> (); Clistitem Pnode = new Clistitem ( "" ); Treelist.insert (0string, string> dict = bllfactory< Dictdata>foreach (string key in< Span style= "color: #000000;" > Dict. Keys) {Treelist.add (new Clistitem (key, Dict[key])); Span style= "color: #0000ff;" >return Tojsoncontent (treelist);         

The clistitem above is a custom class that contains the text and value two properties.

Above the controller function, the returned content may be the following similar format (JSON format)

[    {      text: "",      value: "    },    {      text:" Professor ",      Value:" Professor "    },    {      Text: "head Nurse", Value: "Head Nurse" }]     

The above describes the controller's processing logic and data format, then inside the view code, how to bind the dynamic list by JS code?

Since we have used the list of bound dictionaries many times, we first define a generic JS function to reduce the duplication of code, as shown below

        function Binddictitem (control, Dicttypename) {            $ (' # ' + Control). ComboBox ({                URL: '/dictdata/ Getdictjson?dicttypename= ' + dicttypename,                valuefield: ' Value ', TextField: ' Text ' });   

Then, when you need to initialize the dictionary list of the interface, call this JS function, as shown in the following code.

        //Initializing dictionary informationfunctionInitdictitem () {Binddictitem ("titles", "titles"); Binddictitem ("Rank", "title"); Binddictitem ("Importance", "important level"); Binddictitem ("Recognition", "the degree of recognition to the company")); Binddictitem ("Interestdemand", "Customer interest Appeal" ); Binddictitem ("Constellation", "Constellation"         

2) Bind foreign key reference name

After reading the above dynamic list processing, may have solved most of your problems, but sometimes we may have such a requirement, in a table need to refer to the ID of another table, but we need to be in the interface editing, visual, that is, by name to replace the display of the ID, background storage, The ID value of this control will be stored. For example, when I create a customer contact, I may need to select a customer, so I need to design a function button, pop up an interface for me to select a customer from the list, select the main interface to display the customer's name, if you have saved for editing, directly display the customer name can be, the demand effect is as follows.

After you select a customer, the effect is as follows.

Understand the above interface effect, the specific code is how to implement it?

In fact, a hidden field that needs to define an ID is used to store the database, a read-only text box to display the name, and a button to do so, some of the code is shown below.

  <Tr><Th><LabelFor= "customer_id"> Customer Name:</Label></Th><Tdcolspan= "3"><InputClass= "Easyui-validatebox"Style= "width:300px;" > readonly= "ReadOnly"Type= "Text"Id= "Customer_name"Name= "Customer_name"Data-options= "Required:true,validtype: ' length[1,50] '"/><InputType= "hidden"Style= "width:300px"Id= "customer_id"Name= "customer_id" /> a href= " Javascript:void (0) " Class=" Easyui-linkbutton " Id= "Btnselectcustomer"  Iconcls= "Icon-search" > Select customer </ a> </td> </tr>                 

Select the customer, we call a window to display the customer information, and then customer selection, the main interface to update the content, the specific JS interface code as shown below.

        //Bind select event for Customer buttonfunctionBindselectcustomerevent () {$ ("#btnSelectCustomer"). Click (function() {$.showwindow ({title: ' Select Customer '), Useiframe:True, width:900, height:700, content: ' Url:/customer/selectcustomer ', Handler: ' Dook ' // This method is in the popup page , Handler: functionfunction (win, content) {// window called when open, initialize the form content if  

If the user already has the data, if you open the interface, we will escape the name of the customer to assign to the corresponding name of the control is OK, the ID hidden control by normal assignment can be, as follows

                function (Result) {                    $ ("#Customer_Name"). Val (result);                }); 

Mvc4+easyui-based Web development Framework Experience Summary (6)--Application of drop-down list processing in the page