2014-04-17 91 views
0

我有一個窗體,我使用Jquery動態添加行。DataTable等價於Jquery來存儲數據?

請看看:DEMO

現在我想保存已在我的數據庫使用的SAVE按鈕的點擊事件jQuery的Ajax調用被添加的所有行的數據。我卡住的地方是..我不知道我應該如何提取所有行的數據並將其發送到webmethod。我的意思是,它是C#我可以使用DataTable存儲所有行的數據之前,將其發送到數據庫。我想我應該創建一個由逗號和管道分隔的每行數據並將其發送到webmethod的字符串。我不確定它是否正確,以及如何做到這一點(即創建這樣一個字符串)。

HTML

<table id="field"> 
    <tbody> 
    <tr id="row1" class="row"> 
     <td> <span class='num'>1</span></td> 
     <td><input type="text" /></td> 
     <td><select class="myDropDownLisTId"> <input type="text" class="datepicker" /></select></td><td> 
      <input type="submit"></input> 
     </td> 
    </tr> 
    </tbody> 
</table> 
<button type="button" id="addField">Add Field</button> 
<button type="button" id="deleteField">Delete Field</button> 
<button type="button" id="btnsave">SAVE</button> 
+0

您可以使用Ajax調用與文本框中單擊事件.. –

+0

我都知道那。我想知道我怎樣才能創建一個字符串與每行的值。 – Arbaaz

+0

好吧,我會給代碼請使用這個,讓我知道如果你的問題是解決或不給我幾分鐘 –

回答

0

2建議:

  • 爲了保持儘可能靠近你擁有的,你可以只附上表格的形式標記,然後你可以只需提交表單(使用類似jQuery Form plugin的內容通過Ajax提交)。最棘手的部分是將數據綁定到操作參數。您可能能夠以數組的形式接收它,或者您可以默認循環訪問變量的屬性。確保爲這些字段生成適當的名稱。

  • 我認爲最簡潔的方法是讓JavaScript對象保存你的值,並從該對象生成表,並使用雙向綁定。類似於KnockoutJS將適合您的需求。用戶通過這種方式在表格中輸入數據,您就可以將其準備好進行Json序列化併發送到服務器。這是我製作的quick example

我不會推薦這種做法,但如果你想創建自己的字符串,你可以做類似的規定:

$("#btnsave").click(function() { 
    var result = ""; 
    $("#field tr").each(function (iRow, row) { 
     $("td input", row).each(function (iField, field) { 
      result += $(field).val() + ","; 
     }); 
     result = result + "|"; 
    }); 
    alert(result); 
}); 

你將不得不如果用戶類型的問題逗號。這就是爲什麼我們使用衆所周知的序列化格式在保存按鈕事件

+0

我如何創建一個字符串..每個控制值用逗號分隔每行由管道|分隔 我認爲將這樣的字符串發送到服務器會更容易。但我不確定如何通過遍歷行來形成這樣的字符串。 – Arbaaz

+0

你會重新發明輪子,但我編輯了我的答案與你想做的事情。我還使用KnockoutJS添加了一個乾淨的例子。 –

+0

我明白你的關心,但我是一個老實說。 你剛剛發佈的這段代碼似乎工作正常。你能告訴我如何排除特定類別的某些輸入元素嗎? – Arbaaz

0

使用Ajax調用... 這樣

$(document).ready(function() { 
    $('#reqinfo').click(function() { 
     // debugger; 
     var emailto = document.getElementById("emailid").value; 
     if (emailto != "") { 


      $.ajax({ 

       type: "GET", 

網址: 「/EmailService1.svc/EmailService1/emaildata?Email=」 + emailto,

   // data: dat, 
       Accept: 'application/json', 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       success: function (result) { 
       // debugger; 


       }, 
       error: function (result) { 
        // debugger; 

       } 
      }); 
     } 
     else { 
      //your validation message goes here 
      return false; 
     } 
    }); 
}); 

並將所有數據添加到quesry字符串中並將其傳輸到webservice ..

url: "/EmailService1.svc/EmailService1/emaildata?Email=" + emailto + "data1=" + data1, 
+0

我知道如何發送數據。我不知道如何提取所有行的數據並形成一個連接字符串,其中每個控件的值用逗號分隔,而行由pipe分隔。 – Arbaaz

0
<script type="text/javascript"> 
var _autoComplCounter = 0; 
function initialize3(_id) { 
    var input_TO = document.getElementById(_id); 
    var options2 = { componentRestrictions: { country: 'ID' } }; 
    new google.maps.places.Autocomplete(input_TO, options2); 
} 
google.maps.event.addDomListener(window, 'load', initialize3); 

