主要畫面傳參數給PartialView
這個問題實務上還蠻常遇到的,今天剛好有遇到有遇到一個範例,順便把它紀錄下來
公司系統有個表單查詢結果下載的功能是做成PartialView,cshtml裡的語法如下。
@model string
@{
string saveName = (ViewData["saveName"] as string) ?? "Save To Excel";
string url = (ViewData["url"] as string) ?? Model;
string onclick = ViewData["onclick"] as string;
}
<span class="searchclosed y top5">
<a href="@(url)" target="_blank" @(onclick != null ? "onclick=" + onclick : "")>
<span class="z ul_clear ui_desc">@saveName</span>
<span class="closeicoa ui_close ui-dialog-titlebar-close ui-corner-all z pointer" role="button">
<span class="ui-ico-excel"></span>
</span>
</a>
</span>
方法1:透過model傳參數
可以看到第2個參數傳了一大堆由url取得的查詢條件參數要給Controller的Action做查詢來產出excel,如果今天有100多個的查詢條件,那Razor寫起來會花很多時間
@model string
@{
string text = (ViewData["text"] as string) ?? "Download";
string url = (ViewData["url"] as string) ?? Model;
string onclick = ViewData["onclick"] as string;
string name = ViewData["name"] as string;
string title = (ViewData["title"] as string ?? "");
string a_style = ViewData["a_style"] as string ?? "padding-right:10px;";
string i_style = ViewData["i-style"] as string ?? "padding-right:3px;";
string a_class = (ViewData["a_class"] as string) ?? "";
}
<a @(name != null ? "id=" + name : "") href="@url" target="_blank" @if (onclick != null) { @: onclick='@onclick'
}
@if (title != null) { @: title='@title'
}
@if (a_class != null) { @: class='@a_class'
}
@if (a_style != null) { @: style='@a_style'
}>
<i class="fa fa-download"
@if (i_style != null) { @: style='@i_style'
}></i>@text
</a>
由於我們沒有傳入ViewData參數給Partial,所以套用的是這個多載方法,我們透過Url.Action
傳了一個帶有一大堆參數的網址字串給Partial,其實我們可以把model轉成一個class model,但同事的做法把他轉型成string,在賦值給變數url,當然這作法是麻煩了點,但其實也達到了傳參數的目的!!!
方法2:透過ViewData傳參數
我的做法是寫一個javascript function,把所有查詢條件轉成json字串後再丟到Controller Action把他轉成物件,要達成這件事首先就是要在onclick時執行function,但要怎麼跟Partial說當我onclick時要執行哪個funtion?可以看到partial裡面有個變數叫做url,它的來源是ViewData["url"] as string
所以我們只要在主畫面丟一個key值為url的ViewData給Partial就可以了,如下圖所示,另外也丟了一個key值為text
的ViewData給PartialView,讓下載按鍵的顯示文字變成我們設定的[下載它]。
<div class="y" style="padding: 5px;">
@Html.Partial(
"~/Views/Tuple/_Custom_File_Download.cshtml",
new ViewDataDictionary { { "onclick", "ExportFile()" }, { "text", "下載它" } })
</div>
function ExportFile() {
var data = { searchCon: JSON.stringify(spareparts_ship.data.SearchCon) };
$.ajax({
url: '@Url.Action("Export", "Spareparts_List", new { area = "Onsite" })',
type: 'post',
data: data,
dataType:'json'
}).done(function (response) {
if (response.filePath.length > 0 && response.fileName.length > 0) {
window.location.href = "@Url.RouteUrl(new { Controller = "Spareparts_List", Action = "Download"})?filePath=" + response.filePath + "&fileName=" + response.fileName;
}
});
}
成果長這個樣子
如果要看怎麼處理excel下載請參考:https://www.dotblogs.com.tw/HaoAreYou/2021/06/16/171656