I am trying to convert byte[] to base64 but getting error - javascript

I want to create QR Code from user data. I have using below library for creating QR Code.
Install-Package QRCoder
Now I have done below code to convert data into base64 string.
private static Byte[] BitmapToBytes(Bitmap img)
{
using (MemoryStream stream = new MemoryStream())
{
img.Save(stream, System.Drawing.Imaging.ImageFormat.Png);
return stream.ToArray();
}
}
public JsonResult SaveVisitorEntry(string FirstName, string LastName)
{
//VisitorEntryDA pdm = new VisitorEntryDA();
object obj = "";//pdm.getCity(country_id, Convert.ToInt64(state_id));
QRCodeGenerator qrGenerator = new QRCodeGenerator();
QRCodeData qrCodeData = qrGenerator.CreateQrCode(FirstName + " " + LastName, QRCodeGenerator.ECCLevel.Q);
QRCode qrCode = new QRCode(qrCodeData);
Bitmap qrCodeImage = qrCode.GetGraphic(20);
ImageConverter converter = new ImageConverter();
return Json(JsonConvert.SerializeObject(BitmapToBytes(qrCodeImage)));
}
Below is my AJAX code where i am converting Base64 to image and showing my QR code to image.
jQuery.ajax({
url: "../VisitorEntry/SaveVisitorEntry",
type: "POST",
//data: "{function:'" + value + "'}",
data: "{FirstName:'" + FirstName + "',LastName:'" + LastName + "'}",
dataType: "json",
traditional: true,
contentType: "application/json; charset=utf-8",
success: function (data) {
debugger
jQuery("#wait").css("display", "none");
toastr['success']('Line Stoppage closed Successfully');
//var results = JSON.parse(data);
//if (results.length == 0) {
// jQuery("#wait").css("display", "none");
//} else {
// f_group_data = results.Table;
// bindDropDown("function_name", f_group_data, "FUNCTION", "FUNCTION", "Select");
// jQuery('#function_name').chosen();
// jQuery('#function_name').trigger("chosen:updated");
// jQuery("#wait").css("display", "none");
//}
QrCodeImage.setAttribute('src', "data:image/jpg;base64," + data);
//setTimeout(function () {// wait for 5 secs(2)
// location.reload(); // then reload the page.(3)
//}, 3000);
},
error: function (data) {
jQuery("#wait").css("display", "none");
console.log("error");
}
});
I am not getting correct formate of base64 string and getting below error in console.
Failed to load resource: net::ERR_INVALID_URL
Below value I am getting in data variable
""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RhumON2gRI/StEYbT26NNkxrtFG/a402TGu08eTWaMMUpxuU6FGa1mjjya3RhmmNNup3rdGGaY02ntwabZjidIMSPUrTGm08uTXaMK3RRv2uNdowrdHGk1ujDVOcblCiR2lao40nt0YbpjXaqN+1RhumNdp4cmu0YYrTDUr0KE1rtPHk1mjDtEYb9bvWaMO0RhtPbo02THG6QYkepWmNNp7cGm2Y1mijftcabZjWaOPJrdGGKU43KNGjNK3RxpNbow3TGm3U71qjDdMabTy5NdowxekGJXqUpjXaeHJrtGFao436XWu0YVqjjSe3RhumON2gRI/StEYbT26NNkxrtFG/a402TGu08eTWaMMUpxuU6FGa1mjjya3RhmmNNup3rdGGaY02ntwabZjidIMSPUrTGm08uTXaMK3RRv2uNdowrdHGk1ujDVOcblCiR2lao40nt0YbpjXaMK3RhmmNNkxrtGFao40nt0YbpjjdoESP0rRGG09ujTZMa7RhWqMN0xptmNZow7RGG09ujTZMcbpBiR6laY02ntwabZjWaMO0RhumNdowrdGGaY02ntwabZjidIMSPUrTGm08uTXaMK3RhmmNNkxrtGFaow3TGm08uTXaMMXpBiV6lKY12nhya7RhWqMN0xptmNZow7RGG6Y12nhya7RhitMNSvQoTWu08eTWaMO0RhumNdowrdGGaY02TGu08eTWaMMUpxuU6FGa1mjjya3RhmmNNkxrtGFaow3TGm2Y1mjjya3RhilONyjRozSt0caTW6MN0xptmNZow7RGG6Y12jCt0caTW6MNU5xuUKJHaVqjjSe3RhumNdowrdGGaY02TGu0YVqjjSe3RhumON2gRI/StEYbT26NNkxrtGFaow3TGm2Y1mjDtEYbT26NNkxxukGJHqVpjTae3BptmNZow7RGG6Y12jCt0YZpjTae3BptmOJ0gxI9StMabTy5NdowrdGGaY02TGu0YVqjDdMabTy5NdowxekGJXqUpjXaeHJrtGFaow3TGm2Y1mjDtEYbpjXaeHJrtGGK0w1K9ChNa7Tx5NZow7RGG6Y12jCt0YZpjTZMa7Tx5NZowxSnG5ToUZrWaOPJrdGGaY02TGu0YVqjDdMabZjWaOPJrdGGKU43KNGjNK3RxpNbow3TGm2Y1mjDtEYbpjXaMK3RxpNbow1TnG5QokdpWqON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…"

