We Keep Coding

How to POST Data from HTML Page via WebApi in MVC Controller

Function which is use to take input data from HTML
function saveclickdata()
{
var allData = {
InvNo:document.getElementById('TbInvNo').value,
GrossSale:document.getElementById('TbOrderTotal').value,
discount:document.getElementById('TbDiscount').value,
CusCash:document.getElementById('TbCash').value,
CusBal:document.getElementById('TbBalance').value,
};
$.ajax({
url: "\Controllers\POSController.cs\SaveData",
type: 'POST',
data: allData,
success: function (res) {
alert("success");
},
error: function (err) {
alet("Error");
}
});
Api which is in controller used to post data
[HttpPost]
JsonResult SaveData(POSMater collection)
{
if (collection.InvNo.ToString() == null)
{
var LocalInvNo = (from b in db.TblPOSMasters select b).FirstOrDefault();
int MaxInvNo = Convert.ToInt32(LocalInvNo) + 1;
collection.InvNo = MaxInvNo;
TblPOSMaster master = new TblPOSMaster();
master.InvNo = collection.InvNo;
master.AddBy = 1;
master.AddDate = DateTime.Now;
master.CashStatus = "A";
master.CompId = 1;
//master.CreditAmt = collection.CreditAmt;
//master.CrCardNo = collection.CrCardNo;
master.CusCash = collection.CusCash;
master.CusId = 1;
master.GrossSale = collection.GrossSale;
db.TblPOSMasters.Add(master);
db.SaveChanges();
}
else
{
return Json(collection);
}
return Json(collection);
}
What should i do? My html button working properly but still not able to call api

I think you ought to use forward slashes (/) in your URL

DropDownList with java script

I hope developers can support me, I have minimal experience in the use of java script.
After investigating and several attempts, I was able to load a dropdownlist with data from a LINQ query and pass as a parameter the value of a textbox.
What I could not do is from the query Linq get two fields (Id and value) send them to the dropdownlist and show the value but after being able to use the Id of that field to be able to use it in a create, currently I can only show the value but I need the Id too.
View
#Html.TextBox("CP", "", new { #id = "txtCP", #onchange = "FillOption();", #placeholder = "Codigo Postal" })
#Html.DropDownList("Asentamientos", ViewBag.Drop as List<SelectListItem>)
Script
<script>
function FillOption() {
var CP = $('#txtCP').val();
$.ajax({
type: "Post",
url: "/Home/GetAsentamiento",
data: { CP: CP },
dataType: 'json',
success: function (data) {
$("#Asentamientos").empty();
for (var i = 0; i < data.length; i++) {
$('#Asentamientos').append('<option value=' + data[i].Value + '>' + data[i].Text + '</option > ');
}
}
});
}
</script>
Controllers
public ActionResult Index()
{
List<SelectListItem> drop = new List<SelectListItem>
{
};
ViewBag.Drop = drop;
return View();
}
[HttpPost]
public ActionResult GetAsentamiento(string CP)
{
var drop2 = (from p in db.CodigosPostales where p.CodigoPostal == CP select p.Asentamiento).ToList();
SelectList lista = new SelectList(drop2);
ViewBag.lista = lista;
return Json(ViewBag.lista);
}
I think of something like
[HttpPost]
public ActionResult GetAsentamiento(string CP)
{
var drop2 = (from p in db.CodigosPostales where p.CodigoPostal == CP select new { p.IdCodigoPostal,p.Asentamiento}).ToList();
SelectList lista = new SelectList(drop2);
ViewBag.lista = lista;
return Json(ViewBag.lista);
}
but I do not know how the id and the value would be handled
Thanks

If I understand your question correctly, I think you need to name the fields of the object you are creating with the Linq expression, so that it would look something like this:
[HttpPost]
public ActionResult GetAsentamiento(string CP)
{
var drop2 = (from p in db.CodigosPostales where p.CodigoPostal == CP select new { id = p.IdCodigoPostal, value = p.Asentamiento}).ToList();
SelectList lista = new SelectList(drop2);
ViewBag.lista = lista;
return Json(ViewBag.lista);
}
Here are a few examples: https://code.msdn.microsoft.com/LINQ-to-DataSets-09787825#SelectAnonymousTypes1
Then you could access those fields from you javascript with data[i].id and data[i].value.
I hope this helps.

I suspect your issue is around pulling the data from the API result. You're setting the a new property in the ViewBag, then returning the ViewBag property. This really shouldn't be required, and you should instead just return your list, list so (Note: and SelectItemList has a property called "Items" which contains all items you've added):
[HttpPost]
public ActionResult GetAsentamiento(string CP)
{
var drop2 = (from p in db.CodigosPostales where p.CodigoPostal == CP select new { p.IdCodigoPostal,p.Asentamiento}).ToList();
SelectList lista = new SelectList(drop2);
return Json(lista.Items);
}
This should return just a nice list of ListItems. You could also just change your jQuery to loop through the items property, like so:
<script>
function FillOption() {
var CP = $('#txtCP').val();
$.ajax({
type: "Post",
url: "/Home/GetAsentamiento",
data: { CP: CP },
dataType: 'json',
success: function (data) {
$("#Asentamientos").empty();
for (var i = 0; i < data.Items.length; i++) {
$('#Asentamientos').append('<option value=' + data.Items[i].Value + '>' + data.Items[i].Text + '</option > ');
}
}
});
}
</script>

Thanks to all, the code works as follows
Controller
[HttpPost]
public ActionResult GetAsentamiento(string CP)
{
var drop2 = (from p in db.CodigosPostales where p.CodigoPostal == CP select new { Value = p.IdCodigoPostal, Text= p.Asentamiento }).ToList();
SelectList lista = new SelectList(drop2);
return Json(lista.Items);
}
Script
<script>
function FillOption() {
var CP = $('#txtCP').val();
$.ajax({
type: "Post",
url: "/Home/GetAsentamiento",
data: { CP: CP },
dataType: 'json',
success: function (data) {
$("#Asentamientos").empty();
for (var i = 0; i < data.length; i++) {
$('#Asentamientos').append('<option value=' + data[i].Value + '>' + data[i].Text + '</option > ');
}
}
});
}

Jquery progress bar while uploading record into database in java

I have thousands of record which are stored in a excel sheet and I need to upload those records into database, And currently I am using Spring controller class for upload, And inside my class I use simple BufferedOutputStream and FileReader classes, So my requirement is I need to show a Jquery progress-bar including percentages while uploading my data into database.
Link here.
My sample code.
String rootPath = request.getSession().getServletContext().getRealPath("/");
File dir = new File(rootPath + File.separator + "uploadedfile");
if (!dir.exists()) {
dir.mkdirs();
}
File serverFile = new File(dir.getAbsolutePath() + File.separator + form.getEmpFile().getOriginalFilename());
try {
try (InputStream is = form.getEmpFile().getInputStream();
BufferedOutputStream stream = new BufferedOutputStream(new FileOutputStream(serverFile))) {
int i;
//write file to server
while ((i = is.read()) != -1) {
stream.write(i);
}
stream.flush();
}
}
catch (IOException e) {
model.addAttribute("msg", "failed to process file because : " + e.getMessage());
}
String[] nextLine;
try (FileReader fileReader = new FileReader(serverFile); CSVReader reader = new CSVReader(fileReader, ';', '\'', 1);) {
while ((nextLine = reader.readNext()) != null) {
for (int i = 0; i < nextLine.length; i++) {
nextLine[i] = nextLine[i].trim();
if (!nextLine[i].equals("")) {
String[] data = nextLine[i].split(",");

Maybe this can help:
1- Controller side :
public class ExtractController {
********
// I created a global variable here
int percentage = 0;
Workbook workbook;
#RequestMapping(value ="/uploadExcel", method = RequestMethod.POST)
public #ResponseBody String uploadExcel(Model model, #RequestParam("excelfile") MultipartFile excelfile,
HttpServletResponse response) {
**********
try {
int i = 0;
*********
while (i <= worksheet.getLastRowNum()) {
percentage = Math.round(((i * 100) / worksheet.getLastRowNum()));
Row row = worksheet.getRow(i++);
}
*********
}catch (Exception e) {
e.printStackTrace();
}
return "extract";
}
#RequestMapping(value = "/getpercent", method = RequestMethod.GET)
public #ResponseBody String getPerc(#RequestParam("param") String param) {
************
// you return the value of the global variable when the action is called
return percrentage;
}
}
1- JavaScript side :
$.ajax({
url : 'uploadExcel',
type : 'POST',
data : new FormData(this),
beforeSend : function() {
$('#valid').attr("disabled", true);
// I call my loop function
loop();
},
success : function(data) {
$('#valid').attr("disabled", false);
}
});
function loop() {
$.ajax({
url : 'getpercent',
type : 'GET',
success : function(response) {
count = response;
// this function updates my progress bar with the new value
change(count);
*********
}
});
var time = 2000;
if(count < 100){
setTimeout(loop, time);
}
}
;

How to call web API login action from Windows form app

I have a simple web API with registration, login, and call API module. I want to call each functionality from Windows form application.
In web API, I use the following script in JavaScript to call login method:
self.login = function () {
self.result('');
var loginData = {
grant_type: 'password',
username: self.loginEmail(),
password: self.loginPassword()
};
$.ajax({
type: 'POST',
url: '/Token',
data: loginData
}).done(function (data) {
self.user(data.userName);
// Cache the access token in session storage.
sessionStorage.setItem(tokenKey, data.access_token);
}).fail(showError);
}
my controller actions are as follows
// POST api/Account/AddExternalLogin
[Route("AddExternalLogin")]
public async Task<IHttpActionResult> AddExternalLogin(AddExternalLoginBindingModel model)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
Authentication.SignOut(DefaultAuthenticationTypes.ExternalCookie);
AuthenticationTicket ticket = AccessTokenFormat.Unprotect(model.ExternalAccessToken);
if (ticket == null || ticket.Identity == null || (ticket.Properties != null
&& ticket.Properties.ExpiresUtc.HasValue
&& ticket.Properties.ExpiresUtc.Value < DateTimeOffset.UtcNow))
{
return BadRequest("External login failure.");
}
ExternalLoginData externalData = ExternalLoginData.FromIdentity(ticket.Identity);
if (externalData == null)
{
return BadRequest("The external login is already associated with an account.");
}
IdentityResult result = await UserManager.AddLoginAsync(User.Identity.GetUserId(),
new UserLoginInfo(externalData.LoginProvider, externalData.ProviderKey));
if (!result.Succeeded)
{
return GetErrorResult(result);
}
return Ok();
}
// POST api/Account/RemoveLogin
[Route("RemoveLogin")]
public async Task<IHttpActionResult> RemoveLogin(RemoveLoginBindingModel model)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
IdentityResult result;
if (model.LoginProvider == LocalLoginProvider)
{
result = await UserManager.RemovePasswordAsync(User.Identity.GetUserId());
}
else
{
result = await UserManager.RemoveLoginAsync(User.Identity.GetUserId(),
new UserLoginInfo(model.LoginProvider, model.ProviderKey));
}
if (!result.Succeeded)
{
return GetErrorResult(result);
}
return Ok();
}
// GET api/Account/ExternalLogin
[OverrideAuthentication]
[HostAuthentication(DefaultAuthenticationTypes.ExternalCookie)]
[AllowAnonymous]
[Route("ExternalLogin", Name = "ExternalLogin")]
public async Task<IHttpActionResult> GetExternalLogin(string provider, string error = null)
{
if (error != null)
{
return Redirect(Url.Content("~/") + "#error=" + Uri.EscapeDataString(error));
}
if (!User.Identity.IsAuthenticated)
{
return new ChallengeResult(provider, this);
}
ExternalLoginData externalLogin = ExternalLoginData.FromIdentity(User.Identity as ClaimsIdentity);
if (externalLogin == null)
{
return InternalServerError();
}
if (externalLogin.LoginProvider != provider)
{
Authentication.SignOut(DefaultAuthenticationTypes.ExternalCookie);
return new ChallengeResult(provider, this);
}
ApplicationUser user = await UserManager.FindAsync(new UserLoginInfo(externalLogin.LoginProvider,
externalLogin.ProviderKey));
bool hasRegistered = user != null;
if (hasRegistered)
{
Authentication.SignOut(DefaultAuthenticationTypes.ExternalCookie);
ClaimsIdentity oAuthIdentity = await user.GenerateUserIdentityAsync(UserManager,
OAuthDefaults.AuthenticationType);
ClaimsIdentity cookieIdentity = await user.GenerateUserIdentityAsync(UserManager,
CookieAuthenticationDefaults.AuthenticationType);
AuthenticationProperties properties = ApplicationOAuthProvider.CreateProperties(user.UserName);
Authentication.SignIn(properties, oAuthIdentity, cookieIdentity);
}
else
{
IEnumerable<Claim> claims = externalLogin.GetClaims();
ClaimsIdentity identity = new ClaimsIdentity(claims, OAuthDefaults.AuthenticationType);
Authentication.SignIn(identity);
}
return Ok();
}
// GET api/Account/ExternalLogins?returnUrl=%2F&generateState=true
[AllowAnonymous]
[Route("ExternalLogins")]
public IEnumerable<ExternalLoginViewModel> GetExternalLogins(string returnUrl, bool generateState = false)
{
IEnumerable<AuthenticationDescription> descriptions = Authentication.GetExternalAuthenticationTypes();
List<ExternalLoginViewModel> logins = new List<ExternalLoginViewModel>();
string state;
if (generateState)
{
const int strengthInBits = 256;
state = RandomOAuthStateGenerator.Generate(strengthInBits);
}
else
{
state = null;
}
foreach (AuthenticationDescription description in descriptions)
{
ExternalLoginViewModel login = new ExternalLoginViewModel
{
Name = description.Caption,
Url = Url.Route("ExternalLogin", new
{
provider = description.AuthenticationType,
response_type = "token",
client_id = Startup.PublicClientId,
redirect_uri = new Uri(Request.RequestUri, returnUrl).AbsoluteUri,
state = state
}),
State = state
};
logins.Add(login);
}
return logins;
}
I am using the following code in winform to call the login action:
HttpClient client = new HttpClient();
Uri baseAddress = new Uri("https://localhost:44305/");
client.BaseAddress = baseAddress;
ArrayList paramList = new ArrayList();
user u = new user();
u.username = username;
u.password = password;
paramList.Add(u);
HttpResponseMessage response = client.PostAsJsonAsync("api/product/SupplierAndProduct", paramList).Result;
In the above code I tried to call controller actions but failed. To accomplish my goal even calling the JavaScript from winform app is fine.

HttpClient client = new HttpClient();
Uri baseAddress = new Uri("http://localhost:2939/");
client.BaseAddress = baseAddress;
ArrayList paramList = new ArrayList();
Product product = new Product { ProductId = 1, Name = "Book", Price = 500, Category = "Soap" };
Supplier supplier = new Supplier { SupplierId = 1, Name = "AK Singh", Address = "Delhi" };
paramList.Add(product);
paramList.Add(supplier);
HttpResponseMessage response = client.PostAsJsonAsync("api/product/SupplierAndProduct", paramList).Result;

Following answer will helpfull to you
call web api from c sharp

I usually use HttpWebRequest and HttpWebResponce in cases like yours:
//POST
var httpWebRequest = (HttpWebRequest)WebRequest.Create("path/api");
httpWebRequest.ContentType = "text/json";
httpWebRequest.Method = WebRequestMethods.Http.Post;
httpWebRequest.Accept = "application/json; charset=utf-8";
//probably have to be added
//httpWebRequest.ContentLength = json.Length;
//do request
using (var streamWriter = new StreamWriter(httpWebRequest.GetRequestStream()))
{
//write post data
//also you can serialize yours objects by JavaScriptSerializer
streamWriter.Write(json);
streamWriter.Flush();
}
//get responce
using (var httpResponse = (HttpWebResponse)httpWebRequest.GetResponse())
{
//read
using (Stream stream = httpResponse.GetResponseStream())
{
using (StreamReader re = new StreamReader(stream))
{
String jsonResponce = re.ReadToEnd();
}
}
}
//GET
var httpWebRequest = (HttpWebRequest)WebRequest.Create("path/api");
httpWebRequest.ContentType = "text/json";
httpWebRequest.Method = WebRequestMethods.Http.Get;
httpWebRequest.Accept = "application/json; charset=utf-8";
//get responce
using (var httpResponse = (HttpWebResponse)httpWebRequest.GetResponse())
{
//read
using (Stream stream = httpResponse.GetResponseStream())
{
using (StreamReader re = new StreamReader(stream))
{
String jsonResponce = re.ReadToEnd();
}
}
}
Also you sould read this SO answer

//GET
var httpWebRequest = (HttpWebRequest)WebRequest.Create("http://160.114.10.17:85/api/Inventory/GetProcessDataByProcessName?deviceCode=OvCHY1ySowF4T2bb8HdcYA==&processName=Main Plant");
httpWebRequest.ContentType = "text/json";
httpWebRequest.Method = WebRequestMethods.Http.Get;
httpWebRequest.Accept = "application/json; charset=utf-8";
//get responce
using (var httpResponse = (HttpWebResponse)httpWebRequest.GetResponse())
{
//read
using (Stream stream = httpResponse.GetResponseStream())
{
using (StreamReader re = new StreamReader(stream))
{
String jsonResponce = re.ReadToEnd();
}
}
}

angularjs post data to mvc controller in json format with multiple arrays

I am working on a project in which I have used angularjs and mvc.I am passing data from angular js controller to my mvc controller by $http.post().For now I am using single object/json array to retreive data like this -public bool UpdateIssueDetails(IssueBO issue).But I want that if I could do like this public public bool UpdateIssueDetails(IssueBO issue,List lstMembersToNotify).I want to send two json arrays from ny angular js controller to my above mvc controller method.
angularjs controller code
$scope.saveIssueDetails = function (issue) {
var milestoneId = "";
var milestoneName = "";
if ($scope.selectedIssue.Milestone== undefined) {
milestoneId = "";
milestoneName = "";
} else {
milestoneId = $scope.selectedIssue.Milestone.Id;
milestoneName = $scope.selectedIssue.Milestone.Name;
}
var arrMembersToNotify = [];
var arrMembersToNotifyNew = [];
var iCount = 0;
$("#membersToNotify input[type=checkbox]:checked").each(function () {
arrMembersToNotify = $(this).val().split("~");
arrMembersToNotifyNew.push({ "UserId": arrMembersToNotify[0], "UserDisplayName": arrMembersToNotify[1], "Email": arrMembersToNotify[2] });
});
var issueDetails =
{
Id: issue.Id,
ProjectId: issue.ProjectId,
ProjectName: issue.ProjectName,
IssueStatusId: $scope.selectedIssue.Status.Id,
StatusName: $scope.selectedIssue.Status.Name,
IssuePriorityId: $scope.selectedIssue.Priority.Id,
PriorityName: $scope.selectedIssue.Priority.Name,
AssignedUserId: $scope.selectedIssue.AssignedTo.Id,
AssigneeDisplayName: $scope.selectedIssue.AssignedTo.DisplayName,
IssueCategoryId: $scope.selectedIssue.Category.Id,
CategoryName: $scope.selectedIssue.Category.Name,
DueDate: $scope.selectedIssue.DueDate,
OwnerUserId: $scope.selectedIssue.OwnedBy.Id,
OwnerDisplayName: $scope.selectedIssue.OwnedBy.DisplayName,
IssueTypeId: $scope.selectedIssue.Type.Id,
IssueTypeName: $scope.selectedIssue.Type.Name,
IssueResolutionId: $scope.selectedIssue.Resolution.Id,
ResolutionName: $scope.selectedIssue.Resolution.Name,
MilestoneId: milestoneId,
MilestoneName: milestoneName,
Estimation: $scope.selectedIssue.Estimation,
Progress: $scope.selectedIssue.Progress,
};
var url = window.location.protocol + '//' + window.location.host + '/api/Issues' + '/UpdateIssueDetails/';
$http.post(url, [issueDetails, arrMembersToNotifyNew]).success(function (data, status, headers, config) {
if (data != '' || data.length >= 0 || data == true) {
//$scope.selectedIssue = issue;
//$scope.showIssueDetails($scope.selectedIssue);
$scope.GetAssignedIssues();
}
else if (data == '' || data == false) {
$scope.selectedIssue = null;
} else {
$scope.errors.push(data.error);
}
});
};
mvc controller code
[HttpPost]
[AuthenticationRequired]
public bool UpdateIssueDetails(IssueBO issue,List<IssueNotification> lstMembersToNotify)
{
try
{
//var issueDetails = JsonConvert.DeserializeObject<Dictionary<string, dynamic>>(issueAllDetails[0].ToString());
//List<Dictionary<string, string>> membersToNotifyDetails = JsonConvert.DeserializeObject<List<Dictionary<string, string>>>(issueAllDetails[1].ToString());
var membersToNotify = lstMembersToNotify.Select(membersToNotifyDetail =>
new IssueNotification()
{
UserId =membersToNotifyDetail.UserId,
Email =
membersToNotifyDetail.Email,
UserDisplayName =
membersToNotifyDetail.UserDisplayName
}).ToList();
var newIssue = new IssueBO
{
OwnerUserId = issue.OwnerUserId,
OwnerDisplayName = issue.OwnerDisplayName,
LastUpdatedUserId = SessionItems.UserId,
LastUpdaterDisplayName = SessionItems.DisplayName,
LastUpdatedOn = DateTime.Now,
ProjectId = issue.ProjectId,
ProjectName = issue.ProjectName,
Id = issue.Id,
AssignedUserId = issue.AssignedUserId,
AssigneeDisplayName = issue.AssigneeDisplayName,
IssueStatusId = issue.IssueStatusId,
StatusName = issue.StatusName,
Progress = issue.Progress,
IssuePriorityId = issue.IssuePriorityId,
PriorityName = issue.PriorityName,
IssueTypeId = issue.IssueTypeId,
IssueTypeName = issue.IssueTypeName,
IssueCategoryId = issue.IssueCategoryId,
CategoryName = issue.CategoryName,
IssueResolutionId = issue.IssueResolutionId,
ResolutionName = issue.ResolutionName,
DueDate = issue.DueDate,
Estimation = issue.Estimation,
MilestoneId = issue.MilestoneId,
MilestoneName = issue.MilestoneName
};
var result = BLL.AdminLayer.UpdateIssueDetail(newIssue, membersToNotify);
return result.IsSuccessful && result.Result;
}
catch (Exception ex)
{
BLL.Base.BaseLayer.WriteApplicationLog(ex);
return false;
}
}
I am passing two json array from my angularjs controller like this-$http.post(url, [issueDetails, arrMembersToNotifyNew]).success(function (data, status, headers, config).But I am getting error trying this.Please suggest how to achieve this.Thanks

You need to pass data to the action by using JSON.stringify()
$http.post(url, JSON.stringify({ issue: issueDetails,
lstMembersToNotify: arrMembersToNotifyNew
});

Post it as properties of an object.
$http.post(url, { issue: issueDetails, lstMembersToNotify: arrMembersToNotifyNew });