Develop Reference

How do you pass perameter from a view to a controller function using ajax

I have a view with a button to call ajax but now need to include a parameter new { DNumber = item.DrawingNumber } and have that passed into the controller via ajax. What do I need to add to my code to make this work please?
view:
PDF
<script>
function OpenDrawingPDF() {
$.ajax({
url: "OpenDrawingPDF",
success: function () { alert("success"); }
});
return false;
}
</script>
Controller:
public void OpenDrawingPDF(string DNumber)
{
string Path = #"\\Serv1\Company\10 - Production\Production Drawings\CAD pdf\";
if (Directory.Exists(Path))
{
string Folder = DNumber.Substring(4, 2) + #"\";
System.Diagnostics.Process.Start(Path + Folder + DNumber + ".pdf");
}
}

Check the following approach. Provide your Id to your element holding a DBNumber and then access it from your function:
var dbNumber = $('#dbNumberItemId').val();
$.ajax({
url: "OpenDrawingPDF",
type: "Get", // I assume that you are sending get request
data: {
dbNumber: dbNumber
},
...
});

This was the solution that worked for me:
view:
<a id="myid" data-mydata1=#item.DrawingNumber href="javascript:" onclick="myPDF('tblCircuitDiagrams', this)">PDF</a>
<script>
function myPDF(table, value) {
var mydata = document.querySelector('#myid');
var dbNumber = value.dataset.mydata1;
$.ajax({
url: "OpenDrawingPDF",
data: { DNumber : dbNumber },
cache: false,
type: "GET"
});
}
</script>
controller:
public void OpenDrawingPDF(string DNumber)
{
string Path = #"\\serv1\Company\10 - Production\Production Drawings\CAD pdf\";
if (DNumber != null && Directory.Exists(Path))
{
string Folder = DNumber.Substring(4, 2) + #"\";
System.Diagnostics.Process.Start(Path + Folder + DNumber + ".pdf");
}
}

File Upload Through JQuery AJAX In ASP.NET MVC

I have a requirement of sending invitations to candidates where a user selects the excel file, transfers it from ajax to controller and validates its size, type etc. Then user clicks on Send Invite button and sends the email invites(having excel file). Please find the below code for reference:
<button type="button" id="bulkuploadButton">Bulk Email Upload</button>
<input type="file" id="ExcelFile" name="ExcelFile" style="display:none" onchange="UploadFile();" onselect="UploadFile();" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
Jquery:
function UploadFile() {
if (ValidateExcelFile()) {
var excelFile = document.getElementById('ExcelFile');
formData = new FormData();
if (excelFile.files.length > 0) {
for (var i = 0; i < excelFile.files.length; i++) {
formData.append('file-' + i, excelFile.files[i]);
}
}
$.ajax({
url: url here,
type: "POST",
dataType: 'json',
processData: false,
contentType: false,
data: formData,
success: function (data) {
// Further Processing
},
error: function (err) {
//Error
}
});
}
}
Controller:
[HttpPost]
public JsonResult MyController(HttpPostedFileBase excelFile)
{
if (Request.Files.Count > 0)
{
foreach (string file in Request.Files)
{
excelFile = Request.Files[file];
}
var result = //Call Model here for validation checks and return error msges
TempData["ExcelFile"] = excelFile; //Store in TempData for further processing
return Json(result);
}
return null;
}
The validations are done successfully, now its time to send invite to candidates as:
<button onclick="SendInvite">Send Invitations</button>
Jquery:
function SendInvite() {
//Check validations for other inputs on the page
//Get the excel file same as above
var excelFile = document.getElementById('ExcelFile');
formData = new FormData();
if (excelFile.files.length > 0) {
for (var i = 0; i < excelFile.files.length; i++) {
formData.append('file-' + i, excelFile.files[i]);
}
}
$.ajax({
type: "POST",
url: url here,
data: JSON.stringify({
myModel: myModel,
excelFile: formData
}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
},
error: function (data) {
}
});
}
Controller:
public JsonResult MyController2(MyModel myModel, HttpPostedFileBase excelFile)
{
//I tried the same method to get the file but it didn't help me
if (Request.Files.Count > 0) //Here Request.Files.Count = 0, it should be = 1 instead
{
foreach (string file in Request.Files)
{
excelFile = Request.Files[file];
}
}
//I then tied to use TempData but it does not have the excel data
excelFile = TempData["ExcelFile"] as HttpPostedFileBase;
//Further processing
I am getting this error while fetching data from TempData. ContentLength is 0 and also the data attribute is null
The data in TempData should be something like this (where ContentLength !=0
and data attribute has some value):
Can anyone help me get the excel data in controller MyController2.

Change the function SendInvite() as:
function SendInvite() {
//Check validations for other inputs on the page
//Get the excel file same as above
var excelFile = document.getElementById('ExcelFile');
formData = new FormData();
formData.append("data", JSON.stringify(myModel));
for (var i = 0; i < excelFile.files.length; i++) {
var file = ExcelFile.files[i];
formData.append("excelFile", file);
}
$.ajax({
type: "POST",
url: url here,
data: formData,
contentType: "application/json; charset=utf-8",
dataType: "json",
contentType: false,
processData: false,
success: function (data) {
},
error: function (data) {
}
});
}
and in controller
public JsonResult MyController2(string data, HttpPostedFileBase[] excelFile)
{
MyModel myModel = JsonConvert.DeserializeObject<MyModel>(data);
if (Request.Files.Count > 0)
{
//Do data processing here
}
//Further processing
Check this link How to Pass Image File and Form Data From Ajax to MVC Controller

How to pass raw complex object to MVC action?

Problem: Can't parse File object to JSON string, when doing that only null values are gotten, while trying to send complex type to MVC controller.
I tried adding it into FormData object and passing it to controller, however, passing List of them was not successful, because it would either return an empty array or just plain null
model:
public class UploadedDocument
{
public HttpPostedFile File { get; set;}
public string DocumentId { get; set;}
public string DocumentType { get; set; }
}
controller:
[HttpPost]
[ActionName("UploadFile")]
public ActionResult Upload(IEnumerable<UploadedDocument> documents)
{
return View();
}
upload function:
var _documents = [];
for (var i = 0; i < arrayOfFiles.length; i++) {
var document = {
"File": arrayOfFiles[i].file,
"DocumentId": arrayOfFiles[i].documentId,
"DocumentType": arrayOfFiles[i].documentName
};
_documents.push(document);
}
$.ajax({
url: "#Url.Action("UploadFile", "Home")",
type: "POST",
data: {"documents":_documents}
});
}
});