The base64 value you provided in your question is malformed, my recommendation is to not use Json Serialization for this Api response effort.
Try using Convert.ToBase64String
Ensure the method returns string
and the jQuery request accepts/expects text for dataType
response.
Diff in your Api Endpoint
public IActionResult SaveVisitorEntry(string FirstName, string LastName)
{
...
return Ok(Convert.ToBase64String(BitmapToBytes(qrCodeImage)));
}
Diff in your request
jQuery.ajax({
dataType: "text",
success: function (data) {
QrCodeImage.setAttribute('src', "data:image/jpg;base64," + data);
}
});
Edit
Correction on contentType, shoul be dataType that is changed to handle response of request.
Additionally,
Though I'm not certain this is related to the issue you're observing here, I do think the data request payload should be an object, not a string.
...
type: "POST",
data: {
FirstName: FirstName,
LastName: LastName
},
dataType: "text",
...
You should also consider handling scenarios where both Firstname and Lastname parameter are null, whitespace or string.Empty in your Api endpoint.
I would also string.Trim() here as a sanity effort: qrGenerator.CreateQrCode($"{FirstName} {LastName}".Trim(), QRCodeGenerator.ECCLevel.Q);

Related

asmx, javascript, HTTP GET issue

First of all- I know I should use HTTP POST and I know how to do it.
But my task is to use HTTP GET anyway. Now, there's a problem. I have a WebMethod:
[WebMethod]
[ScriptMethod(ResponseFormat=ResponseFormat.Json,UseHttpGet =true)]
public List<string> AddToCollection(string name, string lastname)
{
collection.Add(name + " " + lastname);
return collection;
}
Now, code from .js :
function AddToArray() {
var name = document.getElementById("name_add").value;
var lastname = document.getElementById("surname_add").value;
if (name == "" || lastname == "") {
alert("Wrong!");
} else {
var dataT = JSON.stringify({"name":name,"lastname":lastname});
$.ajax({
type: "GET",
url: "http://localhost:45250/ServiceJava.asmx/AddToCollection",
data: dataT,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
//something
}
})
}
}
Now the thing is: it works perfect when I use type POST. But with GET I get the error that the parameter name cannot be recognized. What should I change to make it work?

Ajax Post always returns an error

