■ 순수 HTML 태그를 사용해 폼을 구성하는 방법을 보여준다.
▶ Controllers/TestController.cs
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
using Microsoft.AspNetCore.Mvc; namespace TestProject.Controllers { /// <summary> /// 테스트 컨트롤러 /// </summary> public class TestController : Controller { //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Public #region 인덱스 페이지 처리하기 - Index() /// <summary> /// 인덱스 페이지 처리하기 /// </summary> /// <returns>액션 결과</returns> public IActionResult Index() { return View(); } #endregion #region 완료시 페이지 처리하기 - Completed(name, content) /// <summary> /// 완료시 페이지 처리하기 /// </summary> /// <param name="name">성명</param> /// <param name="content">내용</param> /// <returns>액션 결과</returns> public IActionResult Completed(string name, string content) { ViewBag.Name = name; ViewBag.Content = content; return View(); } #endregion } } |
▶ Views/Test/Index.cshtml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
@{ Layout = null; } <!DOCTYPE html> <html> <head> <title>순수 HTML 태그를 사용해 폼 구성하기</title> <script> function CheckForm() { var name = document.getElementById("name" ); var content = document.getElementById("content"); if (name.value.length < 1 || content.value.length < 1) { window.alert("성명과 내용을 입력해 주시기 바랍니다."); name.focus(); name.select(); return false; } return true; } </script> </head> <body> <p>순수 HTML 태그를 사용해 폼 구성하기</p> <hr /> <form action="/Test/Completed" method="post" onsubmit="return CheckForm();"> <p>성명 <input type="text" name="name" id="name" value="" /></p> <p>내용 <input type="text" name="content" id="content" value="" /></p> <p><input type="submit" value="제출" /></p> </form> </body> </html> |
▶ Views/Test/Completed.cshtml
1 2 3 4 5 6 7 |
@{ Layout = null; } <p>순수 HTML 태그를 사용해 폼 구성하기</p> <hr /> <p>성명 : @ViewBag.Name</p> <p>내용 : @ViewBag.Content</p> |