We Keep Coding

I have trouble posting json object from javascript

I have the react snippet:
const model = {
Code: 'somecode',
Elements: elements,
...more
}
apiPost(url, false, model)
.then(
)
Then:
export function apiPost(url, addAuth, json) {
return apiFetch('post', url, addAuth, json)
}
function apiFetch(method, url, addAuth, json, file) {
let opts = {
method: method,
headers: {}
}
if (addAuth) {
opts.headers = { ...opts.headers, ...authHeader() }
}
if (json) {
opts.headers = { ...opts.headers, ...{ 'content-type': 'application/json' } }
opts.body = JSON.stringify(json);
}
if (file) {
opts.body = file;
}
return fetch(baseUrl() + url, opts).then(handleResponse)
}
I am receiving it at the api side:
[HttpPost]
public async Task<JsonResult> Post([System.Web.Http.FromBody] SurveyEntry model)
{
try
{
...
}
catch (Exception ex)
{
...
}
}
but the model comes null.
I am puzzled why this happens.
Any suggestions what I am doing wrong?

Angular data synchronization issue

I wanted to retrieve an information from backend if some email address from input already exists. Based on this information I'm calling a function that make a post that inserts user into database. The problem is that user is inserted only after second click on my SignUp button (function registerUser is called on this button).
Component stuff:
registerUser(form: NgForm) {
let date: Date = new Date();
this.newUser.registrationDate = date;
this.checkEmailStatus(); //IMPLEMENTATION BELOW
if (this.signupForm.valid === true && this.emailStatus) {
this.portfolioAppService.registerUser(this.newUser).subscribe((data) => {
this.clearFields();
this.navigateToLogin();
},
error => console.error(error)
);
}
}
checkEmailStatus() {
this.portfolioAppService.checkEmailStatus(this.newUser.email).subscribe((data: string) => {
if (data != "") {
this.emailStatus = true;
}
else this.emailStatus = false;
},
error => console.error(error)
);
}
Here is my service:
checkEmailStatus(email: string): Observable<string> {
return this.http.get<string>(`/api/Users/CheckEmailStatus_${email}`, this.httpOptions);
}
Here is backend:
[HttpGet]
[Route("~/api/Users/CheckEmailStatus_{email}")]
public string CheckEmailStatus(string email)
{
try
{
User user = _context.Users.Where(u => u.Email == email).FirstOrDefault();
if (user != null)
{
return user.Email;
}
else
{
return "";
}
}
catch (Exception e)
{
throw new Exception("Error!");
}
}

Call to this.portfolioAppService.checkEmailStatus() is asynchronous. So when you check if (this.signupForm.valid === true && this.emailStatus) after the this.checkEmailStatus() call, the variable this.emailStatus is still undefined. To fix it, you could return an observable from the checkEmailStatus() in the component. Try the following
Component
registerUser(form: NgForm) {
let date: Date = new Date();
this.newUser.registrationDate = date;
this.checkEmailStatus().pipe(take(1)).subscribe(status => {
if (this.signupForm.valid === true && status) { // <-- check the status of email address
this.portfolioAppService.registerUser(this.newUser).subscribe((data) => {
this.clearFields();
this.navigateToLogin();
},
error => console.error(error)
);
}
});
}
checkEmailStatus() : Observable<boolean> {
const result = new Subject<boolean>();
this.portfolioAppService.checkEmailStatus(this.newUser.email).subscribe(
(data: string) => {
if (data !== '') {
result.next(true);
}
else result.next(false);
},
error => {
console.error(error);
result.next(false);
}
);
return result.asObservable();
}

Sending large JSON data from C# Web API to Javascript Client