function incrementValue() { 
    var value = parseInt(document.getElementById('number').value, 10); 
    value = isNaN(value) ? 0 : value; 
    value++; 
    document.getElementById('number').value = value; 
} 

function GetDynamicTextBox(value) { 
    var _id = "AutoCompl" + _autoComplCounter; 
    _autoComplCounter++; 

    return '<input name = "DynamicTextBox" type="text" id="' + _id + '" value = "' + value + '" onkeypress = "calcRoute();" />' + 
     '<input type="button" class="superbutton orange" value="Remove" onclick = "RemoveTextBox(this)" />' 
} 
function AddTextBox() { 
    var value = parseInt(document.getElementById('number').value, 10); 
    value = isNaN(value) ? 0 : value; 
    value++; 

    if (document.getElementById('number').value < 3) { 
     document.getElementById('number').value = value; 
     var div = document.createElement('DIV'); 
     var _id = "AutoCompl" + _autoComplCounter; 
     _autoComplCounter++; 
     var ht = '<input name = "DynamicTextBox" type="text" id="' + _id + '" value = "" onkeypress = "calcRoute();" class="clsgetids" for-action="' + _id + '" />' + 
     '<input type="button" class="superbutton orange" value="@Resources.SearchOfferRides.btnRemove" onclick = "RemoveTextBox(this); calcRoute();" />'; 
     div.innerHTML = ht; 
     document.getElementById("TextBoxContainer").appendChild(div); 
     setTimeout(function() { 
      var input_TO = document.getElementById(_id); 
      var options2 = { componentRestrictions: { country: 'ID' } }; 
      new google.maps.places.Autocomplete(input_TO, options2); 
     }, 100); 
     document.getElementById("TextBoxContainer").appendChild(div); 
    } 
    else { 
     alert('Enter only 3 stop point. !!'); 
    } 
} 

function RemoveTextBox(div) { 
    //calcStopPointRoute(); 
    var value = parseInt(document.getElementById('number').value, 10); 
    value = isNaN(value) ? 0 : value; 
    value--; 
    document.getElementById('number').value = value; 

    document.getElementById("TextBoxContainer").removeChild(div.parentNode); 
} 

function RecreateDynamicTextboxes() { 
    var values = eval('<%=Values%>'); 
    if (values != null) { 
     var html = ""; 
     for (var i = 0; i < values.length; i++) { 
      html += "<div>" + GetDynamicTextBox(values[i]) + "</div>"; 
     } 
     document.getElementById("TextBoxContainer").innerHTML = html; 
    } 
} 
    // window.onload = RecreateDynamicTextboxes; 
</script> 

,並從文本框中的值:

#region stop point 
     string[] textboxValues = Request.Form.GetValues("DynamicTextBox"); 

     if (textboxValues != null) 
     { 
      for (Int32 i = 0; i < textboxValues.Length; i++) 
      { 
       if (textboxValues.Length == 1) 
       { 
        model.OptionalRoot = textboxValues[0].ToString(); 
       } 
       else if (textboxValues.Length == 2) 
       { 
        model.OptionalRoot = textboxValues[0].ToString(); 
        model.OptionalRoot2 = textboxValues[1].ToString(); 
       } 
       else if (textboxValues.Length == 3) 
       { 
        model.OptionalRoot = textboxValues[0].ToString(); 
        model.OptionalRoot2 = textboxValues[1].ToString(); 
        model.OptionalRoot3 = textboxValues[2].ToString(); 
       } 
       else 
       { 
        model.OptionalRoot = ""; 
        model.OptionalRoot2 = ""; 
        model.OptionalRoot3 = ""; 
       } 
      } 
     } 
     #endregion 
+0

我只是想創建一個串聯的值或每個行控件,就像我在我的評論 – Arbaaz

+0

中提到的這些結果,你必須給出文本框的值,現在你可以連接文本框的值字符串.. –

0

簡短的回答:相當於在JavaScript
DataTableArray of custom object(不完全等效,但我們可以說)

你滾,將有由DataTable類支持的所有功能和特性在.NET

龍回答自己的DataTable JS類:在客戶端
(CSS)
你定義一個類MyClass和所有的值存儲在該類的對象的陣列
,然後通過該陣列stingyfying之後它在服務器端web方法

JSON.stringify(myArray); 

(codeb ehind)
你剛纔定義的Web方法,接受對象List<MyClass>

PS的列表:當調用Web方法,Asp.net自動JSON數組轉換成List<Object>Object[]

