網頁

2014年7月14日 星期一

練習題 - ASP.NET MVC 動態新增輸入框然後在後端以 FormCollection 取得資料

在課堂上介紹到在 View 所輸入的表單資料也能夠使用 FormCollection 取得輸入的資料,尤其是在前端頁面有動態新增文字輸入框的情況下,使用 FormCollection 來取資料會相當適合,因為不知道前端會增加多少個文字輸入框,所以後端也就不知道該取得多少資料。

以往的文章也都沒有寫過類似的內容,所以就把這個情境當做一個練習題。

 


開發環境:Windows 8.1

開發工具:Visual Studio 2013 Update 2

開發版本:ASP.NET MVC 5.1.2

 

這邊就不使用一個步驟一個步驟的方式去交待如何從頭到尾建立專案與建立頁面,直接進入到已經建立好的頁面,

image

一開始進入到頁面就會看到一個簡單的表單與文字輸入框,然後表單裡分別有三個 Button,「增加輸入框」「移除輸入框」「送出」,當按下「增加輸入框」之後就會在表單裡增加一個文字輸入框,

image

當按下「移除輸入框」之後就會將表單裡最後一個文字輸入框給移除,如果全部的文字輸入框都已經移除還去按「移除輸入框」,這個時候就會顯示訊息,

image

image

那麼按下「送出」就是把資料 POST 到後端,這就沒有什麼擷圖可以顯示,直接看原始碼,

View 的部份

image

View 裡面的 Javascript 程式

<script type="text/javascript">
    $(document).ready(function () {
 
        $('#textbox1').focus();
 
        $("#addButton").click(function () {
            var currentCount = parseInt($('#TextBoxCount').val(), 10);
            var newCount = currentCount + 1;
 
            var newColumnDiv =
                $(document.createElement('div')).attr("class", 'col-md-10');
 
            var newTextBoxDiv =
                $(document.createElement('div')).attr(
                {
                    "id": 'TextBoxScope' + newCount,
                    "class": "form-group"
                });
 
            newTextBoxDiv.appendTo(newColumnDiv);
 
            newTextBoxDiv.after().html(
                '<label>Textbox #' + newCount + ' : </label>' +
                '<input type="text"' +
                ' name="textbox' + newCount + '" id="textbox' + newCount + '"' +
                ' value="" class="form-control">');
 
            newColumnDiv.appendTo("#TextBoxesGroup");
            $('#TextBoxCount').val(newCount);
            $('#textbox' + newCount).focus();
        });
 
        $("#removeButton").click(function () {
            var currentCount = parseInt($('#TextBoxCount').val(), 10);
            if (currentCount == 0) {
                alert("已經沒有東西可以移除啦");
                return false;
            }
            $("#TextBoxScope" + currentCount).remove();
            var newCount = currentCount - 1;
            $('#TextBoxCount').val(newCount);
        });
 
    });
</script>

後端 Controller 的程式

image

輸入完成之後,在後端取得資料之後再把輸入的資料傳道前端頁面做顯示,這邊使用的是 TempData,然後在前端原本的頁面裡再去增加顯示的區塊,

image

 

最後的執行結果顯示就簡單地擷一張圖,

image

 

因為不牽涉到比較複雜的操作,所以直接放到 .NET Fiddle 上面,也可以讓大家實際操作以及看到操作的執行結果。

https://dotnetfiddle.net/XFwImj

image

 

以上

2 則留言:

  1. 您好,不好意思想請教您一個和此範例可能關聯性不太大的問題
    假設一個情境
    我在首頁呈現了資料搜尋結果的資料列,然後我點擊某個資料列進行換頁編輯的動作
    請問如何在編輯資料完跳回首頁時,首頁還能保留當初的搜尋結果 謝謝

    回覆刪除
    回覆
    1. Hello,你好
      其實你可以參考一下這一篇的做法「練習題 - ASP.NET MVC 資料列表顯示 + 分頁 + 查詢 + FormMethod.Post」
      http://kevintsengtw.blogspot.tw/2014/10/aspnet-mvc-formmethodpost.html
      雖然不是你所說的資料搜尋後的回原頁面並保留搜尋條件的情境,
      但是做法與觀念都是差不多的,善用物件類別,在 View 與 Controlller 之間的話,就是善用 ViewModel 的觀念,
      如果你不知道 ViewModel 的話,剛才那一篇文章裡就有提供 ViewModel 的相關文章,可以去做瞭解。

      刪除