表單配置與資料傳送 - HtmlHelper

ASP.NET Core Web 應用開發–使用 MVC 框架 / PART II MVC 的細節 / 控制器與檢視資料傳送 / 表單配置與資料傳送 - HtmlHelper

以網頁為基礎的Web應用,由要求與回應(request/response)機制建構其運作流程,其中伴隨著資料的傳送。

前述討論的ViewBag與ViewData,在伺服器回應(response)程序執行的過程中,封裝資料隨著回應傳送至客端,反過來如果是從客戶端傳送要求(request)至伺服器的程序,可以透過在HTML配置form元素,建立網頁表單,提供資料傳送所需的操作支援。

以下是檢視中配置表單的語法:

<pre class="kt-pre-code">@using(Html.BeginForm()) { // 表單內容 … }

Html.BeginForm()是Razor語法中的HtmlHelper方法,這會在檢視執行完畢之後,轉換成為HTML網頁時,建立需要的form元素配置,轉換如下:

<form action=url method="post">
    
</form>

現在建立一個控制器檔案FotmController.cs,開啟其中的Index方法,建立對應的View檔案index.cshtml,配置BeginForm方法建立form元素,畫面如下:

其中配置一個submit按鈕,接下來於瀏覽器檢視其內容,內容如下:

切換至網頁原始碼介面,內容如下:

其中BeginForm()產生了一組對應的form元素,而「提交」按鈕則維持原來的input元素。

請特別注意其中的action屬性是「/Form/Index」,當使用者按下「提交」按鈕,會將form元素中輸入的值,傳送回伺服器,找到FormController.cs控制器檔案,並傳入其中的動作方法Index。

mthod屬性則預設為「post」,表示將以post方式傳送form元素的表單資料。

form元素action屬性

Html.BeginForm()沒有任何設定的前提下,action屬性預設是回傳此檢視的動作方法路徑,例如這裏的「/Form/Index」,對應至FormController.cs控制器檔案中的動作方法Index。

於FormDemo控制器中,建立一組新的動作方法Hello,並且建立其對應的檢視檔案Hello.cshtml,在預設的情形下只有一個hello標題。

現在切換回到Index.cshtml, 調整其中的 Html.BeginForm()如下:

@using (Html.BeginForm("Hello","Form"))
{
    <input type="submit"  />
}

第一個參數為Hello,第二個參數則是Form,完成這組設定,接下來當使用者按下表單中配置的Hello傳送按鈕之後,會傳送一個要求至伺服器,執行Form控制器中的Hello動作方法。

重新於瀏覽器載入Index.cshtml,將其切換至網頁原始碼找到其中的form元素設定:

<form action="/Form/Hello" method="post">

這一次的action是 /Form/Hello ,現在如前述按下「提交」按鈕,會出現以下的畫面:

觀察網址列,此次結果是Form/Hello,畫面是Form控制器中,Hello動作方法回傳的檢視Hello.cshtml執行之後的HTML網頁,其中只有Hello標題字串。

表單除了指定要執行的控制器與動作方法,通常需要於其中配置input元素以支援資料的回傳,輸入input元素的資料,會在要求被送出時一併回傳,而伺服器端則於動作方法裏接收回傳的資料以進行處理,以下持續來看這一部份的設計。

表單與資料回傳

以下是HTML網頁的input元素配置:

<input type="text" />

其中的type="text" 在網頁上顯示一組文字方塊,以提供使用者輸入特定文字資料內容所需的操作介面。

以下的HtmlHelper方法,支援input元素的建立:

@Html.TextBox("msg","Hello")

其中第一個參數,表示input元素的id與name屬性值,第二個參數則是文字方塊要顯示的文字內容,這會轉換成為以下的HTML內容:

<input id="msg" name="msg" type="text" value="Hello" />

現在於控制器FormController.cs中,新增動作方法-InputDemo()與Hmsg():

public IActionResult InputDemo()
{
    return View();
}
public IActionResult Hmsg(string msg)
{
    ViewBag.inputmsg = msg;
    return View();
}

第二個動作方法中有一個參數msg,接受網頁中傳送進來的資料。

分別針對兩組動作方法,建立對應的檢視檔案,在InputDemo.cshtml中,配置如下的內容:

<h1>InputDemo</h1>


@using (Html.BeginForm("Hmsg","Form"))
{
    @Html.TextBox("msg","Hello") 
    
    <input type="submit" />
}

@Html.TextBox() 會在表單建立文字方塊,請特別注意Html.BeginForm()當中的兩組參數,如前述說明的,使用者按下「提交」按鈕之後,將產生要求並回傳至Hmsg()動作方法,而用者於文字方塊中輸入的文字,將會以@Html.TextBox()第一個參數msg為名稱伴隨著要求一併進行回傳。

回到上述動作方法Hmsg()中的參數msg,將會取得回傳的文字方塊的值,其中設定給ViewBag.inputmsg,新增對應的檢視檔案,並且於其中配置以下的內容:

<h1>Hmsg</h1>

<p>@ViewBag.inputmsg</p>

其中引用@ViewBag.inputmsg顯示字串內容,於瀏覽器顯示結果畫面如下:

於文字方塊輸入訊息文字,按一下「提交」按鈕,其中的文字字串「Hello HTML」傳送回動作方法Hmsg(),回傳檢視顯示結果畫面如下:

現在畫面上可以看到「Hello HTML」訊息文字。

以下是範例運作的流程:

1. 動作方法Input()檢視執行,形成網頁於於瀏覽器載入。

2. 按下「提交」按鈕,文字方塊的內容文字回傳至Hmsg()動作方法,並傳入參數msg。

3. ViewBag.Inputmsg儲存msg的值,在Hmsg()動作方法回傳的檢視中轉換成為對應的字串,形成網頁內容。

4. 網頁最後於瀏覽器載入顯示。

HtmlHelper方法協助開發人員動態建立網頁內容,但是這種語法對於前端網頁的設計並不友善,ASP.NET Core進一步的提供「表單標籤協助程式」,以屬性設定模式支援表單內容的建立,後續針對這一部份持續進行討論。

沒有留言: