how to declare and update my class in my .cshtml file - javascript

I've create two classes for holding objects in my cshtml file, as below
public GroupBlock groupTemplate = new GroupBlock();
public RuleBlock ruleTemplate = new RuleBlock();
public class GroupBlock
{
public RuleBlock[] rules { get; set; }
}
public class RuleBlock
{
public string AndOr { get; set; }
public string dd1 { get; set; }
public string dd2 { get; set; }
public string dd3 { get; set; }
public string block { get; set; }
}
I now need to declare them in my cshtml file so that I can add data to them whenever a new line is created. My model file is declared as follows
#model Client.Web.Models.TaskViewModel
I've then tried to declare my two classes as
var rules = new #model.ruleTemplate;
var groups = new #model.groupTemplate;
This shows a syntax error, what am I missing?

I assume that GroupBlock and RuleBlock are nested class. How about this :
var rules = new TaskViewModel.RuleBlock() ;
var groups = new TaskViewModel.GroupBlock();

Trying to access my variables in my cshtml file was not working so I shifted the process to my Controller using the following code
$.ajax({
type: "GET",
cache: false,
data: {"id" : id , "idx" : ruleIndex},
url: "#Url.Action("UpdateSelectRule")",
dataType: "html",
success: function (result) {
$("#ajaxResult").html(result);
}
});
and accessed the variables from there by creating a 'new' class of my model.
ValidateTaskViewModel model = new validateTaskViewModel();
model.groupId = id;

Related

C# SHA512 to Hex string

There's a javascript library called Crypto-js and i'm trying to convert some methods I use to c#.
For example in javascript:
var payload = JSON.stringify({ market: "BTC-ETH", order: { price: "0.02159338", side: "buy", size: "0.024" } });
var contentHash = cryptoJS.SHA512(payload).toString(cryptoJS.enc.Hex);
console.log(contentHash);
In C#
public class OrdersVM
{
public string Market { get; set; }
public Order Order { get; set; }
}
public class Order
{
public string Price { get; set; }
public string Side { get; set; }
public string Size { get; set; }
}
public async Task<IActionResult> Orders([FromBody] OrdersVM vm) {
var payload = JsonConvert.SerializeObject(vm);
var contentHash = sha512Hex(payload).ToLower();
Console.WriteLine(contentHash);
}
public string sha512Hex(string input)
{
var bytes = Encoding.UTF8.GetBytes(input);
using (var hash = SHA512.Create())
{
hash.ComputeHash(bytes);
return BitConverter.ToString(hash.Hash).Replace("-", "");
}
}
contentHash for javascript is
"99bb05af8aace509189e08625bb4e475a9daaafc92edf5c85fa1aefcc16c16e4533c23843c5806aef01c97e8cb4150b2dc129d04d3b6a50331833fe5cb8158fc"
and for c#
"731b92cf482ff90ffe759e356959ec005334062bdc3c2cc78b48c3041d21a45ecaa6b33f6df2971fa868f94f04b7596e818104cb1017ed1c436365beac3a01d1"
What am I doing wrong with c# conversion?
The issue is that JSON.Net, by default, will serialise your property names exactly as the appear, meaning they all start with a capital letter. There are two ways to fix this:
Using JsonProperty to explicitly control the property name serialisation. For example:
public class OrdersVM
{
[JsonProperty("market")]
public string Market { get; set; }
[JsonProperty("order")]
public Order Order { get; set; }
}
Use a contract resolver to tell JSON.Net how to process the names. Fortunately there is one provided for you that will do this:
var settings = new JsonSerializerSettings
{
ContractResolver = new CamelCasePropertyNamesContractResolver()
}
var payload = JsonConvert.SerializeObject(vm, settings);

Ajax with formData dose not bind child's array of objects in asp.net controller

