Design the page:
<form id="form1" runat="server">
<div>
<center>
<table>
<tr><td> </td><td><div id="test" style="color:Green"></div></td></tr>
<tr><td>EID</td><td><asp:TextBox ID="tb" runat="server"></asp:TextBox></td></tr>
<tr><td>NAME</td><td><asp:TextBox ID="tb1" runat="server"></asp:TextBox></td></tr>
<tr><td> </td><td><asp:Button ID="btn" runat="server" Text="AddMore" Width="80"/></td></tr>
<tr><td> </td><td><table border="1" id="tbl"><tr><th>EID</th><th>NAME</th></tr></table></td></tr>
<tr><td> </td><td><input type="button" id="btn1" value="Save" style="width:80px" /></td></tr>
</table>
</center>
</div>
</form>
the page looks like:
then add the script on header tag :
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready
(
function () {
$("#btn").click
(
function () {
var _html;
_html = '<tr>';
_html += '<td>' + $("#tb").val() + '<input type="hidden" value="' + $("#tb").val() + '" name="tx_01_ID" /></td>';
_html += '<td>' + $("#tb1").val() + ' <input type="hidden" value="' + $("#tb1").val() + '" name="tx_01_Name" /></td>';
_html += '</tr>';
$('#tbl').append(_html);
return false
}
)
$("#btn1").click(function () {
data = new Array();
$("table[id*=tbl] tbody tr").each(function (index, item) {
data[index] = new Object();
data[index].id = $(item).find("input[type=hidden][name*=_ID]").val();
data[index].name = $(item).find("input[type=hidden][name*=_Name]").val();
});
saveData(data);
});
}
)
function saveData(data) {
var stringData = JSON.stringify(data);
$.ajax({
type: "POST",
contentType: "application/json",
data: "{d:" + stringData + "}",
url: "WebService.asmx/x",
dataType: "json",
success: function (data) {
$('#test').html(data.d);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
debugger;
}
});
}
</script>
add a web service on ur project the webservice code is:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Configuration;
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{
DataClassesDataContext o = new DataClassesDataContext(ConfigurationManager.ConnectionStrings["DatabaseConnectionString"].ToString());
[WebMethod]
public string x(List<EMP1> d)
{
for(int i=1;i<d.Count();i++)
{
EMP q = new EMP();
q.EID = Convert.ToInt32(d[i].ID.ToString());
q.NAME = d[i].NAME.ToString();
o.EMPs.InsertOnSubmit(q);
o.SubmitChanges();
}
return "Record save sucessfully.";
}
[Serializable]
public class EMP1
{
public int ID
{
get;
set;
}
public string NAME
{
get;
set;
}
}
}
<form id="form1" runat="server">
<div>
<center>
<table>
<tr><td> </td><td><div id="test" style="color:Green"></div></td></tr>
<tr><td>EID</td><td><asp:TextBox ID="tb" runat="server"></asp:TextBox></td></tr>
<tr><td>NAME</td><td><asp:TextBox ID="tb1" runat="server"></asp:TextBox></td></tr>
<tr><td> </td><td><asp:Button ID="btn" runat="server" Text="AddMore" Width="80"/></td></tr>
<tr><td> </td><td><table border="1" id="tbl"><tr><th>EID</th><th>NAME</th></tr></table></td></tr>
<tr><td> </td><td><input type="button" id="btn1" value="Save" style="width:80px" /></td></tr>
</table>
</center>
</div>
</form>
the page looks like:
then add the script on header tag :
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready
(
function () {
$("#btn").click
(
function () {
var _html;
_html = '<tr>';
_html += '<td>' + $("#tb").val() + '<input type="hidden" value="' + $("#tb").val() + '" name="tx_01_ID" /></td>';
_html += '<td>' + $("#tb1").val() + ' <input type="hidden" value="' + $("#tb1").val() + '" name="tx_01_Name" /></td>';
_html += '</tr>';
$('#tbl').append(_html);
return false
}
)
$("#btn1").click(function () {
data = new Array();
$("table[id*=tbl] tbody tr").each(function (index, item) {
data[index] = new Object();
data[index].id = $(item).find("input[type=hidden][name*=_ID]").val();
data[index].name = $(item).find("input[type=hidden][name*=_Name]").val();
});
saveData(data);
});
}
)
function saveData(data) {
var stringData = JSON.stringify(data);
$.ajax({
type: "POST",
contentType: "application/json",
data: "{d:" + stringData + "}",
url: "WebService.asmx/x",
dataType: "json",
success: function (data) {
$('#test').html(data.d);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
debugger;
}
});
}
</script>
add a web service on ur project the webservice code is:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Configuration;
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{
DataClassesDataContext o = new DataClassesDataContext(ConfigurationManager.ConnectionStrings["DatabaseConnectionString"].ToString());
[WebMethod]
public string x(List<EMP1> d)
{
for(int i=1;i<d.Count();i++)
{
EMP q = new EMP();
q.EID = Convert.ToInt32(d[i].ID.ToString());
q.NAME = d[i].NAME.ToString();
o.EMPs.InsertOnSubmit(q);
o.SubmitChanges();
}
return "Record save sucessfully.";
}
[Serializable]
public class EMP1
{
public int ID
{
get;
set;
}
public string NAME
{
get;
set;
}
}
}
No comments:
Post a Comment