My calls to the server are built in the following way:
I have a callServer function on the client that sends data to my API;
My API then receives the data from it's controller and pass it to a function that makes a call to the DB;
The controller sends the response back to the client.
This is how I do it (these are just the important pieces of the code, not everything is here):
API (Context.cs):
public static IEnumerable<Dictionary<string, object>> Proc_example(int? value)
{
using (NpgsqlConnection conn = new NpgsqlConnection(ConnStr))
{
try
{
conn.Open();
using (var cmd = conn.CreateCommand())
{
cmd.CommandText = "proc_example";
cmd.CommandType = System.Data.CommandType.StoredProcedure;
cmd.Parameters.Add(new NpgsqlParameter("value", convertNullValue(value)));
var reader = cmd.ExecuteReader();
return new DrToDictionary().Serialize(reader);
}
}
catch (Exception e)
{
throw e;
}
finally
{
conn.Close();
}
}
}
API (Controller.cs):
[Authorize]
public JsonResult example(int? value)
{
try
{
var data = Context.Proc_example(value);
return Json(new AppServerResult()
{
Result = new { list = data }
}, JsonRequestBehavior.AllowGet);
}
catch (Exception e)
{
return Json(new AppServerResult()
{
HasError = true,
ErrorMessage = "Houve um erro ao consultar, tente novamente."
});
}
}
Client (callServer):
app.callServer = function (options, sucessCallback, httpErrCallback, serverErrCallback, operationErrorCallback) {
if (options.source == undefined)
options.headers = { "Authorization": $.cookie('Token') }
options.success = function (result) {
try {
var _result = result;
if (typeof _result == "string") {
_result = jQuery.parseJSON(_result);
}
if (typeof _result.HasError != "undefined" && _result.HasError) {
if (!_result.IsValidationError) {
if (typeof __apiCallerErrorCallback == "function")
__apiCallerErrorCallback(_result.ErrorMessage);
if (typeof serverErrCallback == "function") {
serverErrCallback(_result.ErrorMessage);
}
} else {
app.notifyValidationException(_result.ErrorMessage);
}
} else {
if (typeof sucessCallback == "function") {
if (_result.Result != undefined) sucessCallback(_result.Result);
else sucessCallback(_result);
}
}
} catch (ex) {
throw ex;
}
};
options.error = function (result) {
if (typeof httpErrCallback == "function") {
httpErrCallback();
}
if (typeof __apiCallerErrorCallback == "function")
__apiCallerErrorCallback("HTTP Error");
}
};
jQuery.ajax(options);
};
Calling example:
callingTheServerExample = function (callback, value) {
app.callServer({
type: "POST",
url: app.webAPIRootPath + "Controller/example",
data: "{ 'value':" + JSON.stringify(ko.toJS(value)) + " }",
contentType: "application/json; charset=utf-8",
dataType: "json"
}, function (result) {
if (typeof callback == "function")
callback(result);
});
}
My problem is that when my JSON gets too large, my API gives me a JsonMaxLength exception when sending tha data back to the client (the exception happens on the controller class). I'd prefer not to set my maxJsonLength to a higher value. Instead, I'd like to find a way to send my JSON in chunks from the API and mount it on the client through javascript.
Is there a way to do it?
EDIT:
I forgot to add a detail: I'm using a REST API. As stated in the comments below, pagination is a solution, but what I need is to get the whole record set to be available at once. It's possible to do it using pagination, but it seems to be slower and to cause more API calls. Streaming appears to be a solution, but I never did this before and I can't figure out how to implement it.
EDIT 2:
I've implemented my paging like this:
public JsonResult example(int? value, int page)
{
try
{
var data = Context.Proc_example(value, page);
if (pPage > 0)
{
var pagedResult = data.Skip((page - 1) * 20).Take(20).ToList();
return Json(new AppServerResult()
{
Result = new { list = data}
}, JsonRequestBehavior.AllowGet);
}
else
{
return Json(new AppServerResult()
{
Result = new { list = data}
}, JsonRequestBehavior.AllowGet);
}
}
catch (Exception e)
{
return Json(new AppServerResult()
{
HasError = true,
ErrorMessage = "Houve um erro ao consultar, tente novamente."
});
}
}
But I still didn't achieve what I wanted. Would someone think of a better way?

for JsonMaxLength exception
Try
write in web.config
<system.web.extensions>
<scripting>
<webServices>
<jsonSerialization maxJsonLength="1000000">
</jsonSerialization>
</webServices>
</scripting>
</system.web.extensions>
By default the maxJsonLength is 102400.

fail Failed to execute 'send' on 'WebSocket': Still in CONNECTING state

