We Keep Coding

Why I cannot open a CSV file using JQuery and FileContentResult

I'm trying to make an ajax call (I specifically don't want to do it using ActionLink).
I'm having a controller that is like this:
public IActionResult ExportUsers(List<string> listOfEmails)
{
/*some data processing*/
return File(result, "text/csv", "ExportCandidates.csv");
}
On the other side with ajax I do this simple call:
$.ajax({
url: '/Admin/Testcenter/GenerateInvitationPreview',
type: 'post',
data: {
//some input data to send to the controller ​
​},
​success: function (response) {
​)
​}
​});
I know there exists something for pdf files where you return a base64 file and with the response in the ajax call you just write something like pdfWindow.document.write(...) and this will open a new window with a pdf file.
Is there a way to extract the response for my CSV file and generate it so the user downloads it ?

USE NPOI Library for Excel Sheet Generation
//Generate Excel Sheet
try
{
Guid gid = Guid.NewGuid();
string ext = ".xls";
string[] Headers = { "Appointments Id", "Date of Appointment", "Doctor Name", "Patient Name", "Visit Type", "Status" };
string fileName = "AppointmentsExcelSheet_" + gid.ToString() + ext;
var serverpath = _env.ContentRootPath;
string rootpath = serverpath + "/wwwroot/ExcelSheets/" + fileName;
FileInfo file = new FileInfo(Path.Combine(rootpath, fileName));
var memorystream = new MemoryStream();
using (var fs = new FileStream(rootpath, FileMode.Create, FileAccess.Write))
{
IWorkbook workbook = new XSSFWorkbook();
ISheet excelSheet = workbook.CreateSheet("Appointments List");
IRow row = excelSheet.CreateRow(0);
var font = workbook.CreateFont();
font.FontHeightInPoints = 11;
font.FontName = "Calibri";
font.Boldweight = (short)FontBoldWeight.Bold;
for (var i = 0; i < Headers.Length; i++)
{
var cell = row.CreateCell(i);
cell.SetCellValue(Headers[i]);
cell.CellStyle = workbook.CreateCellStyle();
cell.CellStyle.SetFont(font);
}
var result = _Appointment.GetAppoinmentsPDf();
int index = 1;
foreach (var app in result.Items)
{
//var PatientDob = Convert.ToDouble(app.PatientDOB);
row = excelSheet.CreateRow(index);
row.CreateCell(0).SetCellValue(app.AppointmentId);
row.CreateCell(1).SetCellValue(app.DateofAppointment+" "+app.TimeofAppointment);
row.CreateCell(2).SetCellValue(app.DoctorFullName);
row.CreateCell(3).SetCellValue(app.SelectedPatientName);
row.CreateCell(4).SetCellValue(app.PurposeofVisit);
if (app.IsActive == false)
{
row.CreateCell(5).SetCellValue("Inactive");
}
else
{
row.CreateCell(5).SetCellValue("Active");
}
index++;
}
workbook.Write(fs);
}
using (var filestream = new FileStream(rootpath, FileMode.Open))
{
filestream.CopyToAsync(memorystream);
}
memorystream.Position = 0;
//send filepath to JQuery function
response.Msg = "/ExcelSheets/" + fileName;
}
catch (Exception Ex)
{
//exception code
}
return Ok(reponse.Msg)
//JavaScript
function AppointmentsExcelSheet() {
//var token = Token;
//var link = path;
debugger
$.ajax({
//'Content-Type': 'application/pdf.',
type: "GET",
url: "/api/Appointments/GetAppointmentsExcelSheet",
beforeSend: function () {
$.blockUI({
message: ('<img src="/images/FadingLines.gif"/>'),
css: {
backgroundColor: 'none',
border: '0',
'z-index': 'auto'
}
});
},
complete: function () {
$.unblockUI();
},
success: function (data) {
debugger
//downloads your Excel sheet
window.location.href = data.msg;
}
});
}

The best way to do what you want to do is to not use AJAX, but use either a link click that opens a new window (since you are passing in parameters) If you could use a
<form target="_blank">
to open a form response. Inside the form can be a field or fields that contains the list of emails (it can be one field, or multiple input fields with the same name). Your action handler can accept that list, parse it, and return a File response, and the natural result of opening the new window from the form post operation is a file that opens up.