過長...答案(全解決方案)

頁的aspx:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <link href="App_Themes/SeaBlue/jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css" /> 
    <script src="Scripts/jquery-1.8.3.js" type="text/javascript"></script> 
    <script src="Scripts/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script> 
    <script src="Scripts/json2.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     function MyClass(title,option,date) { 
      this.Title = title; 
      this.Option = option; 
      this.Date = date; 
     } 

     function GetJsonData() { 
      var myCollection = new Array(); 

      $(".row").each(function() { 
       var curRow = $(this); 
       var title = curRow.find(".title").val(); 
       var option = curRow.find(".myDropDownLisTId").val(); 
       var date = curRow.find(".datepicker").val(); 

       var myObj = new MyClass(title, option, date); 
       myCollection.push(myObj); 
      }); 

      return JSON.stringify(myCollection); 
     } 

     function SubmitData() { 
      var data = GetJsonData(); 

      $.ajax({ 
       url: "testForm.aspx/PostData", 
       data: "{ 'myCollection': " + data + " }", 
       dataType: "json", 
       type: "POST", 
       contentType: "application/json; charset=utf-8", 
       success: function() { 
        alert("Success"); 
       } 
      }); 
     } 

     $(document).ready(function() { 
      filldd(); 
      CreateDP(); 
      var rowstring = "<tr class='row'><td class='number'></td><td><input type='text' class='title'/></td><td><select class='myDropDownLisTId'/><input type='text' class='datepicker'/></td><td><input type='submit'></input></td></tr>"; 
      $("#addField").click(function (event) { 
       $("#field tbody").append(rowstring); 
       filldd(); 
       CreateDP(); 

       if ($("td").hasClass("number")) { 
        var i = parseInt($(".num:last").text()) + 1; 
        $('.row').last().attr("id", "row" + i); 
        $($("<span class='num'> " + i + " </span>")).appendTo($(".number")).closest("td").removeClass('number'); 
       } 
       event.preventDefault(); 
      }); 

      $("#deleteField").click(function (event) { 
       var lengthRow = $("#field tbody tr").length; 
       if (lengthRow > 1) 
        $("#field tbody tr:last").remove(); 
       event.preventDefault(); 
      }); 

      $("#btnsave").click(function() { 
       SubmitData(); 
      }); 
     }); 

     function filldd() { 
      var data = [ 
       { id: '0', name: 'test 0' }, 
       { id: '1', name: 'test 1' }, 
       { id: '2', name: 'test 2' }, 
       { id: '3', name: 'test 3' }, 
       { id: '4', name: 'test 4' }, 
      ]; 

      for (i = 0; i < data.length; i++) { 
       $(".myDropDownLisTId").last().append(
        $('<option />', { 
         'value': data[i].id, 
         'name': data[i].name, 
         'text': data[i].name 
        }) 
       ); 
      } 
     } 

     function CreateDP() { 
      $(".datepicker").last().datepicker(); 
     } 

     $(document).on('click', 'input[type="submit"]', function() { 
      alert($(this).closest('tr')[0].sectionRowIndex); 
      alert($(this).closest('tr').find('.myDropDownLisTId').val()); 
     }); 
    </script> 
</head> 
<body> 
    <form id="frmMain" runat="server"> 
    <table id="field"> 
     <tbody> 
      <tr id="row1" class="row"> 
       <td> 
        <span class='num'>1</span> 
       </td> 
       <td> 
        <input type="text" class="title"/> 
       </td> 
       <td> 
        <select class="myDropDownLisTId"> 
        </select> 
        <input type="text" class="datepicker" /> 
       </td> 
       <td> 
        <input type="submit"></input> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
    <button type="button" id="addField"> 
     Add Field</button> 
    <button type="button" id="deleteField"> 
     Delete Field</button> 
    <button type="button" id="btnsave"> 
     SAVE</button> 
    </form> 
</body> 
</html> 

代碼隱藏:

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

    } 

    [WebMethod] 
    public static void PostData(List<MyClass> myCollection) 
    { 
     Console.WriteLine(myCollection.Count); 
    } 
} 

public class MyClass 
{ 
    string title; 

    public string Title 
    { 
     get { return title; } 
     set { title = value; } 
    } 

    string option; 

    public string Option 
    { 
     get { return option; } 
     set { option = value; } 
    } 

    string date; 

    public string Date 
    { 
     get { return date; } 
     set { date = value; } 
    } 
} 

希望這有助於

參考文獻:
Json2.js file
stringify method
define a class in js

相關問題