Haish says:
var sizerangeMin = "<input type='text' ID='SizeMin' value='2.00' />";
var ToleranceMin = "<input type='text' ID='TolMin'+i value='1' />";
var ToleranceMax = "<input type='text' ID='TolMax'+i value='1' />";
var markup = "<tr><td>" + sizerangeMin + "</td><td>" + ToleranceMin + "</td><td>" + ToleranceMax + "</td></tr>";
$("#WireDimTbl tbody").append(markup);
});
$('#btnASizeR').click(function () {
var sizerangeMin = "<input type='text' ID='SizeMin' value='2.00' />";
var sizerangeMax = "<input type='text' ID='SizeMax' value='3.00' />";
var ToleranceMin = "<input type='text' ID='TolMin' value='1' />";
var ToleranceMax = "<input type='text' ID='TolMax' value='1' />";
1) I have gone through by your code but there are some mistakes for their textboxes ids, as you are adding multiple textboxes then it must be unique as its rendering in table so I just checked by the tr count and sets its ids accordingly on click of both btnASize and btnASizeR button click. 2) You just need to read tr from the table WireDimTbl and sets the textboxes values to the array of object till the tr count and need to add that array of object to the user object.
Here I just created similar sample as per the information you provided. I have added the dynamically generated table to the div and handled the click event of the buttons on click of the button generated in table.
Also I have added one class name as WireDimDetail and assigned the list property in user class to use it to get the WireDimDetail details on button click and on Webmethod we can easily use it as per the user added the rows of WireDimDetail. Also I checked if SizeMax not exist if it row generated by click on button btnASize using row not undefined in script and not IsNullOrEmpty in code to work it properly for SizeMax control value.
Just refer the below code for your reference and implement it as per your code logic.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var tableHtml = "<table> <tr> <td class='text-left'> <strong>Form of Supply</strong> </td> <td> <textarea rows='1' id='Frm_Supp' cols='90'>Pattern laid coils with print on the with specific weights</textarea> </td> </tr> <tr> <td class='text-left'> <strong>Wire Dimensions</strong> </td> </tr> <tr> <td class='text-left'> <strong>Standard Sizes & Tolerances</strong> </td> <td> <input type='button' id='btnASize' value='AddSize' /> <input type='button' id='btnASizeR' value='AddSizeRange' /> <input type='button' id='btnWdDelete' value='Delete' /> <table id='WireDimTbl' class='table table-bordered'> <thead> <tr> <th class='text-center'> Size Range (mm) </th> <th class='text-center'> Size Range (mm) </th> <th class='text-center'> Tolerance (-)mm </th> <th class='text-center'> Tolerance (+) mm </th> </tr> </thead> <tbody> </tbody> </table> </td> </tr> <tr> <td> <input type='button' id='btnFrmSubmit' value='FrmSubmit' /> </td> </tr> </table>";
$("[id*=mainDv]").html(tableHtml);
$('#btnASize').click(function () {
/* To check the count of already exist tr in WireDimTbl and then assigning the i value for controlids*/
var i = $("#WireDimTbl tbody>tr").length + 1;
var sizerangeMin = "<input type='text' ID='SizeMin" + i + "' value='2.00' />";
var ToleranceMin = "<input type='text' ID='TolMin" + i + "' value='1' />";
var ToleranceMax = "<input type='text' ID='TolMax" + i + "' value='1' />";
var markup = "<tr><td>" + sizerangeMin + "</td><td> </td><td>" + ToleranceMin + "</td><td>" + ToleranceMax + "</td></tr>";
$("#WireDimTbl tbody").append(markup);
});
$('#btnASizeR').click(function () {
/* To check the count of already exist tr in WireDimTbl and then assigning the i value for controlids*/
var i = $("#WireDimTbl tbody>tr").length + 1;
var sizerangeMin = "<input type='text' ID='SizeMin" + i + "' value='2.00' />";
var sizerangeMax = "<input type='text' ID='SizeMax" + i + "' value='3.00' />";
var ToleranceMin = "<input type='text' ID='TolMin" + i + "' value='1' />";
var ToleranceMax = "<input type='text' ID='TolMax" + i + "' value='1' />";
var markup = "<tr><td>" + sizerangeMin + "</td><td>" + sizerangeMax + "</td><td>" + ToleranceMin + "</td><td>" + ToleranceMax + "</td></tr>";
$("#WireDimTbl tbody").append(markup);
});
$('#btnWdDelete').click(function () {
$("#WireDimTbl tbody>tr:last").remove();
});
$('#btnFrmSubmit').click(function () {
/* Checking if more than 0 rows exists */
if ($("#WireDimTbl tbody>tr").length > 0) {
var user = {};
user.FRM_SUPP = $("[id*=Frm_Supp]").val();
/* Creating Array object as WireDimDetails to add in user object*/
var WireDimDetails = new Array();
$("#WireDimTbl tbody tr").each(function () {
var row = $(this);
/* Declare and sets the WireDimDetail object with the property which will add in WireDimDetails array object*/
var WireDimDetail = {};
var sizeMin = row.find("[id^=SizeMin]").val();
/* Checking if control exist or not else assign empty value in sizeMax*/
var sizeMax = row.find("[id^=SizeMax]") != "undefined" ? row.find("[id^=SizeMax]").val() : "";
var tolMin = row.find("[id^=TolMin]").val();
var tolMax = row.find("[id^=TolMax]").val();
/*Sets the Values of controls */
WireDimDetail.SizeMin = sizeMin;
WireDimDetail.SizeMax = sizeMax;
WireDimDetail.TolMin = tolMin;
WireDimDetail.TolMax = tolMax;
/*Add WireDimDetail object in WireDimDetails Array object*/
WireDimDetails.push(WireDimDetail);
})
/*Add WireDimDetails array of object to user object*/
user.WireDimDetails = WireDimDetails;
$.ajax({
type: "POST",
url: "CS.aspx/SaveFrmDetails",
data: JSON.stringify({ user: user }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
alert("Data has been added successfully.");
window.location.reload();
},
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.responseText);
}
});
}
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="mainDv" runat="server">
</div>
</form>
</body>
</html>
C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using System.Configuration;
using System.Data;
public partial class CS : System.Web.UI.Page
{
[WebMethod]
public static void SaveFrmDetails(User user)
{
string connectionString = ConfigurationManager.ConnectionStrings["dbpik"].ConnectionString;
string fRM_SUPP = user.FRM_SUPP;
List<WireDimDetail> wireDimDetails = user.WireDimDetails;
for (int i = 0; i < wireDimDetails.Count; i++)
{
WireDimDetail wireDimDetail = wireDimDetails[i];
string sizeMin = wireDimDetail.SizeMin;
string sizeMax = !string.IsNullOrEmpty(wireDimDetail.SizeMax) ? wireDimDetail.SizeMax : "0"; // set default value
string tolMin = wireDimDetail.TolMin;
string tolMax = wireDimDetail.TolMax;
// Your inserting code goes here.
}
}
}
public class User
{
public string FRM_SUPP { get; set; }
public List<WireDimDetail> WireDimDetails { get; set; }
}
public class WireDimDetail
{
public string SizeMin { get; set; }
public string SizeMax { get; set; }
public string TolMin { get; set; }
public string TolMax { get; set; }
}
VB.Net
Imports System.Web.Services
Partial Class VB
Inherits System.Web.UI.Page
<WebMethod()>
Public Shared Sub SaveFrmDetails(ByVal user As User)
Dim connectionString As String = ConfigurationManager.ConnectionStrings("dbpik").ConnectionString
Dim fRM_SUPP As String = user.FRM_SUPP
Dim wireDimDetails As List(Of WireDimDetail) = user.WireDimDetails
For i As Integer = 0 To wireDimDetails.Count - 1
Dim wireDimDetail As WireDimDetail = wireDimDetails(i)
Dim sizeMin As String = wireDimDetail.SizeMin
Dim sizeMax As String = If(Not String.IsNullOrEmpty(wireDimDetail.SizeMax), wireDimDetail.SizeMax, "0")
Dim tolMin As String = wireDimDetail.TolMin
Dim tolMax As String = wireDimDetail.TolMax
Next
End Sub
End Class
Public Class User
Public Property FRM_SUPP As String
Public Property WireDimDetails As List(Of WireDimDetail)
End Class
Public Class WireDimDetail
Public Property SizeMin As String
Public Property SizeMax As String
Public Property TolMin As String
Public Property TolMax As String
End Class
Screenshot