Refresh and Clear button aren't working on asp.net application

My 'Clear' and 'Refresh' buttons do not clear out my Branch and Terminal inputs on my webpage. I think it has something to do with my KnockoutJS since I bind the data to a table in the DB. Perhaps the KnockoutJS thing isn't functioning properly. The page is supposed to display the fetched data from the DB everytime 'Refresh' button is clicked too. But it seems like the code doesn't even fetch anything from the DB.
I'm new to learning the framework of asp.net so can anyone pls help me w my issue? T
I tried to look at other API functions and only tweaked a little parameters to fetch from the DB since there are different tables I need to fetch from. I also modified the Stored Procedure of the respective page for the API function to grab the data from SQL Server but still the page appears blank and the buttons aren't working.
buttons html
<div class="col-sm-5 col-md-5 col-lg-5 m-b-15">
<button id="btnRefreshForecastDetails" type="button" class="btn btn-primary btn-custom w-md waves-effect waves-light" data-bind="click: refresh"><i class="mdi mdi-refresh"></i> <span>Refresh</span></button>
<button id="btnClearAll" type="button" class="btn btn-primary btn-custom w-md waves-effect waves-light" onclick="ClearAll();"><i class="mdi mdi-close"></i> <span>Clear All</span></button>
</div>
.JS function
var ObservableModelMain = function () {
var self = this;
self.gifts = ko.observableArray();
self.refresh = function () {
StartLoadingPage();
url = sessionStorage.getItem('WebApiURL') + "IT_GetDetails?ID=" + sessionStorage.getItem('ID');
var table = $('#main-table');//table from DB
var PageSize = sessionStorage.getItem('PageSize');
var valueToPush = {};
var FinalData = [];
valueToPush.PageNumber = table.getPageNum();
valueToPush.PageSize = PageSize;
valueToPush.SortExpression = table.getSortExpression();
valueToPush.SortOrder = table.getSortOrder();
valueToPush.SearchBranchNo = _strSearchBranchNo;
valueToPush.SearchTerminalNo = _strSearchTerminalNo;
valueToPush.SearchDate = _strSearchDate;
FinalData.push(valueToPush);
valueToPush = {};
var myJSON = JSON.stringify(FinalData)
$.ajax({
url: url,
type: "POST",
data: myJSON,
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (data) {
DeviceStatus = data["errorCode"];
Param = data["param"];
if (DeviceStatus == 'SUCCESS') {
var obj = JSON.parse(Param);
if (obj[0].length == 0 && obj[1][0].TotalOutput != 0) {
document.getElementById('btnRefreshForecastDetails').click();
}
else {
self.gifts(obj[0]);
}
table.updateTable(parseInt(PageSize), obj[1][0].TotalOutput);
//GetBranchList();
}
else {
swal("Error", "Fail to retrieve forecast details, " + Param, "error");
}
CloseLoadingPage();
}
});
}
};
API function
public async Task<TCR_RESPONSEMESSAGE> IT_GetForecastDetails(ITForecast[] Alldata)
{
StringBuilder sbReturnMessage = new StringBuilder();
StringBuilder sbTraceMessage = new StringBuilder();
API_COMPLETEMESSAGE tcm = null;
WebAPITraceLog wtl = null;
string reqStr = string.Empty;
string repStr = string.Empty;
string MessageSeqNo = string.Empty;
const string functionNameStr = nameof(IT_GetForecastDetails);
API_FUNCTION APIFunctionCode = API_FUNCTION.IT_GetForecastDetails;
StringBuilder sbSQLStmt = new StringBuilder();
bool asyncResult = false;
DataSet dsData = new DataSet();
bool blnResult = false;
string strTable = "tblForecastDetails";
List<SqlParameter> SqlParameters = new List<SqlParameter>();
try
{
using (SqlConnection SQLDBConn = new SqlConnection(sqlTCRSecureBODBConnStr))
{
await SQLDBConn.OpenAsync();
SqlParameters.Add(new SqlParameter("#PageNumber", Alldata[0].PageNumber));
SqlParameters.Add(new SqlParameter("#PageSize", Alldata[0].PageSize));
SqlParameters.Add(new SqlParameter("#SortExpression", Alldata[0].SortExpression));
SqlParameters.Add(new SqlParameter("#SortOrder", Alldata[0].SortOrder));
SqlParameter OutputParam = new SqlParameter("#TotalRecords", SqlDbType.BigInt);
OutputParam.Direction = ParameterDirection.Output;
SqlParameters.Add(OutputParam);
blnResult = ReadDataSetByStoredProcedure("GetForecastDetailsWithPage", SqlParameters, strTable, DEFAULT_LOG_NAME, SQLDBConn, ref dsData);
if (blnResult == false)
{
tcm = FAIL_READ_MESSAGE;
tcm.Param = "Fail to read GetForecastDetailsWithPage.";
goto ExitHandler;
}
DataTable tbl = new DataTable("tblPagerInfo");
tbl.Columns.Add("TotalOutput", typeof(long));
tbl.Rows.Add(Convert.ToInt64(SqlParameters[4].Value));
dsData.Tables.Add(tbl);
}
if (dsData != null)
{
tcm = SUCCESS_MESSAGE;
tcm.Param = JsonConvert.SerializeObject(dsData.Tables);
goto ExitHandler;
}
else
{
tcm = FAIL_READ_MESSAGE;
tcm.Param = "Fail to read GetForecastDetailsWithPage.";
goto ExitHandler;
}
ExitHandler:
tcm.Function = APIFunctionCode;
return await ProcessAPICompleteMessage(tcm, functionNameStr);
}
catch (Exception ex)
{
string errorMessages = string.Empty;
errorMessages += "Description : " + ex.Message;
LogError(DEFAULT_LOG_PATH, DEFAULT_LOG_NAME, errorMessages, GetLineNumber(ex).ToString(), functionNameStr);
tcm = EXCEPTION_MESSAGE;
tcm.Function = APIFunctionCode;
tcm.Param = errorMessages;
return await ProcessAPICompleteMessage(tcm, functionNameStr);
}
}
I expect for the "Refresh" and "Clear" buttons to work, and for the DB data from the declared table to be fetched to be displayed on the web page.