Hi I am trying to send files and some object in ajax call, using form data
here is my ajax call
$.ajax({
type: "POST",
url: "/Post/SharePost",
processData: false,
contentType: false,
headers: getAjaxHeaderWithToken(),
dataType: "json",
data: getDataToPost(),
});
here is my getDataToPost() method
function getDataToPost() {
var dataToPost = new FormData();
for (var i = 0; i < savedPictures.length; i++) {
var savedPictureToPost = { PictureId: savedPictures[i].PictureId};
dataToPost.append("vm.SavedPictures[" + i + "]", JSON.stringify( savedPictureToPost));
}
}
here is my controller
[HttpPost]
[ValidateAntiForgeryTokenOnAllPosts]
public ActionResult SharePost(SharePostVM vm, IEnumerable<HttpPostedFileBase> unsavedPictures)
{
}
and here is my SharePostVM
public class SharePostVM : BasePostVM
{
public SharePostCategories SharePostCategories { get; set; }
[Required]
public decimal? Price { get; set; }
[Required]
[Display(Name = "Available Date")]
public string DateAvailableFrom { get; set; }
public IEnumerable<PictureVM> SavedPictures { get; set; }
}
As you can see in my controller, I need to send files as well, but I just exclude the method for making it simple. Basically, I need to send files and object with an array of object. I can bind files and the property of SharePostVM like price and DateAvailableFrom by appending like dataToPost.append("vm", "priceValue"), but I can't bind the SavedPictures in SharePostVM. How can I bind them? I know I can retrieve from Request on server side but I just want to know if i can bind them. I have also tried without JSON.stringfy() but it still does not work..
Thanks guys
Try like this:
var pictureId = savedPictures[i].PictureId;
dataToPost.append("SavedPictures[" + i + "].PictureId", pictureId);
// ... and so on if you want to bind other properties than PictureId
Also in the getDataToPost function that you have shown in your question there's no return statement but I guess this is just a typo here and in your actual code the function returns a value.

How do I construct this json string and take its values in the action method? (scenario provided)

