In my Asp.Net MVC project, there is a page where users can edit data loaded into a table, such as changing images, strings, and the order of items.
Once all edits have been made, the client clicks on a Download button to save the resulting xml-file on their hard drive for future manipulations.
The HTML form structure looks like this:
<form name="mainForm" data-ng-submit="sendForm()" ng-controller="ImportController" novalidate enctype="multipart/form-data">
<!-- table structure definition removed for briefing -->
<td>
{{data.Items[$index].Id}}
</td>
<td>
<img class="center-cropped" ng-src="data:image/jpg;base64, {{data.Items[$index].Image}}">
</td>
<td>
<input class="form-control" type="text" value="{{data.Items[$index].LastName}}" />
</td>
<td>
<input class="form-control" type="text" value="{{data.Items[$index].FirstName}}" />
</td>
<td>
<input class="form-control" type="text" value="{{data.ClaimItems[$index].MiddleName}}" />
</td>
<input class="btn-success" id="submit-btn" type="submit" data-ng-disabled="mainForm.$invalid" value="Download" />
</form>
The data from this form is sent through an AngularJS function call:
$scope.sendForm = function () {
// some preparations to send image data through json
for (var i = 0; i < $scope.data.Items.length; i++) {
$scope.data.Items[i].ImageAsString = $scope.data.Items[i].Image;
}
$http.post("Download", { array: $scope.data })
.success(function (responseData) {
console.log(responseData);
})
.error(function (responseData) {
console.log("Error !" + responseData);
});
};
After calling this function, the HTTP POST request is sent to the ASP.NET MVC Download action:
[HttpPost]
public FileResult Download(ItemsArrayWrapper array)
{
// logic for processing incoming data goes here
// ...
return File(array.ConvertToItemsArray().Serialize(), "text/xml", name);
}
However, despite setting up the Download method to return a FileResult in order to prompt a file saving dialog on the client side, nothing is happening when the user clicks the Download button.
I've tried adjusting the Response headers, changing MIME types, altering the return types of the Download method, and even attempting to call a [HttpGet] method from within the Download method, but still no dialogue appears.
Checking the browser network monitoring tool reveals that only one POST request is being sent.
Is it possible to successfully send data from an HttpPost method to the client when called from an AngularJs function in this manner? What might I be missing, and why isn't the saving dialog appearing in the browser?
If anyone has alternative solutions or suggestions to help achieve the desired outcome, I would greatly appreciate it.