well, for starters I don't see your knockout anywhere being bound to your viewmodel, preferably below your viewmodel definition.
ko.applyBindings(new ObservableModelMain());
and secondly your clear button has a plain old javascript onclick event attribute, not a data-bind to a -also not available- self.clear = function() {...} in your knockout viewmodel

Adding items in <select> element using c#, javascript and HTML with sql server field

Can someone help me solve this problem. I just want to add an Items in element in html with database field using c# and javascript, but my code has no output. Also, I tried to input a button and Called the Function "loadGrp" on onClick property of the button. eg: input type="submit" value="Add Item" onClick ="loadGrp();" but also it does not work. how to fix this problem, i know someone out there has a capability to solve this, so please help me guys Guys..
JS
function loadGrp()
{
$.ajax({
type: 'POST',
url: '../WebService/wsLeaveRequest.asmx/LoadGroup',
dataType: 'json',
//data: '',
contentType: 'application/json; charset=utf-8',
success: function (response){
$('#cboGroup').empty();
var cell = eval("(" + response.d + ")");
for (var i = 0; i < cell.length; i++)
{
$('#cboGroup').append('<option value="' + cell[i].grpID + '">"' + cell[i].grpShortName + '</option>');
}
},
error: function (error) {
console.log(error);
},
complete: function () {
}
});
}
C#
[WebMethod]
public string LoadGroup()
{
List<GroupInfo> mylist = new List<GroupInfo>();
using (SqlConnection conn = new SqlConnection(connectionString()))
{
conn.Open();
SqlCommand cmd = new SqlCommand("spLoadGroup", conn);
cmd.CommandType = CommandType.StoredProcedure;
cmd.CommandTimeout = 0;
SqlDataReader dr = cmd.ExecuteReader();
while(dr.Read())
{
mylist.Add(new GroupInfo
{
grpID = dr["groupID"].ToString(),
grpShortName = dr["groupShortName"].ToString()
});
}
dr.Close();
conn.Close();
}
JavaScriptSerializer js = new JavaScriptSerializer();
string jsn = js.Serialize(mylist);
return jsn;
}
HTML
<!DOCTYPE html>
<html>
<script src="Script/jsSetting.js"></script>
<script src="Script/jsleaverequest.js"></script>
<div class="row cells12">
<div class="cell colspan3">
<div class="input-control select full-size">
<h5>Filter Group:</h5>
<select id="cboGroup"></select>
</div>
</div>
</div>
</div>
<body>
<head>
</head>
</body>
</html>

