將所有選定的MultiSelectList值傳遞到MVC Controller，以將EPPlus導出到Excel？

Question

我試圖使用EPPlus庫向我的MVC5代碼優先應用程序添加Export()功能。 在我的視圖上，我有一個MultiSelectList，其中包含我的主要Model屬性的所有值：

@Html.ListBox("PropertyList", typeof(InventoryTracker.Models.INV_Assets).GetProperties().Select(p => new SelectListItem { Text = p.Name, Value = p.Name, Selected = false }), new { @Id = "exportListBox" })

這將呈現以下HTML：

<select Id="exportListBox" id="PropertyList" multiple="multiple" name="PropertyList"><option value="Id">Id</option>
<option value="Model_Id">Model_Id</option>
<option value="Model">Model</option>
<option value="Manufacturer_Id">Manufacturer_Id</option>
<option value="Manufacturer">Manufacturer</option>
<option value="Type_Id">Type_Id</option>
<option value="Type">Type</option>
<option value="Location_Id">Location_Id</option>
<option value="Location">Location</option>
<option value="Vendor_Id">Vendor_Id</option>
<option value="Vendor">Vendor</option>
<option value="Status_Id">Status_Id</option>
<option value="Status">Status</option>
<option value="ip_address">ip_address</option>
<option value="mac_address">mac_address</option>
<option value="note">note</option>
<option value="owner">owner</option>
<option value="cost">cost</option>
<option value="po_number">po_number</option>
<option value="description">description</option>
<option value="invoice_number">invoice_number</option>
<option value="serial_number">serial_number</option>
<option value="asset_tag_number">asset_tag_number</option>
<option value="acquired_date">acquired_date</option>
<option value="disposed_date">disposed_date</option>
<option value="verified_date">verified_date</option>
<option value="created_date">created_date</option>
<option value="created_by">created_by</option>
<option value="modified_date">modified_date</option>
<option value="modified_by">modified_by</option>
</select>

這是我的[Export]按鈕（超鏈接）的設置：

@*<a href="/Export/ExportUsingEPPlus" class="btn btn-default btn-sm noDecoration exportBtn"><span class="glyphicon glyphicon-export"> Export - EPPlus</span></a>*@
<a href="#" class="btn btn-default btn-sm noDecoration exportBtn"><span class="glyphicon glyphicon-export"> Export - EPPlus</span></a>

我現在不知道的是如何在MultiSelectList中獲取所有選定的值，並將它們傳遞給我的控制器，以決定應將哪些字段導出到Excel。

@section Scripts {

    <script type="text/javascript">
        $(document).ready(function () {

            $("a.exportBtn").on("click", function (e) {
                e.preventDefault();
                alert("Export button clicked!");
                exportSelectedAssets();
            });

            function exportSelectedAssets() {

            }
        });
    </script>
}

到目前為止，這是我使用EPPlus庫在控制器中提供的內容。 當前，它僅在[A1]單元中創建一個帶有一個值的.xlsx 。 將值從MultiSelectList傳遞到此控制器后，我想遍歷Table中所選字段的每個值並輸出它們：

    public ActionResult ExportUsingEPPlus()
    {

        //FileInfo newExcelFile = new FileInfo(output);
        ExcelPackage package = new ExcelPackage();
        var ws = package.Workbook.Worksheets.Add("TestExport");
        ws.Cells["A1"].Value = "Sample Export 1";


        var memoryStream = new MemoryStream();
        package.SaveAs(memoryStream);

        string fileName = "Exported-InventoryAssets-" + DateTime.Now + ".xlsx";
        string contentType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";

        memoryStream.Position = 0;
        return File(memoryStream, contentType, fileName);

    }

我正在考慮使用JSON將所有選擇的值發布到我的Controller，但是我不確定這是否是這種情況的最佳途徑嗎？ 可以給有更多經驗的人考慮一下嗎？

---

編輯 ：

