最近我的ASP.Net MVC Project 又遇到難題了
有時候因為希望可以建立一些功能給客戶選擇…
選擇後可以按一下相對的按鈕來 Download file
之前用ASP.Net時可以通過 Code-Behind來實現的
由於是要看看選擇了什麼才決定download 什麼東西
我的想法是用Jquey 來把已選擇的條件用Ajax Post到 Controller上
我的Controller是這樣的.. 為了方便做試驗我 Hard code Download File的位置
[HttpPost]
public ActionResult DownloadFile(string Filename)
{
return File(@"D:\UserProfile\Desktop\Img\MySQLMD5Function.png", "png/application", Filename);
}
我的cshtml是
<h2>Non Ajax Post</h2>
<input type="button" value="NonAjaxPost" id="btn_NonAjaxPost" />
之後便可以在這個Controller上 輸出這個檔案
$("#btn_NonAjaxPost").click(function () {
$.post('@Url.Action("DownloadFile", "NonAjaxPost")', { Filename:"example.png" }, function () {
});
});
之後發現.. 好像不能用 Ajax.Post 或 Ajax.Get 來 Download File
E.G. 不可以用Jquery 的Ajax Post或Get 的動作 連到一個 Download File的Action 來Download檔案.. [可能是因為Response 的Header 不能正確地 編譯 的關係]
最後終於想到了解決方法..
就是要寫一個功能來令到到JQuery做一個 正常的Post/Get
我們可以Extend JQuery的 Library
<script type="text/javascript">
$(document).ready(function () {
(function($) {
$.extend({
//要做到Non-Ajax Get的話
//我們可以使用
//document.location = “我們想用get 去瀏覽到的URL 上” 之後再加進 要用的Parameter進去
//其間我們使用這個功能時要放進2個Parameter 一個是 目的地的URL
//另一個是 我們希望Post的 Parameter
NonAjaxGet: function(url, params) {
document.location = url + '?' + $.param(params);
},
//要做到Non-Ajax Post的話
//我們可以使用JQuery/Javascript 來寫一個 暫用的Form來進行 之後用form.submit() 這個功能把Form Post進我們又Non-Ajax Post的頁面上
//其間我們要放進2個Parameter 一個是 目的地的URL
//另一個是 我們希望Post的 Parameter
NonAjaxPost: function(url, params) {
var $form = $("<form method='POST'>").attr("action", url);
$.each(params, function(name, value) {
$("<input type='hidden'>")
.attr("name", name)
.attr("value", value)
.appendTo($form);
});
$form.appendTo("body");
$form.submit();
}
});
})(jQuery);
});
使用方法:
假設我們都是使用JQuery的
// $.NonAjaxPost('要POST 到的URL', {
// 變數: "變數值",變數2: "變數值2"
// });
$("#btn_NonAjaxPost").click(function () {
$.NonAjaxPost('@Url.Action("DownloadFile", "NonAjaxPost")', {
Filename: "example.png"
});
});
這樣我便可以成功在ASP.Net MVC 使用JQuery來Download File了
Hope you find it useful