I have got an ajax request to my Server where i am creating an PDF File. Now i want to display this file in a new window/tab or just download it. how can i do that?
my request
$.ajax({
url: '/Document/CreatePDF',
type: 'POST',
data: {
docid: documentId,
dataId: array
},
traditional: true,
success: function (data) {
}
});
[HttpPost]
public FileStreamResult CreatePDF(long docid, List<long> dataId)
{
var document = _rep.LoadDocument(docid.ToString(), Server.MapPath("~/Documents/") + docid + ".xml");
var exporter = new PDFExporter(document);
MemoryStream fileStream = exporter.CreatePDF();
byte[] PdfByte = fileStream.GetBuffer();
fileStream.Flush();
fileStream.Close();
HttpContext.Response.AddHeader("content-disposition","attachment; filename=form.pdf");
return new FileStreamResult(fileStream, "application/pdf");
}
You cannot use AJAX to download files. The reason for that is because javascript doesn't allow you to save the downloaded content on the client computer, nor to prompt for a Save As dialog. You should use a simple HTML <form> or an anchor:
#using (Html.BeginForm("CreatePDF", "Document", FormMethod.Post, new { id = "myform" }))
{
<button type="submit">Download</button>
}
If you need to pass arguments to this controller action that are known only at the client you could subscribe to the .submit event of this form and then dynamically inject hidden fields into it with the corresponding values and then leave the default action execute. And if the values are known at the server side you should simply use HTML helpers to generate those hidden fields.
Related
I have an MVC .cshtml page with a button. It's in a grid and I am passing the row ids to the controller using the jquery
<button type="submit" id="btn_View" name="view"
class="btn_View">
$(".btn_View_Question").click(function () {
var json = [];
var obj = {};
var rowID = $(this).closest('tr').attr('id');
obj.RowId= rowID ;
console.log(obj);
json.push(obj)
var responseDetails = JSON.stringify(json);
$.ajax({
url: "/Home/View",
type: "POST",
data: responseDetails,
dataType: "json",
traditional: true,
contentType: "application/json; charset=utf-8",
});
});
In the controller class I am redirecting to a aspx report page as follows
public RedirectResult ViewQuestionnaire(string[] id)
{
var reportParameters = new Dictionary<string, string>();
reportParameters.Add("ID", id[0]);
Session["reportParameters"] = reportParameters;
return Redirect("../Reports/ViewQuestionarie.aspx");
}
The aspx page is not loading. When I debug it the page_load of the aspx page also executing. What might the wrong thing I am doing here
Redirect is going to return a 302 response with the new url as the location header value.You should not be making the call to an action method which returns a 302 response from an ajax call.
Looks like you want to set some data to Session. You may use your ajax call to still do that part. Instead of returning a 302 response,return a json data structure with the url you want the browser to be redirected.
public ActionResult ViewQuestionnaire(string[] id)
{
var reportParameters = new Dictionary<string, string>();
reportParameters.Add("ID", id[0]);
Session["reportParameters"] = reportParameters;
return Json(new {status = "success", url="../Reports/ViewQuestionarie.aspx"});
}
And in the success / done event of the ajax call, you can read the url property of the json response coming back and use that to do the redirection.
$.ajax({
//Omitted some parameters
success: function(res) {
if (res.status === "success") {
window.location.href = res.url;
}
}
});
image with
src="data:image;base64,YmxvYjpodHRwJTNBLy9sb2NhbGhvc3QlM0ExNDE0MS8wMzI1ZTA3Mi1iOTA5LTQ0YjItOTVlNS1iYzc4ZmJhZTZhMzI=" attribute value isn't displayed
with database table that has just one record with id=1
Razor
<img id="BlobPic" src="data:image;base64,#System.Convert.ToBase64String(Model.Logoo)" style="max-width:90%;" />
Action method
public FileContentResult getImg(int id)
{
BladiaInfoViewModel Bladia_Logo = rep.getByID(Convert.ToDecimal(1));
byte[] byteArray = Bladia_Logo.Logoo;
return new FileContentResult(Bladia_Logo.Logoo, "image/jpeg");
}
Jquery
$(document).ready(function () {
$.ajax({
url: '#Url.Action("getImg")',
data: { 'id': "1" },
type: "POST",
cache: false,
success: function (data) {
//document.getElementById("BlobPic").src = "data:image/png;base64," + data.Logoo;
document.getElementById("Logo").setAttribute("src",'#Url.Action("getImg", "BaldiaInfo",
new { id = Model.Logoo})');
},
error: function () {
alert("try again");
}
});
//----
});
If you're returning a FileContentResult then it looks like you're really overcomplicating this. Presumably you have a page in which the model which populates that page includes an identifier used by this action, right?:
public FileContentResult getImg(int id)
If so then you don't need all of this AJAX or Base64-encoding data URIs or anything like that. All you need to do is reference the URL with the ID. Something like this:
<img src="#Url.Action("getImg", "BaldiaInfo",
new { id = Model.Logoo})" />
This would create the URL for that action:
<img src="/BaldiaInfo/getImg/123" />
And since that action returns an image file, the browser would get exactly what it expects in that img src, an image.
Conversely, if your model for the page's view doesn't contain an ID but instead contains the actual image data then you don't need a separate action for getting the image at all. Because you already have it. In that case you can use a Base64-encoded URI directly in the model:
<img src="data:image;base64,#System.Convert.ToBase64String(Model.Logoo)" />
No JavaScript, no separate action with a FileContentResult, none of that.
Basically, you either have an ID which you use to reference the other action or you have the data which you use to build a data URI. It seems like you're trying to do both at the same time.
I've got a controller action that downloads a dynamically generated file:
public ActionResult DownloadFile()
{
var obj = new MyClass { MyString = "Hello", MyBool = true };
var ser = new XmlSerializer(typeof(MyClass));
var stream = new MemoryStream();
ser.Serialize(stream, obj);
stream.Position = 0;
Response.Clear();
Response.AddHeader("Content-Disposition", "attachment; filename=myfile.xml");
Response.ContentType = "application/xml";
// Write all my data
stream.WriteTo(Response.OutputStream);
Response.End();
return Content("Downloaded");
}
Just for reference:
public class MyClass
{
public string MyString { get; set; }
public int MyInt { get; set; }
}
This is working, and the file (myfile.xml) is downloaded.
However, the message "Downloaded" is not sent to the browser.
Similarly, if I replace return Content("Downloaded");
for return Redirect("www.something.com");
then the browser is redirected before the file downloads.
As a bit of a pre-amble, the user journey is:
User fills out form on previous view
Form is submitted
XML is generated and downloaded
User is redirected / "Downloaded" view is shown (so hitting F5 won't re-post the form)
As Ross has said, you can only return one response to a HTTP request.
What i do in that case is:
Send the request to the server
The server generates the file and stores it in some server side data structure (Cache, Usersession, TempData)
The server returns a RedirectToAction() (POST, REDIRECT, GET pattern)
The redirected action returns a View with some javascript which
Triggers the download of the pregenerated file by setting window.location.href property to an special download action which sends the file back to the browser
Each HTTP request can only have one response - you're trying to sneak in two (the file, and a page).
Normally when you send a "Content-Disposition: attachment" HTTP header the browser will stay on the current page and pop a file save dialog (or automatically save the file in your downloads).
You're going to have to change your strategy if you want to prevent re-submission of the form. I'd suggest a bit of javascript to disable the form's submit button and show the "Completed" message in a div overlay?
Here is how I redirected after the file is downloaded.
The main logic is to wait the redirect until the file is downloaded.
To do that, a server side response is calculated and redirect is delayed using server side response time + some offset.
Server Side Controller Code:
[HttpPost]
public ActionResult GetTemplate()
{
return Json(new {Url = Url.Action("ReturnTemplate") });
}
[HttpGet]
public ActionResult ReturnTemplate()
{
FileResult fileResult = // your file path ;
return fileResult;
}
Client Side Code:
<div id="btnGen" align="right"><button class="main-button" id="generateTemplate" type="Submit"></div>
Javascript:
$("#generateTemplate").click(function () {
var startTime = (new Date()).getTime(), endTime;
$.ajax({
url: '#Url.Action("GetTemplate", "Controller")',
type: 'POST',
traditional: true,
dataType: "json",
contentType: "application/json",
cache: false,
data: JSON.stringify(),
success: function (result) {
endTime = (new Date()).getTime();
var serverResponseTime = endTime - startTime + 500;
setInterval(function () { Back() }, serverResponseTime);
window.location = result.Url;
}
});
});
function Back() {
window.location = '#Url.Action("Index","Controller")';
}
I have a MVC application that has a Jquery Post
$.post(virtualPath + cookie + this.pageName + '/FunctionA/', parameters,function (filedata) {
alert(filedata);
},'application/csv');
}
this post is called from Javascript Event that is triggered by a buttonclick to download the file
I get the Server Side Http File Response
in the alert but cannot get it downloadable in the browser
The controller returns the Response as FileContentResult
[AcceptVerbs(HttpVerbs.Post)]
public FileContentResult FunctionA(string A, DateTime B)
{
try
{
string csv = "Make it downloadable ";
var filresult = File(new System.Text.UTF8Encoding().GetBytes(csv), "application/csv", "downloaddocuments.csv");
// return filresult;
Response.Clear();
Response.Buffer = true;
Response.ContentType = "application/vnd.ms-excel";
Response.AddHeader("content-disposition", "attachment; filename=Statement_" + "Downloadfile" + ".csv");
Response.Write(csv);
Response.Flush();
return filresult;
}
}
You cannot use AJAX to download files. The reason for that is because once the download succeeds and the success callback is invoked you cannot neither save the file automatically to the client browser nor you can prompt for the Save As dialog.
So instead of using javascript and AJAX to download this file simply use a standard link to the controller action which will allow the user to directly download the file.
UPDATE:
As requested in the comments section here's an example using an anchor:
#Html.ActionLink(
"download file",
"actionName",
"controllerName",
new {
param1 = "value1",
param2 = "value2",
},
null
)
or if you need to pass lots of parameters you might prefer to use a form with hidden fields that will POST:
#using (Html.BeginForm("actionName", "controllerName"))
{
#Html.Hidden("param1", "value1")
#Html.Hidden("param2", "value2")
<button type="submit">Download file</button>
}
In doing an auto-refresh using the following code, I assumed that when I do a post, the model will automatically sent to the controller:
$.ajax({
url: '<%=Url.Action("ModelPage")%>',
type: "POST",
//data: ??????
success: function(result) {
$("div#updatePane").html(result);
},
complete: function() {
$('form').onsubmit({ preventDefault: function() { } });
}
});
Every time there is a post, I need to increment the value attribute in the model:
public ActionResult Modelpage(MyModel model)
{
model.value = model.value + 1;
return PartialView("ModelPartialView", this.ViewData);
}
But the model is not passed to the controller when the page is posted with jQuery AJAX request. How can I send the model in the AJAX request?
The simple answer (in MVC 3 onwards, maybe even 2) is you don't have to do anything special.
As long as your JSON parameters match the model, MVC is smart enough to construct a new object from the parameters you give it. The parameters that aren't there are just defaulted.
For example, the Javascript:
var values =
{
"Name": "Chris",
"Color": "Green"
}
$.post("#Url.Action("Update")",values,function(data)
{
// do stuff;
});
The model:
public class UserModel
{
public string Name { get;set; }
public string Color { get;set; }
public IEnumerable<string> Contacts { get;set; }
}
The controller:
public ActionResult Update(UserModel model)
{
// do something with the model
return Json(new { success = true });
}
If you need to send the FULL model to the controller, you first need the model to be available to your javascript code.
In our app, we do this with an extension method:
public static class JsonExtensions
{
public static string ToJson(this Object obj)
{
return new JavaScriptSerializer().Serialize(obj);
}
}
On the view, we use it to render the model:
<script type="javascript">
var model = <%= Model.ToJson() %>
</script>
You can then pass the model variable into your $.ajax call.
I have an MVC page that submits JSON of selected values from a group of radio buttons.
I use:
var dataArray = $.makeArray($("input[type=radio]").serializeArray());
To make an array of their names and values. Then I convert it to JSON with:
var json = $.toJSON(dataArray)
and then post it with jQuery's ajax() to the MVC controller
$.ajax({
url: "/Rounding.aspx/Round/" + $("#OfferId").val(),
type: 'POST',
dataType: 'html',
data: json,
contentType: 'application/json; charset=utf-8',
beforeSend: doSubmitBeforeSend,
complete: doSubmitComplete,
success: doSubmitSuccess});
Which sends the data across as native JSON data.
You can then capture the response stream and de-serialize it into the native C#/VB.net object and manipulate it in your controller.
To automate this process in a lovely, low maintenance way, I advise reading this entry that spells out most of native, automatic JSON de-serialization quite well.
Match your JSON object to match your model and the linked process below should automatically deserialize the data into your controller. It's works wonderfully for me.
Article on MVC JSON deserialization
This can be done by building a javascript object to match your mvc model. The names of the javascript properties have to match exactly to the mvc model or else the autobind won't happen on the post. Once you have your model on the server side you can then manipulate it and store the data to the database.
I am achieving this either by a double click event on a grid row or click event on a button of some sort.
#model TestProject.Models.TestModel
<script>
function testButton_Click(){
var javaModel ={
ModelId: '#Model.TestId',
CreatedDate: '#Model.CreatedDate.ToShortDateString()',
TestDescription: '#Model.TestDescription',
//Here I am using a Kendo editor and I want to bind the text value to my javascript
//object. This may be different for you depending on what controls you use.
TestStatus: ($('#StatusTextBox'))[0].value,
TestType: '#Model.TestType'
}
//Now I did for some reason have some trouble passing the ENUM id of a Kendo ComboBox
//selected value. This puzzled me due to the conversion to Json object in the Ajax call.
//By parsing the Type to an int this worked.
javaModel.TestType = parseInt(javaModel.TestType);
$.ajax({
//This is where you want to post to.
url:'#Url.Action("TestModelUpdate","TestController")',
async:true,
type:"POST",
contentType: 'application/json',
dataType:"json",
data: JSON.stringify(javaModel)
});
}
</script>
//This is your controller action on the server, and it will autobind your values
//to the newTestModel on post.
[HttpPost]
public ActionResult TestModelUpdate(TestModel newTestModel)
{
TestModel.UpdateTestModel(newTestModel);
return //do some return action;
}
I think you need to explicitly pass the data attribute. One way to do this is to use the
data = $('#your-form-id').serialize();
This post may be helpful.
Post with jquery and ajax
Have a look at the doc here..
Ajax serialize
you can create a variable and send to ajax.
var m = { "Value": #Model.Value }
$.ajax({
url: '<%=Url.Action("ModelPage")%>',
type: "POST",
data: m,
success: function(result) {
$("div#updatePane").html(result);
},
complete: function() {
$('form').onsubmit({ preventDefault: function() { } });
}
});
All of model's field must bo ceated in m.
In ajax call mention-
data:MakeModel(),
use the below function to bind data to model
function MakeModel() {
var MyModel = {};
MyModel.value = $('#input element id').val() or your value;
return JSON.stringify(MyModel);
}
Attach [HttpPost] attribute to your controller action
on POST this data will get available