Basically, I manage to handle single upload via ajax like below
Input Element
<input type="file" name="customerpicture" id="customerpicture" />
Formdata
function getFormData() {
var data = new FormData();
var files = $("#customerpicture").get(0).files;
if (files.length > 0) {
data.append("file", files[0]);
}
//data.append("Name", $("#name").val());
return data;
}
Ajax Method
$('#InsertCustomer').click(function () {
debugger;
var antiForgeryToken = $("input[name=__RequestVerificationToken]").val();
var url = '#Url.Action("Add_Customer", "Customer")';
$.ajax({
type: 'POST',
headers: { "__RequestVerificationToken": antiForgeryToken },
url: url,
contentType: false,
processData: false,
data: getFormData(),
success: function (res) {
$('#custinsertmodal').modal('hide');
$('#custinsertmodal').find("input,textarea,select")
.val('')
.end()
.find("input[type=checkbox], input[type=radio]")
.prop("checked", "")
.end();
bootbox.alert({ message: res.result });
}
});
});
Controller
[HttpPost, ValidateHeaderAntiForgeryToken]
public JsonResult Add_Customer()
{
var errMsg = string.Empty;
byte[] tmpImage;
try
{
//Customer Image Processing
var file = Request.Files.Get("file");
if (file != null && file.ContentLength > 0)
{
//Image Saving to Folder
UploadHelper.UploadFile(file);
//Image Saving to Database
tmpImage = new byte[file.ContentLength];
file.InputStream.Read(tmpImage, 0, file.ContentLength);
CustomerModel model = new CustomerModel
{
Signature = tmpImage
};
_setupRepo.CreateSignatory(model);
return Json(new { error = false, result = $"Customer was successfully created" }, JsonRequestBehavior.AllowGet);
}
catch (Exception ex)
{
errMsg = ex.Message.ToString();
return Json(new { error = true, result = errMsg }, JsonRequestBehavior.AllowGet);
}
}

If you want to specifically use an ajax call to upload files: you need to use a FormData object. Files must be sent up as a single item within the FormData object and therefore cannot be passed to your ActionResult as part of a list.
Assuming you have a dynamic amount of file inputs on your page with custom fields the user can fill in, your code could look like the following:
HTML / Javascript:
<form id="File_Form">
<input type="file" name="File_1" />
<input type="text" name="DocumentName_File_1" value="doc1" />
<input type="text" name="DocumentId_File_1" value="1" />
<input type="file" name="File_2" />
<input type="text" name="DocumentName_File_2" value="doc2" />
<input type="text" name="DocumentId_File_2" value="2" />
<button>Upload Files</button>
</form>
<script>
$("#File_Form").submit(function() {
var formData = new FormData(this);
$.ajax({
url: '#Url.Action("UploadFiles")',
type: 'POST',
data: formData,
processData: false,
contentType: false,
cache: false
});
return false;
});
</script>
C#:
[HttpPost]
public ActionResult UploadFiles() {
foreach (string fileName in Request.Files) {
HttpPostedFileWrapper file = Request.Files[fileName];
string documentName = Request.Form[$"DocumentName_{fileName}"]?.ToString();
string documentId = Request.Form[$"DocumentId_{fileName}"]?.ToString();
// Do things with your file here.
}
return new HttpStatusCodeResult(System.Net.HttpStatusCode.OK);
}
It may not automatically serialize into your model object, but you can still obtain the result you want with clever naming of your form elements.

Try this.
var _documents = [];
for (var i = 0; i < arrayOfFiles.length; i++) {
var document = {
"File": arrayOfFiles[i].file,
"DocumentId": arrayOfFiles[i].documentId,
"DocumentType": arrayOfFiles[i].documentName
};
_documents.push(document);
}
var formData = new FormData();
formData.append("documents", documents);
$.ajax({
url: "#Url.Action("UploadFile", "Home")",
type: "POST",
data: formData,
processData: false,
contentType: false,
});
}
});

