|
-
Aug 10th, 2014, 02:21 AM
#1
Thread Starter
Fanatic Member
uable to bind grid with jsons data
I am unable to bind gridview with json data ..although data is returning from json webservice
here is the code
Code:
<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Site1.Master" CodeBehind="AdminMainPage1.aspx.cs" Inherits="SIM.AdminMainPage" %>
<asp:Content ID="Content1" runat="server" ContentPlaceHolderID="MainContent">
<title>jQuery UI Tabs - Vertical Tabs functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css"/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css"/>
<script type="text/javascript">
// $(document).ready(function ()
// {
function getUsers() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "WebService1.asmx/getUsers",
data: "{}",
dataType: "json",
success: function (data) {
for (var i = 0; i < data.d.length; i++) {
$("#gdRows").append("<tr><td>" + data.d[i].UserName + "</td><td>" + data.d[i].password + "</td><td>" + data.d[i].Name + "</td></tr>");
}
},
error: function (result) {
alert("Error");
}
});
}
// });
</script>
<script type="text/javascript">
function ChangePassword() {
var username = 'erum'
$.ajax({
type: "POST",
url: "WebService1.asmx/ChangePassword",
//data: "{ 'value1': " + "'" + $("#TextBox5").val() + "'" + ", 'value2': " + "'" + username + "'" + "}",
data: "{ 'value2': " + "'" + $("#TextBox5").val() + "'" + ", 'value1': " + "'" + username + "'" + "}",
contentType: "application/json; charset=utf-8",
dataType: "json",
// success: OnSuccess,
// error: OnError
});
}
</script>
<script>
$(document).ready(function () {
$("#flip-DeleteUpdateuser").click(function () {
$("#panel-DeleteUpdateuser").slideDown("slow");
getUsers();
});
});
</script>
<script>
$(document).ready(function () {
$("#flip-RemoveCategory").click(function () {
$("#panel-RemoveCategory").slideDown("slow");
});
});
</script>
<script>
$(document).ready(function () {
$("#flip-RemoveItem").click(function () {
$("#panel-RemoveItem").slideDown("slow");
});
});
</script>
<script>
$(document).ready(function () {
$("#flip").click(function () {
$("#panel").slideDown("slow");
});
});
</script>
<script>
$(document).ready(function () {
$("#flip-updatePrice").click(function () {
$("#panel-updatePrice").slideDown("slow");
});
});
</script>
<script>
$(document).ready(function () {
$("#flip-user").click(function () {
$("#panel-user").slideDown("slow");
});
});
</script>
<script>
$(document).ready(function () {
$("#flip-category").click(function () {
$("#panel-category").slideDown("slow");
});
});
</script>
<script>
$(document).ready(function () {
$("#flip1").click(function () {
$("#panel1").slideDown("slow");
});
});
</script>
<script>
$(document).ready(function () {
$("#flip2").click(function () {
$("#panel2").slideDown("slow");
});
});
$(document).ready(function () {
$("#<%=gdRows.ClientID%> tr").
filter(":odd").css("background-color", "grey");
});
</script>
<script>
$(function () {
$("#tabs").tabs();
});
</script>
<style>
#panel,#flip,#panel1,#flip1,#panel2,#flip2,#panel-user,#flip-user,#flip-category,#panel-category,#flip-updatePrice,#panel-updatePrice,#flip-RemoveItem,#panel-RemoveItem,#panel-RemoveCategory,#flip-RemoveCategory,#flip-DeleteUpdateuser,#panel-DeleteUpdateuser
{
padding:5px;
text-align:center;
/*background-color:black;*/
width:400px;
color:white;
border:solid 1px #c3c3c3;
font:smaller;
font-family:Trebuchet MS;
font-size:small;
}
#flip,#flip1,#flip2,#flip-user,#flip-category,#flip-updatePrice,#flip-RemoveItem,#flip-RemoveCategory,#flip-DeleteUpdateuser
{
background-color:black;
}
#panel,#panel1,#panel2,#panel-user,#panel-category,#panel-updatePrice,#panel-RemoveItem,#panel-RemoveCategory,#panel-DeleteUpdateuser
{
/*//padding:50px;*/
display:none;
height:auto;
background-color:#99004c;
}
#table
{
}
.ul {
font-size:7px;
}
</style>
<script>
$(function () {
$("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
$("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left");
});
</script>
<style>
.ui-tabs-vertical { width: 55em; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
</style>
<div id="tabs">
<ul>
<li><a href="#tabs-4">Password Change</a></li>
<li><a href="#tabs-5">Create new user</a></li>
<li><a href="#tabs-6">Add Category</a></li>
<li><a href="#tabs-1">Update Product Price</a></li>
<li><a href="#tabs-2">Remove Item</a></li>
<li><a href="#tabs-3">Remove Category</a></li>
<li><a href="#tabs-7">Delete and update Users</a></li>
</ul>
<div id="tabs-4">
<div id="flip2">
Click here to change Password
</div>
<div id="panel2"><table border="0">
<tr>
<td>Change Password</td>
<td> <input type="text" id="TextBox5" />
<%-- <asp:TextBox ID="TextBox54" runat="server"></asp:TextBox>--%>
</td>
</tr>
<tr>
<td>Verify Password</td>
<td><asp:TextBox ID="TextBox6" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td><asp:Button ID="Button2" OnClientClick="ChangePassword(); return false;" runat="server" Text="Change" /></td>
<td> </td>
</tr>
</table></div>
</div>
<div id="tabs-5">
<div id="flip-user">
Click here to Add New User
</div>
<div id="panel-user"><table border="0">
<tr>
<td>Add Users</td>
<td> <input type="text" id="txt_user" /></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td><asp:Button ID="btn1" runat="server" Text="Add" /></td>
<td> </td>
</tr>
</table></div>
</div>
<div id="tabs-6">
<div id="flip-category">
Click here to Add Category
</div>
<div id="panel-category">
<table border="0">
<tr>
<td>Add Categories</td>
<td><asp:TextBox ID="txt_category" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td><asp:Button ID="btn3" runat="server" Text="Add" /></td>
<td> </td>
</tr>
</table></div>
</div>
<div id="tabs-1">
<div id="flip-updatePrice">
Click here to update product Price
</div>
<div id="panel-updatePrice"><table border="0">
<tr>
<td>selct category</td>
<td><asp:TextBox ID="txt_category2" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>select item</td>
<td><asp:TextBox ID="txt_item" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td><asp:Button ID="btn_priceupdate" runat="server" Text="Update" /></td>
<td> </td>
</tr>
</table></div>
</div>
<div id="tabs-2">
<div id="flip-RemoveItem">
Click here to Remove Item
</div>
<div id="panel-RemoveItem">
<table border="0">
<tr>
<td>selct category</td>
<td><asp:TextBox ID="cat" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>select item</td>
<td><asp:TextBox ID="it" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td><asp:Button ID="btn_Remove_Item" runat="server" Text="Remove" /></td>
<td> </td>
</tr>
</table></div>
</div>
<div id="tabs-3">
<div id="flip-RemoveCategory">
Click here to Remove Category
</div>
<div id="panel-RemoveCategory"><table border="0">
<tr>
<td>select category</td>
<td><asp:TextBox ID="txt_cat2" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>select item</td>
<td><asp:TextBox ID="txt_item2" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td><asp:Button ID="btn_category3" runat="server" Text="Remove" /></td>
<td> </td>
</tr>
</table></div>
</div>
<div id="tabs-7">
<div id="flip-DeleteUpdateuser">
Click here to Update/Delete Users
</div>
<div id="panel-DeleteUpdateuser">
<asp:GridView ID="gdRows" runat="server">
</asp:GridView>
</div>
</div>
</div>
</asp:Content>
any one not need to check whole code just consider following information in pasted code :
Gridname : gdRows
javascript method call : getUsers
There is no achievement without goals
-
Aug 19th, 2014, 07:27 PM
#2
Re: uable to bind grid with jsons data
Hi,
Here's a sample on databinding asp.net gridview using jQuery. I used webmethod approach as oppose to asmx. Databinding-ASP-NET-GridView-with-jQuery
KGC
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|
Reply With Quote
is a way of saying Thanks... 