tksisawesome tksisawesome - 5 months ago 10
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

HTML

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

<!DOCTYPE html>
<html>
<head runat="server">
<meta charset="utf-8"/>
<title>Choose</title>
<script src="js/classManipulator.js"></script>
</head>
<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>

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

</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>
<div id="sel-opts" class="w-col w-col-9 options-col">

</div>

</div>

</div>

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


Javascript: located in js/classManipulator.js

Posts the value as json to ASP.NET

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


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

/*THIS CREATES THE BUTTON AND ADDS IT TO A PREVIOUSLY DEFINED FORM*/
var saveButton = document.createElement("input");
saveButton.setAttribute("data-wait", "Please wait...");
saveButton.setAttribute("runat", "server");
saveButton.type = "button";
saveButton.value = "Save";
saveButton.id = "savebtn";
form.appendChild(saveButton);
saveButton.addEventListener("click", saveAddresses);
}


ASP.NET

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
{
[MetadataType(typeof(chooseElecDiv))]
public partial class chooseElecDiv : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static string SaveAddresses()
{
System.Threading.Thread.Sleep(5000);
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

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.

Comments