Here are couple of observations
url: '../WebService/wsLeaveRequest.asmx/LoadGroup',
The .. may not be making any sense here
If there is no form in the page then replace input type = "submit" with input type = "button"
var cell = eval("(" + response.d + ")"); seems fishy. Using eval is not a good idea and specifically here it dont seems to make any sense.
Put a debugger or a log statement at the first line of function loadGrp and see if the function is getting executed on button click. Then check from developer's window(For Chrome press f12 -> Click on network -> Hit the input type = button) and validate if it is making any network call and validate the response of it

how to make cascading dropdown in asp.net mvc by using database Views

In my page i have division drop-down in which user selects any division from it and on the selection of this division, i call on change event and in this event i code jquery ajax code and in url call controller getcustomers method in which it query from database views but this ajax method is not working, i also see it in console debugger mode, i want to populate the customers dropdown required help.
Note: I want to get customers from this database view only.
Plz see the image of database view here
<script type="text/javascript">
//Dropdownlist Selectedchange event
function DivisionChanged(item) {
//$("#dvn_code").change(function () {$('#dvn_code')
var select_division = $(item).val();
$("#customers").empty();
debugger;
$.ajax({
url: '#Url.Action("GetCustomers")',
type: 'POST',
#*url: '#Url.Action("GetStates")'*# // we are calling json method
dataType: 'json',
data: { id: $(this).val() },
success: function (data) {
customers.append($('<option/>', { value: -1, text: 'Select customers' }));
$(data).each(function (index, item) {
customers.append($('<option/>', { value: item.id, text: item }));
});
}
});
return false;
}
</script>
///// controller code
public JsonResult GetCustomers(int id)
{
string cs = ConfigurationManager.ConnectionStrings["DBContext"].ConnectionString;
List<V_CustomerForDropDown> customers = new List<V_CustomerForDropDown>();
String query = "SELECT cst_Name FROM PT.V_CustomerForDropDown where dvn_code==id";
using (SqlConnection con = new SqlConnection(cs))
{
SqlCommand cmd = new SqlCommand(query, con);
//cmd.CommandType = CommandType.TableDirect;
con.Open();
SqlDataReader rdr = cmd.ExecuteReader();
while (rdr.Read())
{
V_CustomerForDropDown c = new V_CustomerForDropDown();
c.cst_Name = rdr["cst_Name"].ToString();
customers.Add(c);
}
// con.Close();
return this.Json(customers);
}
}
Updated(Now this is the problem):
I pass the data in json format to view from controller and it also pass the data but in view how to populate it in drop down list
// controller
[HttpPost]
public ActionResult GetCustomers(string id)
{
var customers = (from a in db.V_CustomerForDropDown.Where(c => c.dvn_code == id) select new { a.cst_Name, a.cst_Code }).ToList();
return Json(customers, JsonRequestBehavior.AllowGet);
}
//index.chtml
<div class="col-md-4">
<select class="form-control selectpicker" id="customers" multiple title="Multiple Select" data-live-search="true" data-menu-style="dropdown-blue">
</select>
// javascript code
<script type="text/javascript">
function DivisionChanged(item) {
var select_division = $(item).val();
$.ajax({
url: '#Url.Action("GetCustomers")',// we are calling json method
type: 'POST',
dataType: 'json',
data: { id: select_division },
success: function (customers) {
debugger;
$.each(customers, function (i, cust) {
$("#customers").append('<option value>' + cust.cst_Name + '</option>');
});
}
});
return false;
}
</script>

