Question

我的目标是将点击的表格导出为excel（csv）。这需要在页面上获取模型，并将其发布到服务器。但它提供的难度很大。

如何在视图中将模型发布到控制器。

以下是我的代码

查看：

@model List<NameSpace.Property>


@using (Html.BeginForm("Export","Excel", FormMethod.Post))
{

   <input type="submit" class="submit" value="Submit" />
}    

<table .... />

控制器：

     public void Export(List<Property> list)
    {

    }

Answer 1

控制器操作

    public void Export(List<Property> list)
    {

    }

属性类

public class Property
{

    public string Name { get; set; }
    public string Street { get; set; }
    public string Postcode { get; set; }
}

Html表

<table id="my-table">
    <tbody>
        <tr>
            <td>Chris</td>
            <td>Awesome Street</td>
            <td>DH9 4LD</td>
        </tr>
        <tr>
            <td>Sean</td>
            <td>Lame Street</td>
            <td>DH8 4SR</td>
        </tr>
    </tbody>
</table>

Jquery的

<script type="text/javascript">


    var aData = {};

    $('#my-table tbody tr').each(function(index, value) {

        aData['list[' + index + '].Name'] = $(value).children().eq(0).text();
        aData['list[' + index + '].Street'] = $(value).children().eq(1).text();
        aData['list[' + index + '].Postcode'] = $(value).children().eq(2).text();

    });

    $.post("@Url.Action("Export")", aData, function(data) {


    });


</script>

这应该足以让你入门。希望这有帮助

<强>更新

或者，如果您不想要Jquery特定解决方案，则可以在隐藏字段中输出数据

    <input type="hidden" name="[0].Name" value="Chris" />
    <input type="hidden" name="[0].Street" value="..." />
    <input type="hidden" name="[0].Postcode" value="...." />

    <input type="hidden" name="[1].Name" value="Sean" />
    <input type="hidden" name="[1].Street" value="..." />
    <input type="hidden" name="[1].Postcode" value="...." />

这将以您的表单提交

Answer 2

由于您没有说明您的表格是显示静态数据还是动态数据，因此我提供了两种解决方案：

<强> STATIC：

例如，如果您请求网址（假设）：/home/index/1。检索该表的数据（1），然后显示在视图的表中。

如果表中的信息没有改变，那么您不需要将任何信息发回服务器。您应该执行GET请求而不是POST请求来检索CSV。

您需要更改视图以接受包含所请求的原始ID的模型，并使用操作链接而不是表单：

@model MyTableViewModel

@Html.ActionLink("Click here to export", "Export", "Excel", new { id = Model.Id });

<table .... />

视图模型可能是：

public class MyTableViewModel
{
    public int Id { get; set; }
    public List<Customer> Customers { get; set; }
}

public class Customer
{
    public string Name { get; set; }
    public string Street { get; set; }
    public string PostCode { get; set; }
}

然后您的导出控制器操作将是：

public FileContentResult Export(int id)
{
    string csv = //Retrieve the information for the provided id and convert to csv format
    return File(new System.Text.UTF8Encoding().GetBytes(csv), "text/csv", "expostfilename.csv");
}

<强> DYNAMIC：

视图模型将不再需要ID，因此将成为：

public class MyTableViewModel
{
    public List<Customer> Customers { get; set; }
}

可以写视图：

@model MyTableViewModel

@using (Html.BeginForm("Export", "Home"))
{
    <table>
        <tbody>
            @for (int i = 0; i < Model.Customers.Count; i++)
            {
                <tr>
                    <td>Name: @Html.TextBoxFor(m => m.Customers[i].Name)</td>
                    <td>Street: @Html.TextBoxFor(m => m.Customers[i].Street)</td>
                    <td>PostCode: @Html.TextBoxFor(m => m.Customers[i].PostCode)</td>
                </tr>
            }
        </tbody>
    </table>

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

控制器导出操作：

public FileContentResult Export(MyTableViewModel vm)
{
   string csv = //convert view model (vm) to csv
   return File(new System.Text.UTF8Encoding().GetBytes(csv), "text/csv", "expostfilename.csv");
}

将模型发布回服务器

2 个答案: