동적 양식 필드를 데이터베이스에 추가하기

Question

나는 이것을 해결하는 방법에 대해 약간의 아이디어를 가지고 있지만, 상대적으로 공통적 인 일이되어야하며 그것을 해결할 수있는 '표준'방법이 있는지 궁금해했습니다.

기본적으로 jQuery AJAX를 사용하여 양식 필드를 가져 와서 데이터베이스에 넣는 ASP.NET 페이지에 게시하는 양식이 HTML 페이지에 있습니다.

양식 자체에는 기사 제목, 기사 콘텐츠 및 날짜와 같은 표준 필드가 포함되어 있습니다. 그러나 양식을 사용하면 작성자 이름, 작성자 전자 메일 주소, 작성자 나이를 포함하여 수많은 작성자 세부 사항을 추가 할 수 있습니다. 따라서 양식에서 제목과 내용 필드를 채우고 jQuery.clone()을 사용하여 동적으로 작성되는 필드가있는 하나 이상의 작성자를 추가 할 수 있습니다.

알 수없는 작성자가 있으므로 게시물 형식을 허용하는 .NET 컨트롤은 수신 할 필드가 무엇인지 알지 못합니다.

표준 양식 세부 정보가 '기사'라는 하나의 테이블에 추가됩니다. 작성자는 각각 '작성자'라는 다른 테이블에 개별적으로 추가됩니다.

그래서 이런 유형의 문제를 처리하는 가장 좋은 방법은 무엇입니까?

여기에 대한 조언을 주셔서 감사합니다.

편집 :

는 다음과 같이, 첫째로, 나는 증분 번호로 저자 양식 필드의 각각의 이름을 수 ...이 내 초기 아이디어를 추가하려면 : 또한

<fieldset> 
    Author 1 name: <input name="name-1" /><br /> 
    Author 1 email: <input name="email-1" /><br /> 
    Author 1 age: <input name="age-1" /> 
</fieldset> 
<fieldset> 
    Author 2 name: <input name="name-2" /><br /> 
    Author 2 email: <input name="email-2" /><br /> 
    Author 2 age: <input name="age-2" /> 
</fieldset> 

과 새 저자 필드 세트가 jQuery 스크립트에 의해 추가/제거 될 때 증가/감소되는 'number-of-authors'라는 숨겨진 필드가 있습니다. 그런 다음 양식 게시물을받는 .NET 코드에서 0부터 x까지의 각 양식 필드를 반복 할 수 있습니다 (여기서 x는 'number-of-authors'의 값입니다.) 여기의 어려움은 다시 색인화해야합니다. 예를 들어, 사용자가 첫 번째 집합을 삭제할 때 필드 집합이 제거 될 때 양식 필드 각각

제 생각으로 jQuery 직렬화를 사용하여 양식 필드 값을 단일 문자열로 serialize 한 다음 처리 할 수 ​​있습니다 다시 .NET 코드에서 개체에 해당 문자열. 난 정말이 작업을 수행하는 방법을 알고하지 않지만, 나는 그것이 가능할 것이다 확신합니다.

사람들의 조언이 상황에서 무엇을 할 것인가?

Answer 1

동적 tabl을 읽을 수 없으므로 e를 다시 게시 할 때는 일반적으로 모든 행을 개체로 읽고이를 WebMethod 또는 WCF 서비스의 서버로 다시 전달합니다. Ajax 양식과 전통적인 다시 게시 양식 모두에 대해 이와 동일한 기술을 사용합니다.

다음은 내가하는 일에 대한 간단한 요약입니다.

HTML

<table class="mediumTable" id="PartTable"> 
    <thead> 
     <tr class="rowHeader"> 
      <th>Part </th> 
      <th>Price </th> 
      <th>UOM </th> 
      <th>Apply Date </th> 
      <th>Remarks </th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Part12345</td> 
      <td>0.298</td> 
      <td>1</td> 
      <td>5/31/2012</td> 
      <td></td> 
     </tr> 
    </tbody> 
</table> 

자바 스크립트

// Read a row in View Mode into a Cross Object 
    function GetRowAsObject(rowNum) { 
     var row = $('#PartTable tbody tr').eq(rowNum); 

     var cross = {}; 

     cross.Part = row.find('td:eq(1)').text(); 
     cross.Price = row.find('td:eq(2)').text(); 
     cross.UOM = row.find('td:eq(3)').text(); 
     cross.ApplyDate = row.find('td:eq(4)').text(); 
     cross.Remarks = row.find('td:eq(5)').text(); 

     return cross; 
    } 

    // Read all rows into Cross Object Array 
    function GetAllViewRowsAsCrossObjects() { 
     var parts = []; 

     $('#PartTable tbody tr').each(function (index, value) { 
      var part = GetRowAsObject(index); 
      parts.push(row); 
     }); 

     return parts; 
    } 

    // Post all rows to the server and put into Cache 
    function PostTable() { 
     var batchId = getParameterByName('id'); 
     var jsonRequest = { crosses: GetAllViewRowsAsCrossObjects(), batchId: batchId}; 

     $.ajax({ 
      type: 'POST', 
      url: 'PartsForm.aspx/SaveParts', 
      data: JSON.stringify(jsonRequest), 
      contentType: 'application/json; charset=utf-8', 
      dataType: 'json', 
      async: false, 
      success: function (data, text) { 
       // Do Something 
      }, 
      error:function (request, status, error){ 
       // Do Something 
      } 
     }); 

코드

public partial class Part3 : System.Web.UI.Page 
{ 
    protected void Page_Load(object sender, EventArgs e) 
    { 
    } 

    /// <summary> 
    /// This is a Ajax WebMethod that can be called via jQuery. 
    /// </summary> 
    /// <param name="crosses">Array of Cross Objects</param> 
    /// <param name="batchId">Batch number to apply to all parts</param> 
    /// <returns></returns> 
    [WebMethod] 
    public static bool SaveParts(List<Cross> crosses, int batchId) 
    { 
     // Save Parts to the DB 

     return true; 
    } 
} 

// Data Transfer Object, must match the object sent from the client 
public class Cross 
{ 
    public string Part { get; set; } 
    public double Price { get; set; } 
    public int UOM { get; set; } 
    public DateTime ApplyDate { get; set; } 
    public string Remarks { get; set; } 
}