2014-04-17 51 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

相关问题