data: { 'id': select_division }
Decorate Action method with [HttpPost]
[HttpPost]
public JsonResult GetCustomers(int id)
{
string cs = ConfigurationManager.ConnectionStrings["DBContext"].ConnectionString;
List<V_CustomerForDropDown> customers = new List<V_CustomerForDropDown>();
String query = "SELECT cst_Name FROM PT.V_CustomerForDropDown where dvn_code==id";
using (SqlConnection con = new SqlConnection(cs))
{
SqlCommand cmd = new SqlCommand(query, con);
//cmd.CommandType = CommandType.TableDirect;
con.Open();
SqlDataReader rdr = cmd.ExecuteReader();
while (rdr.Read())
{
V_CustomerForDropDown c = new V_CustomerForDropDown();
c.cst_Name = rdr["cst_Name"].ToString();
customers.Add(c);
}
// con.Close();
return this.Json(customers);
}
}
Change your query
String query = "SELECT cst_Name FROM PT.V_CustomerForDropDown where dvn_code="+ id;
After change all these put a debug on Action method and check if it'll hit or not if yes than put a debug on success function of ajax and check data is filling as per your expactations
UPDATE
Make an extension method to tackle null string value in controller.
public static class Extensions
{
public static string EmptyIfNull(this object value)
{
if (value == null)
return "";
return value.ToString();
}
}
Usage:
c.cst_Name = rdr["cst_Name"].EmptyIfNull();

Updating DropDownList using minimalect

Ok so the scenario is currently I am populating a drop down list from my model with the following code
ViewBag.LeaseCompanyID = new SelectList(ContractModelEntity.system_supplier.Where(x => x.Type == "Lease"), "CompanyID", "Name", data.LeaseCompanyID);
This works perfectly, however on my form I have a button located next to the drop down list which adds another option in the database, using ajax and a modal popup.
The controller code for this is here
[HttpPost]
public JsonResult AddSupplier([Bind(Include="Name,Type")] system_supplier data)
{
if (ModelState.IsValid)
{
ContractModelEntity.system_supplier.Add(data);
ContractModelEntity.SaveChanges();
return Json(0, JsonRequestBehavior.AllowGet);
}
return Json(1, JsonRequestBehavior.AllowGet);
}
When the new option is added into the database I then need to refresh my dropdownlist to get this new data (currently if I refresh the page I can see the new option). I am using minimalect plugin for the drop downs.
Does anybody know a way of updating this minimalect list, there must be a way of building the list through an ajax call which returns some JSON data.
Thanks in advance for your help

OK so after doing a bit of research here is my solution, hopefully it will help other poeple. Someone might even have a cleaner solution.
I first created a jsonresult controller method which looked like this
[HttpGet]
public JsonResult RetreiveSuppliers(string contractType)
{
var supplierData = ContractModelEntity.system_supplier.Where(x => x.Type == contractType);
var result = new List<object>();
foreach (var x in supplierData)
{
result.Add(new { Id = x.CompanyID, Name = x.Name });
}
return Json(result, JsonRequestBehavior.AllowGet);
}
That got me the data from the database. then I created a javascript on the page which looks like this
$("body").on("click", "#btn_InsertNewSupplier", function () {
var supForm = $("#addSupData");
$.ajax({
url: "#Url.Action("AddLeaseSupplier", "Contract")",
data: supForm.serialize(),
type: "POST",
success: function (result) {
if (result === 0) {
var inst = $.remodal.lookup[$('[data-remodal-id=modal_AddSupplier]').data('remodal')];
inst.close();
NotificationAlert("success", "New Supplier Created");
GetNewSupplierList();
} else {
NotificationAlert("error", "Failed Adding New Supplier");
}
}
});
});
function GetNewSupplierList() {
var actionurl = "#Url.Action("RetreiveSuppliers", "Contract", new { contractType = "Lease"})";
$.getJSON(actionurl, tempdata);
}
function tempdata(response) {
if (response != null) {
var html = "";
for (var i = 0; i < response.length; i++) {
html += '<option value="' + response[i].Id + '">' + response[i].Name + '</option>';
}
$("#LeaseCompanyID").html(html);
}
}
So once the ajax call is successful it will trigger the GetNewSupplierList function which calls my controller method and returns some JSON data. Once that is returned it calls tempdata, which builds the new HTML for my select picker, once that is built it updates the html on the selectpicker id.
Works like a charm!!!
Thanks to everyone who took a look at this post.