there:
I am want to send some data
here is the code : filename:[wx-resource.ts]
import {Promise} from 'es6-promise';
declare const wx: any;
class WxResource {
public socketOpen: boolean = false;
public count: number = 0;
public socketState;
public reqObj: any = {
url: 'http://192.168.8.138/api/v1/user/auth/status',
token: "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE0ODcxMjg0MjcsImxldmVsIjoiIiwidWlkIjoiZTE3MmQ0NGUtZGY5Ni00NzBjLTlmM2QtMWJkN2RlNjU3MTA0In0.BG2w-Lo02i2xaga4iZkM7RmP8hXgpRKAC-0MTp5hFj_ugnwATt2m9nDjtmJfRpWnAlpfmXZLgEQTlMHwG2H9hhoqojJC6piCh76UkH0mNwjJrBGiTINurholwTF2VYQPysB4bz7G4jepzEccNdD_NW-_Rxw-Bo5WDcH37OZ2zTw"
};
constructor() {
this.listen().connect().afterConnect();
}
private listen(): WxResource {
let _that = this;
wx.onSocketOpen((event) => {
console.info('WebSocket已打开：', event);
this.count++;
this.socketState = event.target.readyState;
this.socketOpen = true;
// this.sendMsg(_that.reqObj,"GET");
console.log("open的次数：", this.count);
return this.socketOpen;
});
wx.onSocketError((event) => {
console.error('WebSocket连接打开失败，请检查！', event);
});
// console.log("外部：", this.socketOpen);
return this;
}
private connect(): WxResource {
wx.connectSocket({
url: "ws://192.168.8.138/api/ws"
});
return this;
}
private afterConnect(resolve?, reject?): WxResource {
wx.onSocketMessage((res) => {
console.log("服务器返回：", JSON.parse(res.data));
resolve(JSON.parse(res.data));
});
return this;
}
//发送消息
private sendMsg(reqObj, method?) {
console.log("socketState: ", this.socketState); //undefined
if (!this.socketOpen) {
console.log("webSocket opened");
// 判断是否传入token
let header = {};
if (reqObj.token === undefined) {
console.log("no token");
header = {
"S-Request-Id": Date.now() + Math.random().toString(20).substr(2, 6)
}
} else if (reqObj.token !== undefined) {
console.log("get token");
header = {
"S-Request-Id": Date.now() + Math.random().toString(20).substr(2, 6),
"Authentication": "Bearer " + reqObj.token
}
}
wx.sendSocketMessage({
data: JSON.stringify({
"method": method,
"url": reqObj.url,
"header": header,
"body": JSON.stringify(reqObj.data)
}),
success: function (res) {
console.log("发送成功", res)
},
fail: function (res) {
console.log("发送失败", res)
}
});
} else {
console.log("socket not open", this.socketOpen);
}
}
public get() {
let _that = this;
console.log("socketOpen", this.socketOpen);
this.sendMsg(this.reqObj, "GET");
return new Promise((resolve, reject) => {
_that.afterConnect(resolve, reject);
})
}
}
export default WxResource;
then I'm import above code like this:
import WxResource from '../../utils/wx-resource'
and use it
const wxResource = new WxResource();
wxResource.get();
and something went wrong:
here is the console:
"sendSocketMessage:fail Failed to execute 'send' on 'WebSocket': Still in CONNECTING state."
I just want to call wx.onSocketOpen (), and then by calling the get method when using wx.sendSocketMessage to send data to the server,method POST, DELETE the same, without calling wx.onSocketOpen () again; I don't know where is wrong, please point out, thank you

How to re try operation after refresh token - jquery ajax

In my flow say i am using an access token for getting my data. When my access token expires i get a 401 error i am using the refresh token to get a new access token.
Note : My access token and refresh token is stored in a cookie and i am updating the same after a 401 error.
My question how do i retry the same operation which i was in the middle of?
My Code (services.js):
var refresh_token = "na";
function get_api_data(url, api_token) {
var returnData = handleApiData(url, api_token, "GET");
return returnData;
}
function post_api_data(url, api_token, post_data) {
var returnData = handleApiData(url, api_token, "PUT", post_data);
return returnData;
}
function handleApiData(url, access_token, type, post_data) {
return $.ajax({
url: url,
type: type,
data: post_data,
error: failHandler,
contentType: "application/json",
beforeSend: function (xhr) {
xhr.setRequestHeader("Authorization", "Bearer " + access_token);
}
})
}
function handleData(data, textStatus, jqXHR) {
return data;
}
function failHandler(jqXHR, textStatus, errorThrown) {
switch (jqXHR.status) {
case 401:
var api = get_api_token();
checkApiToken(api.refresh_token);
break;
default:
alert(errorThrown);
}
}
function checkApiToken(refresh_token) {
if (refresh_token != "na") {
$.post("/Account/Refresh/?refresh_token=" + refresh_token);
//location.reload();
}
}
My Code (notification.js):
$(function () {
var api = get_api_token();
if (api != null)
get_notification_data(api.access_token);
});
function get_notification_data(api_token) {
var notifications = get_api_data(urls.notifications.list, api_token);
if (notifications != undefined)
notifications.success(function (data) {
items = data.records;
_.each(items, function (item) {
item.Status = ko.observable(item.status);
item.onClick = function () {
if (item.Status() === 'UNREAD') {
var post_data = { id: item.id };
post_api_data(urls.notifications.list, api_token, post_data).success(function (response, textStatus) {
if (response.success)
item.Status('READ');
$(location).attr("href", item.action_link);
});
}
else {
$(location).attr("href", item.action_link);
}
}
});
var model = {
items: ko.observableArray(items),
onCancel: function (item) {
}
}
ko.applyBindings(model, $("#notificationBar")[0]);
})
}
Edit: My AccountController code that sets the new API cookie:
[HttpPost]
public ActionResult Refresh(string refresh_token)
{
string token_string = string.Empty;
try
{
token_string = OAuthHelper.getTokenViaRefreshTokenFromAPIServer(refresh_token);
if(token_string != null)
Response.Cookies[Constants.Cookies.API].Value = token_string;
}
catch (Exception ex)
{
Log.Info(string.Format("AccountController.cs -Refresh Token Error ", ex.Message));
}
return RedirectToAction("Index","Home");
}