嘗試達伍德的建議，我創建了一個ViewModel - ExportAssetsViewModel ：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace InventoryTracker.Models
{
    public class ExportAssetsViewModel
    {
        public Dictionary<int, string> ListOfExportFields { get; set; }
        public int[] SelectedFields { get; set; }

        public ExportAssetsViewModel() {
            ListOfExportFields = new Dictionary<int, string>() {
                {1, "Model"},
                {2, "Manufacturer"},
                {3, "Type"},
                {4, "Location"},
                {5, "Vendor"},
                {6, "Status"},
                {7, "ip_address"},
                {8, "mac_address"},
                {9, "note"},
                {10, "owner"},
                {11, "cost"},
                {12, "po_number"},
                {13, "description"},
                {14, "invoice_number"},
                {15, "serial_number"},
                {16, "asset_tag_number"},
                {17, "acquired_date"},
                {18, "disposed_date"},
                {19, "verified_date"},
                {20, "created_date"},
                {21, "created_by"},
                {22, "modified_date"},
                {23, "modified_by"},
            };
        }
    }
}

然后，將MultiSelectList放在HTML.BeginForm() ExportController - Index View中：

@using (Html.BeginForm())
{
    @Html.ListBox("PropertyList", typeof(InventoryTracker.Models.INV_Assets).GetProperties().Select(p => new SelectListItem { Text = p.Name, Value = p.Name, Selected = false }), new { @Id = "exportListBox" })
    <input type="submit" value="ExportUsingEPPlus" />
}

並在我的ExportUsingEPPlus()上ExportUsingEPPlus()修改，如下所示：

    [HttpPost]
    public ActionResult ExportUsingEPPlus(ExportAssetsViewModel model)
    {
        var exportFields = new List<string>();
        foreach(var selectedField in model.SelectedFields)
        {
            exportFields.Add(model.ListOfExportFields.First(s => s.Key == selectedField).Value);
        }


        //FileInfo newExcelFile = new FileInfo(output);
        ExcelPackage package = new ExcelPackage();
        var ws = package.Workbook.Worksheets.Add("TestExport");
        ws.Cells["A1"].Value = "Sample Export 1";


        var memoryStream = new MemoryStream();
        package.SaveAs(memoryStream);

        string fileName = "Exported-InventoryAssets-" + DateTime.Now + ".xlsx";
        string contentType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";

        memoryStream.Position = 0;
        return File(memoryStream, contentType, fileName);

    }

但是，當我單擊表單輸入按鈕時，未擊中ExportUsingEPPlus() Controller Action開頭的ExportUsingEPPlus()嗎？ 所發生的只是頁面似乎刷新並且我的選擇從MultiSelectList清除了？

---

編輯2 ：

將我的Index視圖上的@model從InventoryTracker.Models.INV_Assets更改為InventoryTracker.Models.ExportAssetsViewModel ，但是ListBoxFor()中的m.SelectedFields和Model.ListOfExportFields被標記為不包含定義的模型嗎？

@using GridMvc.Html
@using System.Collections.Generic
@using System.Web.Mvc
@using MvcCheckBoxList.Model
@model  InventoryTracker.Models.ExportAssetsViewModel

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Export</h2>

@using (Html.BeginForm("ExportUsingEPPlus", "Export", FormMethod.Post))
{
    @Html.ListBoxFor(m => m.SelectedFields, new MultiSelectList(Model.LisOfExportFields, "Key", "Value"), new { @class = "form-control", style = "height: 250px;" })
    <input type="submit" value="ExportUsingEPPlus" />
}

---

編輯3 ：

當我將ListBoxFor()懸停在ListBoxFor()中的m => m ，我INV_Assets即使我將@model重新定義為InventoryTracker.Models.ExportAssetsViewModel ，我的視圖似乎仍在使用模型INV_Assets 。 我重新輸入了@model定義，現在m簡單地顯示為(parameter) TModel m ...？

