tksisawesome tksisawesome - 1 year ago 85
JSON Question

Javascript or Jquery Posting of data to ASP.NET from an html element defined in Javascript then getting the returned value and displaying it

I am required to use .Net 3.5 and This is what I have so far


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="chooseElecDiv.aspx.cs" Inherits="chooseElecDiv" %>

<!DOCTYPE html>
<head runat="server">
<meta charset="utf-8"/>
<script src="js/classManipulator.js"></script>
<body class="body">
<form id="Form1" runat="server">
<div class="w-container header">
<div class="w-section w-clearfix header-section">
<div class="header-link">Logout</div>
<div class="header-link">Manage</div>

<div class="w-container const-cont">
<div class="w-section const-section">
<div id="const-details" class="const-details"></div>

<div class="w-container selection-cont">
<div class="w-section selection-section">
<div class="w-row selection-row">
<div id="opts-sel" class="w-col w-col-3 selected-col">

<div id="sel-opts" class="w-col w-col-9 options-col">




<script type="text/javascript" src="js/jquery.min.js"></script>

Javascript: located in js/classManipulator.js

Posts the value as json to ASP.NET

function saveAddresses() {
type: "POST",
url: "chooseElecDiv.aspx/saveAddresses",
data: "{}",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: OnSuccess,
error: OnError
function OnSuccess(data) {
function OnError(data) {

window.onload = function(){
var form = document.createElement("form");
addMyClass(form, "ps-form");
form.setAttribute("data-name", "Email Form"); = "email-form"; = "email-form";

var saveButton = document.createElement("input");
saveButton.setAttribute("data-wait", "Please wait...");
saveButton.setAttribute("runat", "server");
saveButton.type = "button";
saveButton.value = "Save"; = "savebtn";
saveButton.addEventListener("click", saveAddresses);


using System;
using System.Collections.Specialized;
using System.Web.Services;
using System.Web.Script.Services;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;

namespace ASPLoadDataJquery
public partial class chooseElecDiv : System.Web.UI.Page
protected void Page_Load(object sender, EventArgs e)


[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static string SaveAddresses()
return "Hello tks";



I would like to be able to send the json data to ASP.NET and have ASP.NET process and confirm receipt by responding.

How do I get C# to detect the post request from the button without using elements defined as ASP.NET objects and processing them directly with the code behind?

How do I get ASP.NET to receive the data that is posted as json?

I get error

Compiler Error Message: ASPNET: Make sure that the class defined in
this code file matches the 'inherits' attribute, and that it extends
the correct base class (e.g. Page or UserControl).

Source Error:
Line 18: {
Line 19: [MetadataType(typeof(chooseElecDiv))]
Line 20: public partial class chooseElecDiv : System.Web.UI.Page

Answer Source

Your problem is in the aspx page header. Should be

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="chooseElecDiv.aspx.cs" CodeFileBaseClass="ASPLoadDataJquery.chooseElecDiv" Inherits="ASPLoadDataJquery.chooseElecDiv" %>

As for ajax calls to the back end you are on the right track [WebMethod] is the key.

Preferred way to write the page header tag would actually be.

<%@ Page Language="C#" AutoEventWireup="true" Inherits="ASPLoadDataJquery.chooseElecDiv" Codebehind="chooseElecDiv.aspx.cs" %>

Im guessing this web application was converted from a web site at some point.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download