We Keep Coding

asp.net Razor Pages - Update select list based on the selection of another select list

I want to update a select list when the user selects a value in another select list. I've managed to get the first select list to call a get (or post) method on the model with a parameter, and can update the underlying data. But the second select list never shows the new values.
I'm not very experienced with asp.net, so what am I doing wrong?
Code below
.cshtml
<div>
<form method="post">
<select id="departureStation" asp-items="Model.DepartureStations" onchange="getDestinationStations()"></select>
<select id="destinationStation" asp-items="Model.DestinationStations"></select>
</form>
</div>
#section Scripts {
<script type="text/javascript">
function getDestinationStations() {
var selectedDepartureStationID = $("#departureStation").find(":selected").val();
console.log("selectedDepartureStationID = " + selectedDepartureStationID);
$.ajax({
type: "GET",
url: "/Index?handler=Departure",
beforeSend: function (xhr) {
xhr.setRequestHeader("XSRF-TOKEN",
$('input:hidden[name="__RequestVerificationToken"]').val());
},
data: {
selectedDepartureStationID: selectedDepartureStationID
},
success: function(result) {
console.log("success - " + result);
},
error: function() {
console.log("failure");
}
})
}
</script>
}
.cs
public List<SelectListItem> DestinationStations
{
get
{
if (this._selectedDepartureStationID == -1)
return new List<SelectListItem>();
List<Models.Station> stations = new List<Models.Station>();
List<Models.RouteSegment> routeSegments = this._context.RouteSegments.Where(x => x.StationID == this._selectedDepartureStationID).ToList();
foreach (Models.RouteSegment routeSegment in routeSegments.DistinctBy(x => x.RouteID))
{
List<Models.RouteSegment> routeSegments2 = this._context.RouteSegments.Where(x => x.RouteID == routeSegment.RouteID).Include(x => x.Station).ToList();
stations.AddRange(routeSegments2.Select(x => x.Station));
}
return new List<SelectListItem>(stations.Distinct().ToList().Select(x => new SelectListItem { Value = x.StationID.ToString(), Text = x.StationName }).ToList());
}
}
public IndexModel(MyViewContext context)
{
this._context = context;
}
public void OnGet()
{
this.DepartureStations = this._context.Stations.Select(x => new SelectListItem { Value = x.StationID.ToString(), Text = x.StationName }).ToList();
}
public IActionResult OnGetDeparture(int selectedDepartureStationID)
{
this._selectedDepartureStationID = selectedDepartureStationID;
return Page();
}

