golang Beego架構之HTML表單中的select标簽元件的處理

   用Beego來進行web開發，對每個頁面都可建立一個YourController類型，并匿名包含beego.Controller來達到繼承beego.Controller的效果。以YourController為receiver重寫beego.Controller的Get，Post等方法。當網頁請求為Get/Post，則執行該頁面YourController的Get()/Post()方法。

   在對應頁面的Controller的Get()方法中，往資料Data寫入category的執行個體切片cates：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<code>func(</code><code>this</code> <code>*YourController)Get() {</code>

<code>        </code><code>this</code><code>.TplNames = </code><code>"yourPage.html"</code>

<code>    </code><code>cates := []*category{</code>

<code>        </code><code>&amp;category{</code><code>"-1"</code><code>, </code><code>true</code><code>, </code><code>"請選擇"</code><code>},</code>

<code>        </code><code>&amp;category{</code><code>"golang"</code><code>, </code><code>false</code><code>, </code><code>"golang"</code><code>},</code>

<code>        </code><code>&amp;category{</code><code>"Java"</code><code>, </code><code>false</code><code>, </code><code>"Java"</code><code>},</code>

<code>        </code><code>&amp;category{</code><code>"C/C++"</code><code>, </code><code>false</code><code>, </code><code>"C/C++"</code><code>},</code>

<code>    </code><code>}</code>

<code>                                                                                                                                                                                                                                                                                                                                                                                                                                                              </code> 

<code>    </code><code>this</code><code>.Data[</code><code>"Cates"</code><code>] = cates</code>

<code>}</code>

<code>                                                                                                                                                                                                                                                                                                                                                                                                                                                             </code> 

<code>type category struct {</code>

<code>    </code><code>Id         string</code>

<code>    </code><code>IsSelected bool</code>

<code>    </code><code>Value      string</code>

   對應的HTML模闆中：

<code>&lt;</code><code>select</code> <code>class</code><code>=</code><code>"form-control input-sm"</code> <code>name</code><code>=</code><code>"category"</code> <code>id</code><code>=</code><code>"category"</code> <code>style</code><code>=</code><code>"width: 120px;"</code><code>&gt;</code>

<code>    </code><code>`range `.`Cates`</code>

<code>    </code><code>&lt;</code><code>option</code> <code>value=``.`Id` `if `.`IsSelected` </code><code>select</code><code>=</code><code>"selected"</code><code>`end`&gt;``.`Value`&lt;/</code><code>option</code><code>&gt;</code>

<code>                                                                                                                                                                                                                                                                                                                                                                                                                                                     </code> 

<code>    </code><code>`end`</code>

<code>&lt;/</code><code>select</code><code>&gt;</code>

   HTML中用`range `.`Cates`來周遊golang傳來的Data(此處.Cates傳來的是Get方法中的Data["Cates"])，而``.`Id`,``.`IsSelected`,``.`Valuse`分别為golang中的類型category的三個字段。當Method為Get，頁面渲染如下截圖：

<a href="http://s3.51cto.com/wyfs02/M01/12/17/wKiom1L42gvhIkOTAACGMPlNuOM236.jpg" target="_blank"></a>

   在上圖中，點選“送出”按鈕，用戶端向伺服器發送Post請求,讓我們看下該頁面的Post表單：

   我們看到，form表單中，select元件設定id，name為“category”,當使用者點選了“送出”，向伺服器發送Post請求送出該表單，Beego中該頁面Controller的Post()方法可通過this.input().Get("category")來過得select中category的value值，這些值就是被選中option的value值：

<code>func (</code><code>this</code> <code>*YourController) Post() {</code>

<code>    </code><code>this</code><code>.TplNames = </code><code>"yourPage.html"</code>

<code>    </code><code>this</code><code>.Ctx.Request.ParseForm()</code>

<code>    </code><code>category := </code><code>this</code><code>.Input().Get(</code><code>"category"</code><code>)</code>

<code>    </code><code>fmt.Println(</code><code>"caterogy value:"</code><code>, category)</code>

<code>    </code><code>this</code><code>.Redirect(</code><code>"/category"</code><code>, </code><code>301</code><code>)</code>

<code>    </code><code>return</code>

   選擇golang，點選“送出”，背景輸出：

<a href="http://s3.51cto.com/wyfs02/M00/12/18/wKioL1L43iLTJuOOAACtbjMrad4237.jpg" target="_blank"></a>

   注意，select預設值是最上面的請選擇，故再擊送出按鈕時要通過html頁面内javascript函數 check();"來判斷select是否做出正确選擇，check()為一個hmtl嵌套的js腳本函數：

<code>function</code> <code>check() {</code>

<code>    </code><code>if</code> <code>(</code><code>'-1'</code> <code>== $(</code><code>'#category'</code><code>).val()) {</code><code>//select的value值為-1</code>

<code>        </code><code>alert(</code><code>"請選擇文章創作類型"</code><code>);</code>

<code>        </code><code>$(</code><code>'#category'</code><code>).focus();</code>

<code>        </code><code>return</code> <code>false</code><code>;</code>

<code>    </code><code>return</code> <code>true</code><code>;</code>

<code></code>

本文轉自 ponpon_ 51CTO部落格，原文連結：http://blog.51cto.com/liuxp0827/1357863，如需轉載請自行聯系原作者