AJAX not getting response because of page refresh

I am implementing a feature which allows a user to upload a file which is processed server-side with some information returned as a JsonResult. This worked fine with another AJAX request where I sent only strings. It seems like because FormData is being sent it causes a page refresh, which for me means I never reach the response part of my code. I would appreciate it a lot if someone dug me out of this hole, thanks!
MyPage.cshtml
<input id="readFromFile" type="file"/>
<button class="btn btn-primary" type="submit" onclick="ResultsFromFile()">Get Results</button>
<script>
function ResultsFromFile() {
var temp = $("#readFromFile")[0].files;
if (temp.length > 0) {
if (window.FormData !== undefined) {
var data = new FormData();
for (var x = 0; x < temp.length; x++) {
data.append("file" + x, temp[x]);
}
$.ajax({
type: "POST",
url: 'AlexaIndex?handler=GetResultsFromFile',
headers: { "XSRF-TOKEN": $('input:hidden[name="__RequestVerificationToken"]').val() },
contentType: false,
processData: false,
data: data,
success: function (response) {
console.log('result is ' + response);
var jsonObj = JSON.parse(response);
PopulateTable(jsonObj);
}
});
}
}
</script>
MyPage.cshtml.cs
public JsonResult OnPostGetResultsFromFile()
{
foreach (var file in Request.Form.Files)
{
var path = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", file.FileName);
using (var stream = new FileStream(path, FileMode.Create))
{
file.CopyTo(stream);
}
var urlList = ReadFileOfUrls(path);
ModelState.Clear();
var results = _alexaExtractorService.GetAwisResults(urlList);
var json = JsonConvert.SerializeObject(results);
return new JsonResult(json);
}
return new JsonResult("FINITO MINITO");
}

The reason it's happening is because your button is wrapped in a form element, and all button elements with type="submit" will post the form to the server. Prevent the submit button from actually submitting by preventing that default action with e.preventDefault();
<input id="readFromFile" type="file"/>
<button class="btn btn-primary" type="submit" onclick="ResultsFromFile(event)">Get Results</button>
<script>
function ResultsFromFile(e) {
e.preventDefault();
var temp = $("#readFromFile")[0].files;
if (temp.length > 0) {
if (window.FormData !== undefined) {
var data = new FormData();
for (var x = 0; x < temp.length; x++) {
data.append("file" + x, temp[x]);
}
$.ajax({
type: "POST",
url: 'AlexaIndex?handler=GetResultsFromFile',
headers: { "XSRF-TOKEN": $('input:hidden[name="__RequestVerificationToken"]').val() },
contentType: false,
processData: false,
data: data,
success: function (response) {
console.log('result is ' + response);
var jsonObj = JSON.parse(response);
PopulateTable(jsonObj);
}
});
}
}
</script>

Change the button type to type="button" instead of type="submit".
<button class="btn btn-primary" type="button" onclick="ResultsFromFile()">Get Results</button>

Pass variable from jquery to code behind

<asp:Button ID="Button1" runat="server" Text="Submit" />
<script>
$(document).ready(function () {
$("#Button1").click(function () {
var list = [];
var a= $("#TextBox1").val();
var b= $("#TextBox2").val();
var count = a* b;
list.push('test');
for (var i = 1; i <= count; i++) {
var item = $("#DropDownList_" + i + "_").find(":selected").text();
list.splice(i, 0, item);
console.log(list.join());
alert(list[i]);
}
});
});
</script>
Hello guys first time at the stack! I have this jquery code that get all choices of dropdown list and store it in array.
I want pass this array to c# so I can store the values in DB, please help.

You can simply do this using jQuery ajax:-
var dataToSend = { "Data": list};
$.ajax({
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
url: "Default.aspx/SaveData",
data: JSON.stringify(dataToSend),
success: function (msg) {
//success data if any
},
error: function (msg) { //handle error here }
});
Add this method in your page behind (Default.aspx.cs):-
[WebMethod]
public static void SaveData(string[] Data)
{
//Save data to DB
}