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

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

using System;
using System.ComponentModel.DataAnnotations;

namespace HelloWorldMvcApp
{
	
	public class SampleViewModel
	{			
		//Ignore this class
		
		public string Question { get; set; }
		public string Answer { get; set; }
	}
}

Model

​x
 
using System;
using System.ComponentModel.DataAnnotations;
​
namespace HelloWorldMvcApp
{
    
    public class SampleViewModel
    {           
        //Ignore this class
        
        public string Question { get; set; }
        public string Answer { get; set; }
    }
}

@{
	Layout = null;
}

<!DOCTYPE html>
<!-- template from http://getbootstrap.com/getting-started -->

<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>mrkt demo</title>

		<!-- CSS Includes -->
		<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
		
		<style type="text/css">

			.field-validation-error {
				color: #ff0000;
			}

		</style>
	</head>
	
	<body>
		<div class="container">
			<p></p>
			@if (TempData["InputResult"] != null)
			{
				<div class="alert alert-warning alert-dismissable">
					<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
					<strong>輸入內容：</strong> 
					<ul>
						@foreach (var item in (List<string>)TempData["InputResult"])
						{
							<li>@item</li>
						}
					</ul>
				</div>
			}
			<p></p>
			@using (Html.BeginForm())
			{
				<div class="well" role="form">
					<div class="row" id="TextBoxesGroup">
						<div class="col-md-10">
							<div id="TextBoxScope1" class="form-group">
								<label>Textbox #1 : </label>
								<input type="text" id='textbox1' name="textbox1" class="form-control">
							</div>
						</div>
					</div>
			
					<hr />
					@Html.Hidden("TextBoxCount", 1)
					<input type="button" class="btn btn-primary" value="增加輸入框" id='addButton'>
					<input type="button" class="btn btn-info" value='移除輸入框' id='removeButton'>
					<input type="submit" class="btn btn-success" value="送出" />
				</div>
			}
		</div>

		<!-- JS includes -->
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
		<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
	
		<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
		<script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script>
		
		<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>
	</body>
</html>

View

 
@{
    Layout = null;
}
​
<!DOCTYPE html>
<!-- template from http://getbootstrap.com/getting-started -->
​
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>mrkt demo</title>
​
        <!-- CSS Includes -->
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
        
        <style type="text/css">
​
            .field-validation-error {
                color: #ff0000;
            }
​
        </style>
    </head>
    
    <body>
        <div class="container">
            <p></p>
            @if (TempData["InputResult"] != null)
            {
                <div class="alert alert-warning alert-dismissable">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                    <strong>輸入內容：</strong> 
                    <ul>
                        @foreach (var item in (List<string>)TempData["InputResult"])
                        {
                            <li>@item</li>
                        }
                    </ul>
                </div>
            }
            <p></p>
            @using (Html.BeginForm())
            {
                <div class="well" role="form">
                    <div class="row" id="TextBoxesGroup">
                        <div class="col-md-10">
                            <div id="TextBoxScope1" class="form-group">
                                <label>Textbox #1 : </label>
                                <input type="text" id='textbox1' name="textbox1" class="form-control">
                            </div>
                        </div>
                    </div>
            
                    <hr />
                    @Html.Hidden("TextBoxCount", 1)
                    <input type="button" class="btn btn-primary" value="增加輸入框" id='addButton'>
                    <input type="button" class="btn btn-info" value='移除輸入框' id='removeButton'>
                    <input type="submit" class="btn btn-success" value="送出" />
                </div>
            }
        </div>
​
        <!-- JS includes -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    
        <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
        <script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script>
        
        <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>
    </body>
</html>
​

using System;
using System.Web.Mvc;
using System.Collections.Generic;

namespace HelloWorldMvcApp
{
	public class HomeController : Controller
	{
		[HttpGet]
		public ActionResult Index()
		{
			return View();
		}


        [HttpPost]
        public ActionResult Index(FormCollection collection)
        {
            var inputCount = 0;
            var inputValues = new List<String>();

            if (int.TryParse(collection["TextBoxCount"], out inputCount))
            {
                for (int i = 1; i <= inputCount; i++)
                {
                    if (!string.IsNullOrWhiteSpace(collection["textbox" + i]))
                    {
                        inputValues.Add(collection["textbox" + i]);
                    }
                }
            }

            TempData["InputResult"] = inputValues;

            return View();
        }
	}
}

Controller

 
using System;
using System.Web.Mvc;
using System.Collections.Generic;
​
namespace HelloWorldMvcApp
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            return View();
        }
​
​
        [HttpPost]
        public ActionResult Index(FormCollection collection)
        {
            var inputCount = 0;
            var inputValues = new List<String>();
​
            if (int.TryParse(collection["TextBoxCount"], out inputCount))
            {
                for (int i = 1; i <= inputCount; i++)
                {
                    if (!string.IsNullOrWhiteSpace(collection["textbox" + i]))
                    {
                        inputValues.Add(collection["textbox" + i]);
                    }
                }
            }
​
            TempData["InputResult"] = inputValues;
​
            return View();
        }
    }
}

View in Full Screen

name:Item3,Item1,Item2
letter:A,A,B
number:1,3,2

Last Run:	5:01:02 pm
Compile:	0.218s
Execute:	0.007s
Memory:	8kb
CPU:	0.016s

View IL Code