Hi i am trying to call a C# method to return a json but keep getting errors.
$.ajax({
type: 'POST',
url: 'ReportList.aspx/GetReports',
dataType: 'json',
success: function (response) {
dataset = response.d;
},
error: function (response, success, error) {
alert("Error: " + error);
}
});
The error i am getting reads as:
Unexpected token <
Previously i had contentType: 'application/json; charset=utf-8', added but that returned a internal server error.
I would like to call json so that i may populate a javascript.datatable.
C# Function:
public string GetReports()
{
System.Data.DataSet d;
d = (System.Data.DataSet)Session["dsHistory"];
System.Data.DataSet DsNew = new System.Data.DataSet("cdreports");
System.Data.DataTable table1 = new System.Data.DataTable("reports");
table1.Columns.Add("id");
table1.Columns.Add("name");
table1.Columns.Add("regAndId");
table1.Columns.Add("type");
table1.Columns.Add("timeStamp");
foreach (System.Data.DataRow row in d.Tables["company"].Rows)
{
table1.Rows.Add(row["rc_id"], row["companyname"], row["companyregnumber"], "Company", row["rc_timestamp"]);
}
foreach (System.Data.DataRow row in d.Tables["director"].Rows)
{
table1.Rows.Add(row["rd_id"], row["firstname"] + " " + row["surname"], row["idnumber"], "Director", row["rd_timestamp"]);
}
DsNew.Tables.Add(table1);
string json = JsonConvert.SerializeObject(DsNew, new DataSetConverter());
return json;
}
Make sure trace is disabled on the page. Sometimes ajax calls don't work if page tracing is enabled.

Some issues page has a querystring while using ajax

I have some problem ajax with query string, I can send the data if page does not have and Info.aspx/Save works great. But when I fill somethings with query string then post same data it will return http 500 error. I have nothing with querystring in javascript I use it in C# for id.
var data = '{name: "' + $("input[name$='name']").val() +
'",description: "' + $("input[name$='description']").val() +
'",code: "' + $("input[name$='code']").val() +'"}';
$.ajax({
type: "POST",
url: "Info.aspx/Save",
data: data,
contentType: "application/json",
dataType: "json",
success: function (data) {
var result = data.d
console.log(result)
if (result > 0)
success.show();
else
error.show();
Metronic.scrollTo(error, -200);
},
error: function () {
console.log('err')
}
});
[WebMethod]
public static int Save(string name, string description, string code)
{
ClassInfo classInfo = new ClassInfo();
return ClassInfo.Save(name, code, description, FileInfo.id);
}
I just use querystring in C# for filling inputs. Altough I send same data it works without querystring inpgae's adressbar, If it has querystring in addressbar ajax returns me http500 error and Save WebMethod does not work.
data types must be object, no string.
var data = {name: $("input[name$='name']").val() ,description:$("input[name$='description']").val(),code:$("input[name$='code']").val()};
Remove the contentType or change it to
"application/x-www-form-urlencoded; charset=utf-8"
Then
$.post('/Info.aspx/Save',data ,
function (data) {
});
Or
$.ajax({
url: '/Info.aspx/Save',
data: data
});
Server side
Your json parameter names must be same with the c# paramter names.
[WebMethod(true)]
public static string Save(string name, string description, string code)
{
return name+" "+description+" "+code;
}
Usable for Web Method and Query String(working for both)
The query string parameters need to be passed as JSON.
data: JSON.stringify({ "name": "name", "description": "description","code":"code" }),
contentType: "application/json; charset=utf-8"
Server side
[WebMethod(true)]
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
public static String Save(string name, string description, string code)
{
}

How do I get the right $.ajax data type