image
In the image link above I have created a form which can dynamically add more rows of input fields
The values from the input field that are dynamically added are pushed into an array while the values on the green part are place into a javascript object.
reservations.push({ Day:d, Room: r, TimeIn: datetimeIn.toString(), TimeOut: datetimeOut.toString()});//this is assuming that only 1 row of input field was added
var r = JSON.stringify(reservations);
//There's only 1 course, description, section, datefrom and dateto while there can be many Day, Room, TimeIn, TimeOut.
var reservation = { CourseCode: courseCode.val(), Description: description.val(), Section: section.val(), DateFrom: dateF, DateTo: dateT, r };
$.ajax({
url: '/ReserveSubject',
type: 'POST',
data: 'reservation=' + JSON.stringify(reservation),
How do I take the values of the json string and create and instance of an object that will take those values
[HttpPost]
public ActionResult ReserveSubject(string reservation)
{
Subject sub = new Subject();
sub.CourseCode = reservation.CourseCode;
sub.Description = reservationDescription;
.
.
.
//loop through reservation data from dynamically added rows of input field
{
Schedule sch = new Schedule();
sch.Day = reservation.Day;
sch.Room = reservation.Room;
.
.
.
sub.Schedule.add(sch);
}
sub.ScheduleTable = MethodThatWillConvertScheduleListToDatatable(sub.Schedule);
}
Object to instantiate
public class Subject
{
string CourseCode { get; set; }
string Description { get; set; }
string Section { get; set; }
string DateFrom { get; set; }
string DateTo { get; set; }
List<Schedule> Schedule { get; set; }
DataTable ScheduleTable { get; set; }
}
public class Schedule
{
string Day { get; set; }
string Room { get; set; }
string TimeIn { get; set; }
string Timeout { get; set; }
}
I have already downloaded NewtonSoft as i think most of your answer will make use of it.
var jsonObject = {
"Prop1" : "something",
"Prop2" : "something",
"Prop3List" : GetSomeJsonScheduleList()
etc...
};
public class ExampleModel
{
public string Prop1 {get; set;}
public string Prop2 {get; set;}
public IList<Schedule> Prop3List {get; set;}
}
public ActionResult ControllerMethod(ExampleModel model)
{
//Use your model like normal
}
Then just JSON.stringify(jsonObject) in your ajax call.
Take note of the naming conventions.

Sending Latitude and Longitude double values to MVC Controller but getting NULL values

I have hard coded the latitude and longitude values but still i'm getting null values in controller, I have tried many solutions but couldn't get it to work. I think there is a mismatch between my javascript object "mydata" and my MVC object Table.
Javascript Code
<script>
map.setContextMenu({
control: 'map',
options: [{
title: 'Click to add marker',
name: 'add_marker',
action: function (e) {
$("#markerform").show();
var latitude = 31.555;
var longitude = 74.333;
var m = $('#m').val();
var n = $('#n').val();
var o = $('#o').val();
var ad = $('#ad').val();
var ph = $('#ph').val();
var w = $('#w').val();
var fb = $('#fb').val();
var l = "RAO";
var mydata = {
lat: latitude,
lng: longitude,
marker: m,
name: n,
offer: o,
address: ad,
phn: ph,
website: w,
fbpage: fb,
logo: l
};
function SaveMarker() {
$.ajax({
type: 'POST',
data: mydata,
url: "/Home/AddMarker",
// dataType: 'json',
// data: JSON.stringify(data),
success: function () {
alert('suc');
},
error: function (args) {
alert('error');
}
});
}
}
}
]
});
</script>
In controller
[HttpPost]
public ActionResult AddMarker(Table t){
//Some Code
return View("../Home/Index");
}
My Table Class
public partial class Table
{
public int Id { get; set; }
public Nullable<double> lat { get; set; }
public Nullable<double> lng { get; set; }
public string marker { get; set; }
public string name { get; set; }
public string offer { get; set; }
public string address { get; set; }
public string phn { get; set; }
public string website { get; set; }
public string fbpage { get; set; }
public string logo { get; set; }
}
Don't stringify your JSON data. You're posting a string at that point, not JSON or a set of name-value pairs. MVC attempts to bind the string itself as Table and of course fails, because there's no conversion from string to your Table class. Instead, just pass data itself as the data param for your AJAX request. That also assumes that the JavaScript object represented by data mirrors your C# Table class. Otherwise, you'll still have issues with binding. In other words, if your Table class has a property Latitude, then your JavaScript object would need to have a member named Latitude or latitude (casing doesn't matter).
Thanks for the help #Chris Pratt, i finally found the solution. i was calling the function SaveMarker from a form that is why the function was not reading the latitude and longitude values. Now i am getting the lat lng values in a separate funtion using a separate ajax call, everything is working smoothly now :).

How to call page method with a parameter through in a javascript event?

I have method like this in my .cs :
[System.Web.Services.WebMethod]
public static void GetServiceInformation(IInfo x) //IInfo is an interface
{
x.l_power = true;
x.lb_InboxCount = UserTrans.GetInbox(int.Parse(emp_num), 0);
}
Now i want to call this method through a javascript method as a page method but it doesn't work .
<script type ="text/javascript">
function GetInfo() {
PageMethods.GetServiceInformation(this);
}
window.onload = setTimeout("GetInfo()", 3000);
</script>
<telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnablePageMethods="true">
</telerik:RadScriptManager>
My .cs :
public partial class AppMaster : Log, IInfo //My page
{
public string Inbox
{
get
{
return hpl_Inbox.NavigateUrl;
}
set
{
hpl_Inbox.NavigateUrl = value;
}
}
public string Draft
{
get
{
return hpl_Draft.NavigateUrl;
}
set
{
hpl_Draft.NavigateUrl = value;
}
}
public string New
{
get
{
return hpl_New.NavigateUrl;
}
set
{
hpl_New.NavigateUrl = value;
}
}
public string Approved
{
get
{
return hpl_Approved.NavigateUrl;
}
set
{
hpl_Approved.NavigateUrl = value;
}
}
//------- etc
}
My interface :
public interface IInfo
{
string Inbox { get; set; }
string Draft { get; set; }
string New { get; set; }
string Approved { get; set; }
string archive { get; set; }
string search { get; set; }
string cand { get; set; }
string pri { get; set; }
string power { get; set; }
string admin { get; set; }
string help { get; set; }
bool l_cand { get; set; }
bool l_pri { get; set; }
bool l_power { get; set; }
bool l_admin { get; set; }
string lb_ApprovedCount { get; set; }
string lb_InboxCount { get; set; }
string lb_archive { get; set; }
string lb_DraftCount { get; set; }
}
function GetServiceInformation(x) {
$.ajax({
type: "POST",
url: "page.aspx/GetServiceInformation",
data: "{'x':'" + x + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: on_sucess,
error: on_error
});
function on_sucess(data, status) {
alert(data);
}
function on_error(request, status, error) {
alert(error);
}
}
Sorry, if it doesn't work
Answer Edit Based On Chat Discussion
First, thanks for clarifying your question. It was bit hard to understand the problem you were trying to solve. The reason? Because your code wasn't clear enough and that usually happens when there are design issues. That's effectively what your facing here a bit of a design issue. First, I'll point out some mistakes...
In this javascript function...
function GetInfo() {
PageMethods.GetServiceInformation(this);
}
this is NOT an instance of your page. So there's no use to make your page implement an interface...
public partial class AppMaster : Log, IInfo{}
and expect that a javascript call would page an instance of System.Web.UI.Page to your class (not to mention an implementation of the IInfo interface). You can blindly ditch this approach because it's a permanent design issue and it's not even going to work.
Now, if what you want is to serve the page, then do some further processing and finally send the results of this processing back to the client asynchronously using javascript/ajax you have a couple of approaches here:
Using SignalR which is my favourite approach (but you already stated your solution doesn't meet the requirements to use SignalR)
Using jQuery ajax which is also a very valid approach
Now, I'll explain the second approach
Using jQuery Ajax
Simply render the page as you would normally do in ASP.NET. Then on the client-side, when the page loads, make an ajax request to start processing the information you want to display. You can start the request as soon as the page loads to make the processing on the server
$(function(){
$.ajax({
type: 'POST',
url: 'AppMaster.aspx/GetServiceInformation',
data: "{}",
contentType: 'application/json;charset=utf-8',
dataType: 'json',
success: function(d) {
//load data received
},
error: function() {
//process the error
}
});
});
In the success handler you need to load the values received from the ajax call on your web controls. Then change your IInfo interface to a concrete object in a separate code file. But, remember that this class should NOT hold any references whatsoever to your web controls
public class JSInfo
{
string Inbox { get; set; }
string Draft { get; set; }
string New { get; set; }
string Approved { get; set; }
string archive { get; set; }
string search { get; set; }
string cand { get; set; }
string pri { get; set; }
string power { get; set; }
string admin { get; set; }
string help { get; set; }
bool l_cand { get; set; }
bool l_pri { get; set; }
bool l_power { get; set; }
bool l_admin { get; set; }
string lb_ApprovedCount { get; set; }
string lb_InboxCount { get; set; }
string lb_archive { get; set; }
string lb_DraftCount { get; set; }
}
then change your page method to...
[System.Web.Services.WebMethod]
public static JSInfo GetServiceInformation()
{
//you need to get the emp_num from session
//construct the JSInfo object
JSInfo info = new JSInfo();
//get the data from the database
var data = UserTrans.GetInbox(int.Parse(emp_num), 0);
//set the properties of the JSInfo...similar to the line below for each property...Draft, New, Approved, etc
info.Inbox = data.Inbox;
//return the object to the client
return info;
}
Notice that you need to get the emp_num value from Session since you stated in the chat discussion that this value comes from a Session variable. Now, going back to the success handler of your jQuery ajax call which executes soon after the response is received back from the server. You will receive a json object in the handler parameter d with the properties of the JSInfo class that you just sent from the server. Then you set the controls on the page...
success: function(d) {
$('#id_inbox_control').val(d.Inbox);
$('#id_draft_control').val(d.Draft);
$('#id_new_control').val(d.New);
//and keep doing the same for the rest of the controls
},
That should be a neater solution. Of coure, I cannot cover every single details here. But for sure you will get the idea. If not, let me know if I need to expand on something.
If your page implements the interface, you don't have to pass it! In your c# code write:
this.l_power=true;
If you need to pass values from JavaScript to page method, define each property as a parameter and pass values to the page method:
[System.Web.Services.WebMethod]
public static string GetServiceInformation(int value1, string value2)
{
l_power = value1;
something = value2;
return "some string to indicate the result of call";
}
And:
<script type ="text/javascript">
var v1 = 15;
var v2 = "some value";
function GetInfo() {
PageMethods.GetServiceInformation(v1, v2, success, fail);
}
window.onload = setTimeout("GetInfo()", 3000);
</script>
in which success and fail are the names of two JS functions that will be called after the request is completed. Note that a page method can return a string value to inform the client about what happened on the server.
I can only think of one method.
You should somehow marshal the this object, and send it as parameter. I mean you should write a method that marshalls an object to equivalent json or xml, and POST that to your server.
I believe you can do it as you did above only through a clean API and compiler tool between C# and javascript to implement RPC just like GWT was written for java and javascript.
Can you do a little test?
Declare a public class JSInfo: IInfo{} in your page code, and in your web method declare that parameter of yours as JSInfo.
As JSInfo implements IInfo, your program logic can work with it without any problem.
Just to let you know, your code does not work because you cannot serialize interfaces as they
are not concrete types, if you think about it, interfaces have no real correlation in XML schema. There's no way to represent the data. Base classes will work however.
If you fill bad in declaring the JSInfo in the asp.net page class, then create a class called
WebMethodsHelper and declare your JavaScript WebMethod Interfaces (Adaptors) there.
public class JSInfo: IInfo{
private ControlsCollection controls;
public JSInfo(ControlsCollection constrols){
this.controls = controls
FillObjects();
}
private void FillObjects(){
//iterate through controls and extract you data to you
//class properties/fields
}
public void Update(ControlsCollection controls){
this.controls=controls;
FillObjects();
}
public void Update(JSInfo info, ControlsCollection controls){
this.controls=controls;
//populate your object based on info
//then extract data from page controls
FillObjects();
}
}
public class MyPage: System.Web.UI.Page{
protected void Page_Load(object sender, EventArgs e){
if(!IsPostBack && Session["info_obj"])
Session["info_obj"] = new JSInfo(this.Controls);
}
[System.Web.Services.WebMethod]
public static string GetServiceInformation(JSInfo data)
{
JSInfo info = new JSInfo(this.Controls);
info.Update(data);
//or if you stored the info in the session
JSInfo info = (JSInfo)Session["info_obj"];
info.Update(this.Controls, data);
}
}
The JSInfo is just to give your IInfo interface some structure so it can be serialized.
From JavaScript you should be able to call you page method like this:
<script type ="text/javascript">
function GetInfo() {
var info = new JSInfo();
info.PropertyXPTO="something";
PageMethods.GetServiceInformation(info, onSuccess, onError);
}
function onSuccess(result) {
alert(result);
}
function onError(result) {
alert('error: ' + result);
}
window.addEventListener("load", function(){
setTimeout("GetInfo()", 10 * 1000);
}, false);
</script>
Not that you should have a ScriptManager at the top of your page
<asp:ScriptManager ID="ScriptManager1" EnablePageMethods="true" runat="server" />
The ScriptManager is responsible for giving you the PageMethods class in the JavaScript, along
with other things.
Also, confirm the following:
The page method must have the System.Web.Services.WebMethod attribute. [WebMethod]
The page method must be public. [WebMethod] public ...
The page method must be static. [WebMethod] public static ...
The page method must be defined on the page (either inline or in the code-behind). It cannot be defined in a control, master page, or base page.
The ASP.NET AJAX Script Manager must have EnablePageMethods set to true.
function GetServiceInformation(x) {
$.ajax({
type: "POST",
url: "page.aspx/GetServiceInformation",
data: x, //Attention: there is no {}
contentType: "application/json; charset=utf-8",
dataType: "json",
success: on_sucess,
error: on_error
});
function on_sucess(data, status) {
alert(data);
}
function on_error(request, status, error) {
alert(error);
}
}
And then
<script type ="text/javascript">
function GetInfo() {
var myInfo = {
Inbox: "",
Draft: "",
New: "",
l_cand: ""
......//Attention, you should make this class corresponding to your server class IInfo
};
PageMethods.GetServiceInformation(myInfo);
}
window.onload = setTimeout("GetInfo()", 3000);
Referred to #anotherdie. And tell you how to transfer "X"
In your .js
function GetInfo() {
var parameter = {};
parameter.name = "test";
parameter.id = 123;
parameter.state = true;
PageMethods.GetServiceInformation(parameter,
function (res) {
if (res == true) {
//do some
alert("ok");
} else {
//do some
alert("bad");
}
}, function(err){
alert("ERROR: "+err._message);
});
}
in your apsx.cs (you can return a string, a list, a bool, an int or a json object //for json use json.net http://james.newtonking.com/json) for this i'll return a bool.
using System.Web.Services;
[WebMethod]
public static bool GetServiceInformation(ClassData parameters)
{
try
{
//do some
return true;
}
catch(Exception ex)
{
return false;
}
}
in a interface ClassData .cs
public string name { get; set; }
public int id { get; set; }
public bool state { get; set; }
public ClassData(){}
public ClassData(string _name, int _id, bool _state)
{
this.name = _name;
this.id= _id;
this.state = _state;
}
I do the following :
Create New Page and called it : Counts.aspx
protected void Page_Load(object sender, EventArgs e)
{
emp_num = int.Parse(Session["empnum"].ToString());
Thread.Sleep(3000);
string res = GetCounts(emp_num);
Response.Write(res);
}
/***********************************************************************************************/
protected string GetCounts(int empNum)
{
string outbox = UserTransaction.getoutboxCount(empNum, 0);
string inbox = UserTransaction.getinboxCount(empNum, 0);
string archive = UserTransaction.getarchivecount(empNum, 0);
string draft = UserTransaction.getdraftcount(empNum, 0);
return outbox + "~" + inbox + "~" + archive + "~" + draft + "~";
}
and in my main page :
<script type="text/javascript">
function loadXMLDoc() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var split = xmlhttp.responseText.split('~');
var outbox = split[0];
var inbox = split[1];
var archive = split[2];
var draft = split[3];
document.getElementById("lbl_DraftCount").innerHTML = draft;
document.getElementById("lbl_InboxCount").innerHTML = inbox;
document.getElementById("lbl_ApprovedCount").innerHTML = outbox;
document.getElementById("lbl_archive").innerHTML = archive;
}
}
xmlhttp.open("GET", "Counts.aspx", true);
xmlhttp.send();
}
loadXMLDoc();
</script>

Categories

Resources