Whenever your #departureStation select changes, your code will call getDestinationStations javascript code. Inside that function you are sending a request to your backend server to receive possible destination stations if I understood correctly. What you need to do here is when ajax request successes, add options dynamically based on your returned array or data.
I am assuming your "/Index?handler=Departure" returns a JSON like:
[
{
id: 1,
name: "station1"
},
{
id: 2,
name: "station2"
}
]
Check if code below works.
$.ajax({
type: "GET",
url: "/Index?handler=Departure",
beforeSend: function (xhr) {
xhr.setRequestHeader("XSRF-TOKEN",
$('input:hidden[name="__RequestVerificationToken"]').val());
},
data: {
selectedDepartureStationID: selectedDepartureStationID
},
success: function(result) {
let destinationStationSelect = $('#destinationStationSelect');
let optionTemplate = $('<option></option>');
$.each(result, (index, element) => {
let option = optionTemplate.clone();
option.append(element.name);
option.attr('value', element.id);
destinationStationSelect.append(option);
});
},
error: function() {
console.log("failure");
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

How to send hidden ID value FormData using asp.net MVC?

I need to pass Hidden ID value var genericID = $("#hdnGenericID").val(); to FromData.But i can't able to pass Id Value.
how to pass the hdnGenericID ID value to controller.
#Html.HiddenFor(model => item.GenericID, new { id = "hdnGenericID" })
cs.Html
<div class="uploading-container">
<div class="uploading-container-left">
<span class="btn btn-rounded btn-file">
<span>Choose file</span>
<input type="file" name="file" id="file">
</span>
</div><!--.uploading-container-left-->
<div class="uploading-container-right">
<div class="uploading-container-right-in">
<div class="col-lg-4">
<fieldset class="form-group">
<label class="form-label semibold">Perview_Image</label>
<img id="image_upload_preview" src="http://placehold.it/100x100" alt="your image" />
<a id="remove" onclick="javascript:ClearFileUploadControl();" style="display: none; cursor: pointer;">Remove</a>
</fieldset>
</div>
<input type="submit" id="btnImageUpload" name="ImageUpload" value="Upload image" class="btn btn-rounded btn-inline btn-success" />
</div>
</div>
</div>
Image Upload:
$(function () {
$('#btnImageUpload').click(function () {
var data = new FormData();
var genericID = $("#hdnGenericID").val();
var files = $("#file").get(0).files;
if (files.length > 0) { data.append("HelpSectionImages", files[0]); }
else {
common.showNotification('warning', 'Please select file to upload.', 'top', 'right');
return false;
}
var extension = $("#file").val().split('.').pop().toUpperCase();
if (extension != "PNG" && extension != "JPG" && extension != "GIF" && extension != "JPEG") {
common.showNotification('warning', 'Imvalid image file format.', 'top', 'right');
return false;
}
$.ajax({
url: '../Generic/SaveProfileImage',
type: "POST",
processData: false,
data: data,
dataType: 'json',
contentType: false,
success: function (data) {
if (data == true) { // if true (1)
setTimeout(function () {// wait for 1 secs(2)
location.reload(); // then reload the page.(3)
}, 1000);
}
},
error: function (er) { }
});
return false;
});
});
Controller:
[HttpPost]
public ActionResult SaveProfileImage()
{
try
{
if (System.Web.HttpContext.Current.Request.Files.AllKeys.Any())
{
var pic = System.Web.HttpContext.Current.Request.Files["HelpSectionImages"];
HttpPostedFileBase filebase = new HttpPostedFileWrapper(pic);
var fileName = docId.ToString() + ".png";
var path = Path.Combine(Server.MapPath("~/UploadGenericImage/"), fileName);
filebase.SaveAs(path);
//return Json("File Saved Successfully.");
return Json(new { data = true});
}
else { return Json("No File Saved."); }
}
catch (Exception ex) { return Json("Error While Saving."); }
}

Change the script like this
$(function () {
$('#btnImageUpload').click(function () {
var data = new FormData();
var genericID = $("#hdnGenericID").val();
data.append("GenericID", genericID);
var files = $("#file").get(0).files;
if (files.length > 0) { data.append("HelpSectionImages", files[0]); }
else {
common.showNotification('warning', 'Please select file to upload.', 'top', 'right');
return false;
}
var extension = $("#file").val().split('.').pop().toUpperCase();
if (extension != "PNG" && extension != "JPG" && extension != "GIF" && extension != "JPEG") {
common.showNotification('warning', 'Imvalid image file format.', 'top', 'right');
return false;
}
$.ajax({
url: '../Generic/SaveProfileImage',
type: "POST",
processData: false,
data: data,
dataType: 'json',
contentType: false,
success: function (data) {
if (data == true) { // if true (1)
setTimeout(function () {// wait for 1 secs(2)
location.reload(); // then reload the page.(3)
}, 1000);
}
},
error: function (er) { }
});
return false;
});
});
and change the controller like this
[HttpPost]
public ActionResult SaveProfileImage(string GenericID)
{
try
{
if (System.Web.HttpContext.Current.Request.Files.AllKeys.Any())
{
var pic = System.Web.HttpContext.Current.Request.Files["HelpSectionImages"];
HttpPostedFileBase filebase = new HttpPostedFileWrapper(pic);
var fileName = docId.ToString() + ".png";
var path = Path.Combine(Server.MapPath("~/UploadGenericImage/"), fileName);
filebase.SaveAs(path);
//return Json("File Saved Successfully.");
return Json(new { data = true});
}
else { return Json("No File Saved."); }
}
catch (Exception ex) { return Json("Error While Saving."); }
}
then in controller you will be able to access the value of GenericID.

did you try using FormCollection parameter to controller action method i.e.
[HttpPost]
public ActionResult SaveProfileImage(FormCollection form,string GenericID)
{....
}
this form will have your hiddenfield value and can access hiddenfield like below
var hiddenFieldValue = form["hdnGenericID"] ..

Posting files and model to controller in ASP.NET Core MVC6

I'm migrating a project from ASP.NET RC1 to ASP.NET Core 1.0.
I have a view that allows users to upload one of more files, which I post using Jquery Ajax. I also serialize and post some settings within the same post.
The following all worked in RC1 (and pre-asp.net core):
Js:
$('#submit').click(function () {
var postData = $('#fields :input').serializeArray();
var fileSelect = document.getElementById('file-select');
var files = fileSelect.files;
var data = new FormData();
for (var i = 0; i < files.length; i++) {
data.append('file' + i, files[i]);
}
$.each(postData, function (key, input) {
data.append(input.name, input.value);
});
var url = '/ajax/uploadfile';
$.ajax({
url: url,
type: "POST",
contentType: false,
processData: false,
cache: false,
data: data,
success: function (result) {
alert('success');
},
error: function () {
alert('error');
}
});
});
Controller:
public IActionResult UploadFile(UploadFileModel model)
{
var result = new JsonResultData();
try
{
if (Request.Form.Files.Count > 0)
{
IFormFile file = Request.Form.Files[0];
//etc
}
}
}
So the above does not work anymore, no file uploaded and no model bound.
I managed to fix half the issues so now I can get the model to bind with the following code. However, the controller will still give me an exception on the Request.Files. I added the 'headers' property, and I used serializeObject (custom method). In the controller I added FromBody.
Js:
$('#submit').click(function () {
var postData = $('#fields :input').serializeArray();
var fileSelect = document.getElementById('file-select');
var files = fileSelect.files;
var data = new FormData();
for (var i = 0; i < files.length; i++) {
data.append('file' + i, files[i]);
}
$.each(postData, function (key, input) {
data.append(input.name, input.value);
});
var url = '/ajax/uploadfile';
$.ajax({
url: url,
type: "POST",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
processData: false,
cache: false,
data: serializeAndStingifyArray(data),
success: function (result) {
alert('success');
},
error: function () {
alert('error');
}
});
});
function serializeAndStingifyArray(array) {
var o = {};
var a = array;
$.each(a, function () {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return JSON.stringify(o);
};
Controller:
[HttpPost]
public IActionResult UploadFile([FromBody]UploadFileModel model)
{
var result = new JsonResultData();
try
{
if (Request.Form.Files.Count > 0)
{
IFormFile file = Request.Form.Files[0];
//etc
}
}
}
html:
<div id="file-list">
<input type="file" name="file" class="file-select" accept="application/pdf,application">
<input type="file" name="file" class="file-select" accept="application/pdf,application" />
</div>

I started from this article which has some code that is almost the same as yours Upload Files In ASP.NET Core 1.0 (see Ajax case).
That worked for me fine on 1.0.0, so I implemented your changes and what I saw is that it failed to send the files in the request (client side issue).
This is how the payload should look like when working ok using F12 in chrome: (not sure why the file contents are hidden by chrome).
A little debugging and you are passing wrong data to data.append
The fix is in this line
$(".file-select").each(function () { data.append($(this).val(), $(this).get(0).files[0]); i++; })
Full code:
$(document).ready(function () {
$("#submit").click(function (evt) {
var data = new FormData();
i = 0;
$(".file-select").each(function () { data.append($(this).val(), $(this).get(0).files[0]); i++; })
var postData = $('#fields :input');
$.each(postData, function (key, input) {
data.append(input.name, input.value);
});
$.ajax({
type: "POST",
url: "/ajax/uploadfile", // <--- Double check this url.
contentType: false,
processData: false,
data: data,
success: function (message) {
alert(message);
},
error: function () {
alert("There was error uploading files!");
}
});
});
});
No need to use [FromBody] or serializeArray()
[HttpPost]
public IActionResult UploadFilesAjax(MyViewModel xxx )
{
This is my html, just in case:
<form method="post" enctype="multipart/form-data">
<div id="file-list">
<input type="file" name="file" class="file-select" accept="application/pdf,application">
<input type="file" name="file" class="file-select" accept="application/pdf,application" />
</div>
<div id="fields">
<input type="text" name="Email" />
</div>
<input type="button"
id="submit"
value="Upload Selected Files" />
</form>

Ajax FileUpload & JQuery formData in ASP.NET MVC

I have some problem with posting formData to server side action method. Because ajax call doesn't send files to server, I have to add file uploader data to formData manually like this:
var formData = new FormData();
formData.append("imageFile", $("#imageFile").file);
formData.append("coverFile", $("#coverFile").file);
I wrote jQuery function that need to post form data to server using ajax call.
It's works but posted formData in server side is always null!
this is my script:
<script>
function SubmitButtonOnclick()
{
var formData = new FormData();
formData.append("imageFile", $("#imageFile").file);
formData.append("coverFile", $("#coverFile").file);
$.ajax({
type: "POST",
url: '#Url.Action("EditProfile", "Profile")',
data: formData,
dataType: 'json',
contentType: "multipart/form-data",
processData: false,
success: function (response) {
$('#GeneralSection').html(response.responseText);
},
error: function (error) {
$('#GeneralSection').html(error.responseText);
}
});
}
</script>
Edit 1:
This is the action method in controller:
public ActionResult EditProfile(ProfileGeneralDescription editedModel,
HttpPostedFileBase imageFile,
HttpPostedFileBase coverFile,
string postOwnerUser)
{
try
{
if (postOwnerUser == User.Identity.Name)
{
// edit codes...
var result = GetProfileGeneralDescription(postOwnerUser);
return PartialView("_GeneralProfile", result);
}
else
{
var error = new HandleErrorInfo(
new Exception("Access Denied!"),
"Profile",
EditProfile
return PartialView("~/Views/Shared/Error.cshtml", error);
}
}
catch (Exception ex)
{
var error = new HandleErrorInfo(ex, "Profile", EditProfile
return PartialView("~/Views/Shared/Error.cshtml", error);
}
}
Edit 2:
Cshtml view file content:
#model Website.Models.ViewModel.Profile
#using (Ajax.BeginForm("EditProfile", "Profile", new { postOwnerUser = User.Identity.Name }, new AjaxOptions()
{
HttpMethod = "POST",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "GeneralSection"
}, new { enctype = "multipart/form-data" }))
{
<div>
<button id="btnSubmit" type="button" onclick="SubmitButtonOnclick()">Submit</button>
</div>
<input type="hidden" name="username" id="username" value="#Model.Username"/>
<fieldset>
<legend>Edit Photos</legend>
<div>
Select profile picture:
<input id="imageFile" type="file" name="imageFile" accept="image/png, image/jpeg" />
#Html.CheckBoxFor(modelItem => modelItem.DefaultCover)<span>Remove profile photo</span>
</div>
<div>
Select cover picture:
<input id="coverFile" type="file" name="coverFile" accept="image/png, image/jpeg" />
#Html.CheckBoxFor(modelItem => modelItem.DefaultCover)<span>RemoveCover</span>
</div>
</fieldset>
}
Any tips, link or code example would be useful.
Thank you in advance!

Instead of Jquery Ajax you could use
<script>
function SubmitButtonOnclick()
{
var formData= new FormData();
var imagefile=document.getElementById("imageFile").files[0];
var coverfile=document.getElementById("coverFile").files[0];
formData.append("imageFile",imageFile);
formData.append("coverFile",coverFile);
var xhr = new XMLHttpRequest();
xhr.open("POST", "/Profile/EditProfile", true);
xhr.addEventListener("load", function (evt) { UploadComplete(evt); }, false);
xhr.addEventListener("error", function (evt) { UploadFailed(evt); }, false);
xhr.send(formData);
}
function UploadComplete(evt) {
if (evt.target.status == 200)
alert("Logo uploaded successfully.");
else
alert("Error Uploading File");
}
function UploadFailed(evt) {
alert("There was an error attempting to upload the file.");
}
</script>
This works for me !!
Your script with changes
function SubmitButtonOnclick() {
var formData = new FormData();
var file = document.getElementById("imageFile").files[0];
var file1 = document.getElementById("coverFile").files[0];
formData.append("imageFile", file);
formData.append("coverfile", file1);
$.ajax({
type: "POST",
url: '#Url.Action("EditProfile","Default1")',
data: formData,
dataType: 'json',
contentType: false,
processData: false,
success: function (response) {
$('#GeneralSection').html(response.responseText);
},
error: function (error) {
$('#GeneralSection').html(error.responseText);
}
});
}

<input type="file" id="picfile" name="picf" />
<input type="text" id="txtName" style="width: 144px;" />
$("#btncatsave").click(function () {
var Name = $("#txtName").val();
var formData = new FormData();
var totalFiles = document.getElementById("picfile").files.length;
var file = document.getElementById("picfile").files[0];
formData.append("FileUpload", file);
formData.append("Name", Name);
$.ajax({
type: "POST",
url: '/Category_Subcategory/Save_Category',
data: formData,
dataType: 'json',
contentType: false,
processData: false,
success: function (msg) {
alert(msg);
},
error: function (error) {
alert("errror");
}
});
});
[HttpPost]
public ActionResult Save_Category()
{
string Name=Request.Form[1];
if (Request.Files.Count > 0)
{
HttpPostedFileBase file = Request.Files[0];
}
}

I was able to upload file through jquery using the iframe, I explained the same in my blog post, please follow the link to get the answer.
http://kaushikghosh12.blogspot.com/2014/02/ajax-fileupload-on-all-browsers.html

Get data from a controller, return as json and preview in cshtml

I have a controller that I get result exampleController.cs:
public expChart{
...
public ActionResult ByContainer(int id)
{
var elementIds = _systemSettings.Z3FromZBIds; // CritialWorkPermitIds;
var kpiElements = CacheService.AllVisibleElements
.Where(x => elementIds.Contains(x.Id)).ToList();
var container = _kpiContainerService.Find(id);
var result = _kpiTrendService.MonthByContainer(kpiElements, container);
return AsJson(result);
}
}
I call it in example.cshtml:
<div class="panel" style="display: none;" id="bottom-area-trend-charts" ng-ontroller="exampleController">
<div >
TEST
{{element.Name}}
</div>
</div>
I think it is something wrong with my calling. How can I call the result in my controller?
Thanks in advance

Use something like this:
<script type="text/javascript">
$(function () {
$.ajax({
url: "/YourController/ByContainer",
type: "GET",
dataType: 'html',
data: { id: 10 }, // the value id for call your controller
success: function (data) {
// make sure your result variable is enumerable.
$(data).each(function (index, element) {
$("#bottom-area-trend-charts div").append("<p>" + element.Name + "</p>");
});
},
error: function (xqr, errorMessage) {
alert(errorMessage);
}
});
});
</script>
And change your action to this:
public JsonResult ByContainer(int id)
{
var elementIds = _systemSettings.Z3FromZBIds; // CritialWorkPermitIds;
var kpiElements = CacheService.AllVisibleElements
.Where(x => elementIds.Contains(x.Id)).ToList();
var container = _kpiContainerService.Find(id);
var result = _kpiTrendService.MonthByContainer(kpiElements, container);
return Json(result, JsonRequestBehavior.AllowGet);
}