could you please help with this. I have the following javascript:
$('form').click(function (e)
{
if (e.target.getAttribute('id') === 'SubmitAddLevel')
{
var parent = $('#' + e.target.getAttribute('attr')),
var Data = [];
parent.find('.input').children().each(function (i, e)
{
Data.push(e.getAttribute('id') + ":" + e.value);
console.log(Data);
});
$.ajax({
type: "POST",
url: 'AjaxControls.aspx/CreateUserLevel',
//data: Data, //.join(','),
dataType: "text",
contentType: "application/json; charset=utf-8",
//error: function (er) { alert(er); },
success: function (response)
{
if (response.d === "true")
{
$("#ErrorDivAddLevel").html('Level created successfully!').fadeIn('slow');
}
else
{
$("#SuccessDivAddLevel").html('Level creation failed!').fadeIn('slow');
}
},
});
}
The result of 'Data' I got on the console is :["LevelNameAddLevel:Admin", "PriviledgeIDAddLevels:|1|2|3|4|5|6|7|"]. How do I convert this to what ajax will pass to my web menthod?
Here is the web method
<WebMethod(EnableSession:=True)>
Public Shared Function CreateUserLevel(userLevel As String, userPriviledges As String) As String
return "true"
end function
I think your Data should look something more like this:
[{"LevelNameAddLevel":"Admin"}, {"PriviledgeIDAddLevels":"|1|2|3|4|5|6|7|"}]
So you have key / value pairs inside of an array. In the request, you should then be able to fetch the data via the keys in the request.
But I'm not quite sure what this is supposed to mean : "|1|2|3|4|5|6|7|"

Posting JSON string to ASP.NET MVC 3 action results in null parameter

I am posting a JSON string to asp.net MVC as follows.
AJAX call
$.ajax({
type: "POST",
url: "#(storeLocation)IDR/OpcInsertCustomerProfile/",
data: JSON.stringify(currSelection),
contentType: "application/json",
success: function(data) {
alert('success : ' + JSON.stringify(data));
},
error: function(data) {
alert('Error : ' + JSON.stringify(data));
}
}
);
In the controller:
[HttpPost]
[ActionName("OpcInsertCustomerProfile")]
public JsonResult OpcInsertCustomerProfile(string currSelectionData)
{
try
{
JavaScriptSerializer ser = new JavaScriptSerializer();
var res = ser.Serialize(currSelectionData);
return Json(currSelectionData, JsonRequestBehavior.AllowGet);
}
catch (Exception exc)
{
return Json(new { error = 1, message = exc.Message });
}
}
Debugger indicates the action gets called successfully, however the incoming string parameter being received is always null. Firebug 'post' shows outgoing parameter is proper json object. I am expecting to see the JSON string as incoming parameter. Please note that I don't want to de-serialise it into proper object. All I want to do is store the string in JSON format 'as-it-is' in a database. Later on it needs be retrieved ans passed to Javascript as it is.
Try this :
$.ajax({
type: "POST",
url: "#(storeLocation)IDR/OpcInsertCustomerProfile/",
data: { "currSelectionData" : "'" + JSON.stringify(currSelection) + "'" },
contentType: "application/json",
success: function(data) {
alert('success : ' + JSON.stringify(data));
},
error: function(data) {
alert('Error : ' + JSON.stringify(data));
}
}
);
One way is to allow the action to receive the parameter as POST data instead of JSON "Stringified" data. To do that, post the data without JSON.Stringify. Hopefully this is what you need.
If not you might want to try creating an object just to receive this simple data.
Look at your action method: is it correct that method accepts string with serialized JSON, than serialized that string as JSON again and then dismiss the result and serializes and returns the same string again?
If you send request with application/json type ASP.NET MVC tries to deserialize received string and bind it to action parameters: in your case it tries to find property currSelectionData inside your JSON object. Is that property exists? Maybe you expect whole string is received as currSelectionData parameter? Then you need to use FormCollection or Request.Form instead because default model binder does not support this.
Actually i fill my state dropdown in selection of country with json i do like this
in my controller i have action it's return my data in json format like this it's below
public JsonResult State(int countryId)
{
var stateList = CityRepository.GetList(countryId);
return Json(stateList, JsonRequestBehavior.AllowGet);
}
in my view
<script type="text/javascript">
function cascadingdropdown() {
$("#stateID").empty();
$("#stateID").append("<option value='0'>--Select State--</option>");
var countryID = $('#countryID').val();
$.ajax({
url: "/City/State",
dataType: 'json',
data: { countryId: countryID },
success: function (data) {
$("#stateID").empty();
$("#stateID").append("<option value='0'>--Select State--</option>");
$.each(data, function (index, optiondata) {
alert(optiondata.StateName);
$("#stateID").append("<option value='" + optiondata.ID + "'>" + optiondata.StateName + "</option>");
});
},
error: function () {
alert('Faild To Retrieve states.');
}
});
}
</script>
i think this will help you...
When sending json through Ajax, I think this is the right approach for the data property in Ajax:
data: "{'parameterNameInAction':'" + JSON.stringify(jsonData) + "'}"

Categories

Resources