主要畫面cshtml傳參數給PartialView

主要畫面傳參數給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