JS로 동적으로 폼에 요소 추가

Question

내 MySQL 테이블에 15 개의 필드를 만들었으며 최종 사용자에게 양식을 사용하여 여러 항목을 추가 할 수있는 옵션을 제공하고자합니다. 그러나 인터페이스를 깨끗하게 유지하려면 어쩌면 2-3 텍스트 상자 만 표시하고 필요에 따라 더 추가 할 수있는 단추를 제공하고 싶습니다.

자바 스크립트를 사용하여 양식에 텍스트 상자를 추가하는 것이 문제가 될 것이라고 생각하지 않지만 양식 데이터 처리기에 POST 데이터를 제출하면 정확하게 처리하는 방법이 혼란 스럽습니다. 누구든지 이것에 대해 가장 좋은 방법을 밝힐 수 있습니까?

Answer 1

모든 포함하는 일반 POST 변수를 사용해야하는 경우 양식 값을 입력하면 다음과 같이 할 수 있습니다.

서버 언어 및/또는 자바 스크립트로 텍스트 상자를 생성 할 때 서버에 보내는 방법은 name 속성을 사용합니다. 요소의 이름을 일관된 방법으로 제공하면 항목을 숫자와 결합 할 수 있습니다. 예를 들어, 사용자가 "추가"("foo"와 "bar"중 하나)를 클릭 할 때마다 2 개의 텍스트 상자를 제공하면 끝에 일치하는 숫자를 증가시킬 수 있습니다.

<input type="text" name="foo1" /><input type="text" name="bar1" /> 
<input type="text" name="foo2" /><input type="text" name="bar2" /> 
and so on 

그런 다음 서버에, 당신은 왜 당신은 ASP.NET MVC의 생각 "foo"와 "bar"

for (item in POST) { 
    if (item startswith "foo") { 
     // Extract the number at the end, and find the related "bar" 
    } 
} 

Answer 2

웹 응용 프로그램 용 ASP.NET MVC와 클라이언트 측 프레임 워크 용 jQuery를 사용한다고 가정합니다.

public class Gift 
{ 
    public string Name { get; set; } 
    public double Price { get; set; } 
} 

귀하의 초기 활동 및 데이터는 다음과 같이 될 수있다 :하자 더이 같은 모델이 있다고 가정

반면

public ActionResult Index() 
{ 
    var initialData = new[] { 
     new Gift { Name = "Tall Hat", Price = 39.95 }, 
     new Gift { Name = "Long Cloak", Price = 120.00 }, 
    }; 
    return View(initialData); 
} 

를보기이 될 수있다 :

<h2>Gift List</h2> 
What do you want for your birthday? 

<% using(Html.BeginForm()) { %> 
    <div id="editorRows"> 
     <% foreach (var item in Model) 
      Html.RenderPartial("GiftEditorRow", item); 
     %> 
    </div> 

    <input type="submit" value="Finished" /> 
<% } %> 

선물 편집기의 부분보기는 다음과 같습니다.

<div class="editorRow"> 
    <% using(Html.BeginCollectionItem("gifts")) { %> 
     Item: <%= Html.TextBoxFor(x => x.Name) %> 
     Value: $<%= Html.TextBoxFor(x => x.Price, new { size = 4 }) %> 
    <% } %> 
</div> 

키는 ASP.NET MVC에서는 표준이 아닌 "BeginCollectionItem"도우미 메서드입니다. 그것은 가변 길이 모델에 대한 몇 가지 키를 생성합니다. 나중에 파일에 대한 링크를 추가하겠습니다. 핸들러는 다음과 같습니다

[HttpPost] 
public ActionResult Index(IEnumerable<gift> gifts) 
{ 
    // To do: do whatever you want with the data 
} 

당신은 텍스트 상자의 값 가득이 방법으로 선물의 목록을 얻을. 또 하나 개의 항목을 추가하려면, 당신은이보기에 아약스 요청을 보낼 필요가 :

는 희망이 도움이 출처 : http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/ 다운로드 : http://blog.codeville.net/blogfiles/2010/January/ListEditorDemo.zip