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

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

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

 

---

開發環境：Windows 8.1

開發工具：Visual Studio 2013 Update 2

開發版本：ASP.NET MVC 5.1.2

 

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

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

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

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

View 的部份

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 的程式

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

 

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

 

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

https://dotnetfiddle.net/XFwImj

 

以上