Jquery Crud Operation Sample
aspx Code:-
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Script/jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
LoadData();
});
var filldata = null;
function LoadData() {
$.ajax({
type: "POST",
async: true,
url: "JqueryCrud.aspx/GetAllData",
data: {},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (list) {
$("#list").append("<ul id='bullets'></ul>");
alert(list.d.length);
// for (i = 0; i < list.d.length; i++) {
// $("#bullets").append("<li>" + list.d[i].Topping
// + " : " + list.d[i].Slices + "</li>");
// }
// $("#Something").closest("tr").remove();
document.getElementById("Something").deleteTHead();
for (var i = document.getElementById("Something").rows.length; i > 0; i--) {
document.getElementById("Something").deleteRow(i - 1);
}
var resultAsJson = list.d
var items = "";
if (resultAsJson.length) {
for (var i in resultAsJson) {
var Food = resultAsJson[i];
items += "<option value='" + Food.StateId + "'>" + Food.State1 + "</option>";
}
$("#mydrop").html(items);
}
$("#Something").append("<thead style='background-color:Red;'><td>Food</td><td>No.</td></thead>");
for (var i in resultAsJson) {
var Food = resultAsJson[i];
var user_name = Food.State1;
$("#Something").append("<tr style='background-color:Silver;'><td>" + Food.StateId
+ "</td> <td>" + Food.State1 + "</td> <td><button name=" + Food.StateId + " onclick='Click(" + Food.StateId + ")'><img src='Image/LoginWhite1.jpg' width='32' height='32' alt='submit' border='0' /></button></td></tr>");
// Here you append that value to your label
}
// $("#row").css('background-color', 'silver'); -->reflact only one row.
},
error: function (e) {
$("#Something").html("There was an error retrieving records");
}
});
}
function Click(argument) {
var param = 'Id=' + argument;
alert(param);
$.ajax({
type: "Post",
url: "JqueryCrud.aspx/DeleteData",
data: "{'Id': '" + argument + "'}",
contentType: "application/json; charset=utf-8",
datatype: "json",
success: function (json) {
alert(json.d);
// var tr = $(this).closest('tr')
// alert(tr);
alert(json.d.length);
filldata = "data";
//Fill the data
document.getElementById("Something").deleteTHead();
for (var i = document.getElementById("Something").rows.length; i > 0; i--) {
document.getElementById("Something").deleteRow(i - 1);
}
var resultAsJson = json.d
$("#Something").append("<thead style='background-color:Red;'><td>Food</td><td>No.</td></thead>");
alert(resultAsJson);
for (var i in resultAsJson) {
var Food = resultAsJson[i];
var user_name = Food.State1;
alert(i);
$("#Something").append("<tr style='background-color:Silver;'><td>" + Food.StateId
+ "</td> <td>" + Food.State1 + "</td> <td><button name='button" + Food.StateId + "' onclick='Click(button" + Food.StateId + ")'><img src='Image/LoginWhite1.jpg' width='32' height='32' alt='submit' border='0' /></button></td></tr>");
}
// LoadData();
},
error: function (e) {
$("#Something").html("There was an error retrieving records");
}
});
}
</script>
<link href="Script/colorbox.css" rel="stylesheet" type="text/css" />
<script src="Script/jquery.colorbox-min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div style="background-color:Olive; width:100%; height:150px;">
</div>
<div id="list"></div>
<div class="">
<select id="mydrop" ></select>
<table id="Something" cellpadding="2" cellspacing="2" style="background-color:Orange;border-color:White; border-width:1px; border-style:dashed;"><thead style="background-color:Red;"><td>Food</td><td>No.</td></thead></table>
<br />
<input type="button" value="Show" name="brnpopup0" onclick="ShowPopup()" />
</div>
<%--<thead style="background-color:Red;"><td>Food</td><td>No.</td></thead><tbody ></tbody>--%>
<div style="background-color:Olive; position:fixed; width:100%; height:150px;">
</div>
</div>
<div id="popup" style="background-color:White; height:175px; width:300px; z-index:111; position:absolute; display:none; left:35%; top:20%;">
<table width="100%" style="width: 100%; height: 100%;" cellpadding="0" cellspacing="5">
<tr style="background-color: #0924BC; position:fixed; height:15px; ">
<td colspan="2" style="color:White; font-weight: bold; font-size: 1.2em; padding:3px"
align="center">
Edit State <a id="closebtn" style="color: white; position:fixed; float: right; text-decoration:none" class="btnClose" href="#">X</a>
</td>
</tr>
<tr>
<td align="right" style="width: 45%">
State ID:
</td>
<td>
<input type="text" name="txtStateId" />
</td>
</tr>
<tr>
<td align="right">
State Name:
</td>
<td>
<input type="text" name="txtState" />
</td>
</tr>
<tr>
<tr><td></td><td><input type="button" style="float:right;" value="Add" /></td></tr>
</tr>
</table>
</div>
</form>
</body>
</html>
.cs Code:-
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static List<Food> Result()
{
List<Food> res = new Food().Get();
return res;
}
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static List<State> Test(int Id)
{
TestEntities db = new TestEntities();
return db.States.ToList();
}
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static void InsertData(State objState)
{
}
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static List<State> GetAllData()
{
return new TestEntities().States.ToList();
}
[WebMethod]
//[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static List<State> DeleteData(string Id)
{
TestEntities db = new TestEntities();
State obj = new State();
var del = (State)db.States.ToList().Find(s => s.StateId == Id);
db.DeleteObject(del);
db.SaveChanges();
return db.States.ToList();
}
[WebMethod]
public static string MethodWithNoParameter(string strParam)
{
return "Message from server.";
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Script/jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
LoadData();
});
var filldata = null;
function LoadData() {
$.ajax({
type: "POST",
async: true,
url: "JqueryCrud.aspx/GetAllData",
data: {},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (list) {
$("#list").append("<ul id='bullets'></ul>");
alert(list.d.length);
// for (i = 0; i < list.d.length; i++) {
// $("#bullets").append("<li>" + list.d[i].Topping
// + " : " + list.d[i].Slices + "</li>");
// }
// $("#Something").closest("tr").remove();
document.getElementById("Something").deleteTHead();
for (var i = document.getElementById("Something").rows.length; i > 0; i--) {
document.getElementById("Something").deleteRow(i - 1);
}
var resultAsJson = list.d
var items = "";
if (resultAsJson.length) {
for (var i in resultAsJson) {
var Food = resultAsJson[i];
items += "<option value='" + Food.StateId + "'>" + Food.State1 + "</option>";
}
$("#mydrop").html(items);
}
$("#Something").append("<thead style='background-color:Red;'><td>Food</td><td>No.</td></thead>");
for (var i in resultAsJson) {
var Food = resultAsJson[i];
var user_name = Food.State1;
$("#Something").append("<tr style='background-color:Silver;'><td>" + Food.StateId
+ "</td> <td>" + Food.State1 + "</td> <td><button name=" + Food.StateId + " onclick='Click(" + Food.StateId + ")'><img src='Image/LoginWhite1.jpg' width='32' height='32' alt='submit' border='0' /></button></td></tr>");
// Here you append that value to your label
}
// $("#row").css('background-color', 'silver'); -->reflact only one row.
},
error: function (e) {
$("#Something").html("There was an error retrieving records");
}
});
}
function Click(argument) {
var param = 'Id=' + argument;
alert(param);
$.ajax({
type: "Post",
url: "JqueryCrud.aspx/DeleteData",
data: "{'Id': '" + argument + "'}",
contentType: "application/json; charset=utf-8",
datatype: "json",
success: function (json) {
alert(json.d);
// var tr = $(this).closest('tr')
// alert(tr);
alert(json.d.length);
filldata = "data";
//Fill the data
document.getElementById("Something").deleteTHead();
for (var i = document.getElementById("Something").rows.length; i > 0; i--) {
document.getElementById("Something").deleteRow(i - 1);
}
var resultAsJson = json.d
$("#Something").append("<thead style='background-color:Red;'><td>Food</td><td>No.</td></thead>");
alert(resultAsJson);
for (var i in resultAsJson) {
var Food = resultAsJson[i];
var user_name = Food.State1;
alert(i);
$("#Something").append("<tr style='background-color:Silver;'><td>" + Food.StateId
+ "</td> <td>" + Food.State1 + "</td> <td><button name='button" + Food.StateId + "' onclick='Click(button" + Food.StateId + ")'><img src='Image/LoginWhite1.jpg' width='32' height='32' alt='submit' border='0' /></button></td></tr>");
}
// LoadData();
},
error: function (e) {
$("#Something").html("There was an error retrieving records");
}
});
}
</script>
<link href="Script/colorbox.css" rel="stylesheet" type="text/css" />
<script src="Script/jquery.colorbox-min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div style="background-color:Olive; width:100%; height:150px;">
</div>
<div id="list"></div>
<div class="">
<select id="mydrop" ></select>
<table id="Something" cellpadding="2" cellspacing="2" style="background-color:Orange;border-color:White; border-width:1px; border-style:dashed;"><thead style="background-color:Red;"><td>Food</td><td>No.</td></thead></table>
<br />
<input type="button" value="Show" name="brnpopup0" onclick="ShowPopup()" />
</div>
<%--<thead style="background-color:Red;"><td>Food</td><td>No.</td></thead><tbody ></tbody>--%>
<div style="background-color:Olive; position:fixed; width:100%; height:150px;">
</div>
</div>
<div id="popup" style="background-color:White; height:175px; width:300px; z-index:111; position:absolute; display:none; left:35%; top:20%;">
<table width="100%" style="width: 100%; height: 100%;" cellpadding="0" cellspacing="5">
<tr style="background-color: #0924BC; position:fixed; height:15px; ">
<td colspan="2" style="color:White; font-weight: bold; font-size: 1.2em; padding:3px"
align="center">
Edit State <a id="closebtn" style="color: white; position:fixed; float: right; text-decoration:none" class="btnClose" href="#">X</a>
</td>
</tr>
<tr>
<td align="right" style="width: 45%">
State ID:
</td>
<td>
<input type="text" name="txtStateId" />
</td>
</tr>
<tr>
<td align="right">
State Name:
</td>
<td>
<input type="text" name="txtState" />
</td>
</tr>
<tr>
<tr><td></td><td><input type="button" style="float:right;" value="Add" /></td></tr>
</tr>
</table>
</div>
</form>
</body>
</html>
.cs Code:-
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static List<Food> Result()
{
List<Food> res = new Food().Get();
return res;
}
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static List<State> Test(int Id)
{
TestEntities db = new TestEntities();
return db.States.ToList();
}
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static void InsertData(State objState)
{
}
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static List<State> GetAllData()
{
return new TestEntities().States.ToList();
}
[WebMethod]
//[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static List<State> DeleteData(string Id)
{
TestEntities db = new TestEntities();
State obj = new State();
var del = (State)db.States.ToList().Find(s => s.StateId == Id);
db.DeleteObject(del);
db.SaveChanges();
return db.States.ToList();
}
[WebMethod]
public static string MethodWithNoParameter(string strParam)
{
return "Message from server.";
}
posted by Asif Sayyad @ December 17, 2012
0 Comments
0 Comments:
Post a Comment
Subscribe to Post Comments [Atom]
<< Home