自從我之前嘗試使用ExportController並通過JS / AJAX傳遞選定值的想法創建了ExportAssetsViewModel以來，我想我會基於ExportAssetsViewModel制作一個新的控制器。 嘗試執行此操作會導致以下錯誤：

現在@Html.ListBoxFor(m => m.SelectedFields, new MultiSelectList(Model.ListOfExportFields, "Key", "Value"), new { @class = "form-control", style = "height: 250px;" })標記為： "The type arguments for method 'System.Web.Mvc.Html.SelectExtensions.ListBoxFor<.....> cannot be inferred from the usage. Try specifying the type arguments explicitly."

有人能幫忙嗎？

---

編輯4 ：

忽略EDIT3。 我沒有將ExportAssetsViewModel傳遞給View 。 固定如下：

控制器-索引動作 ：

    public ActionResult Index()
    {
        //var assetList = _db.INV_Assets.ToList();
        //return View(assetList);
        ExportAssetsViewModel expViewMod = new ExportAssetsViewModel();
        return View(expViewMod);
    }

索引視圖 ：

@using System.Collections.Generic
@using System.Web.Mvc
@model InventoryTracker.Models.ExportAssetsViewModel

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Export</h2>

<p>Please select which Asset fields to Export to Excel:</p>

@using (Html.BeginForm("ExportUsingEPPlus", "Export", FormMethod.Post))
{
    @Html.ListBoxFor(m => m.SelectedFields, new MultiSelectList(Model.ListOfExportFields, "Key", "Value"), new { @class = "form-control", style = "height: 250px;" })
    <input type="submit" value="ExportUsingEPPlus" />
}

Answer 1

如果您不使用Ajax，請執行以下操作：

創建一個ViewModel（具有字段列表和一個用於存儲所選字段的數組）：

public class ViewModel
{

    public Dictionary<int, string> LisOfFields { get; set; }
    public int[] SelectedFields { get; set; }


    public ViewModel()
    {
        LisOfFields = new Dictionary<int, string>()
        {
        {1, "Field1"},
        {2, "Field2"},
        {3, "Field3"},
        };

    }
}

然后創建一個視圖，用戶可以在其中選擇字段

@using (Html.BeginForm())
{

    @Html.ListBoxFor(m => m.SelectedFields, new MultiSelectList(Model.LisOfFields, "Key", "Value"), new { @class = "form-control", style = "height: 250px;" })

    <input type="submit" value="Export" />
}

在POST控制器中：（請注意以下方法存在語法錯誤）

[HttpPost]
public ActionResult Export(ViewModel model){
var exportFields = new List<string>();

foreach(var selectedfield in model.SelectedFields)
{
exportFields.Add(model.LisOfFields.First(s=> s.Key == selectedField).Value)

}

// EXPORT ALL in exportFields 

}

編輯：將您的窗體更改為此：

@using (Html.BeginForm("ExportUsingEPPlus","Export", FormMethod.Post))
{
    @Html.ListBoxFor(m => m.SelectedFields, new MultiSelectList(Model.LisOfFields, "Key", "Value"), new { @class = "form-control", style = "height: 250px;" })
    <input type="submit" value="ExportUsingEPPlus" />
}

Answer 2

使用ajax，您可以構建一個選定項目的數組，並使用jquery發布它們：

function exportSelectedAssets() {
 var selectedValues = [];
 $("#exportListBox :selected").each(function() {
   selectedValues.push($(this).attr('value'));
 });

 $.post("/ExportUsingEPPlus/", { Ids: selectedValues  });
}

請注意，我必須刪除呈現的選擇中的ID之一，因為它有兩個ID。

然后，您可以更改控制器操作以接受字符串值數組，並使用[HttpPost]裝飾它：

[HttpPost]
public ActionResult ExportUsingEPPlus(string[] Ids)
{
   ...
}

jsFiddle [演示選定的值]