c# - C# MVC Viewmodel 数据未显示在数据表中

问题描述

我有一个活跃/不活跃的交易列表，我希望在我的视图中显示一个包含活跃交易列表的数据表。每当我加载视图时，我都会收到无效的 JSON 响应。使用浏览器对请求进行故障排除我看到我的响应只是显示我的视图的 HTML。

我确信我错过了一些非常明显的东西。作为记录，在我的控制器操作中，我尝试返回一些不同的东西但无济于事（我将在下面列出）

我的控制器代码：

public ActionResult TFSA()
{
    var trades = db.Trades.Where(t => t.AccountName == "TFSA" && t.Active == true).OrderBy(l => l.TradeID).ToList(); ;
    TradeIndexViewModel model = new TradeIndexViewModel()
    {
        ActiveTrades = Mapper.Map<IEnumerable<Trade>, List<ActiveTradesViewModel>>(trades)
    };

    return View();
    //return Json(new { data = model.ActiveTrades }, JsonRequestBehavior.AllowGet); 
    //return Json(model.ActiveTrades, JsonRequestBehavior.AllowGet);
    //return View(jsonModel);
}

注释掉的回报是我尝试过的。当我返回 JSON 时，我的应用程序只会显示 JSON 数据（没有 HTML）。

我的视图模型：

public class TradeIndexViewModel
{
    public IEnumerable<ActiveTradesViewModel> ActiveTrades { get; set; }
    public IEnumerable<ClosedTradesViewModel> ClosedTrades { get; set; }
}

public class ActiveTradesViewModel
{
    [Display(Name = "Stock")]
    public string Ticker { get; set; }

    [Display(Name = "Shares")]
    public int Shares { get; set; }

    [Display(Name = "Avg Cost")]
    public float AvgCost { get; set; }

    [Display(Name = "Book Value")]
    public float BookValue { get; set; }

    [Display(Name = "Price")]
    public float Price { get; set; }

    [Display(Name = "Market Value")]
    public float MarketValue { get; set; }

    [Display(Name = "Daily Profit")]
    public float DailyProfit { get; set; }

    [Display(Name = "Profit")]
    public float Profit { get; set; }

    [Display(Name = "ROI")]
    public string ROI { get; set; }

    [Display(Name = "Fees")]
    public float Fees { get; set; }
}

我的观点：

@model InvestmentProject.ViewModels.TradeIndexViewModel

<html>
<body>
    <div class="jumbotron jumbotron-flud">
        <table id="tfsaActiveTrades" class="table table-striped table-hover display">
            <thead>
                <tr>
                    <th>Stock</th>
                    <th>Shares</th>
                    <th>Avg Cost</th>
                    <th>Book Value</th>
                    <th>Price</th>
                    <th>Market Value</th>
                    <th>Profit/Day</th>
                    <th>Profit</th>
                    <th>ROI</th>
                    <th>Fees</th>
                </tr>
            </thead>
        </table>
</body>
</html>

@section Scripts{
    <script type="text/javascript">
        $('#tfsaActiveTrades').DataTable({
            "ajax": {
                "url": "/Home/TFSA",
                "type": "GET",
                "dataType": "json"
            },
            "columns": [
                {
                    "data": "Ticker",
                    "autoWidth": true,
                    "searchable": true
                },
                {
                    "data": "Shares",
                    "autoWidth": true,
                    "searchable": true
                },
                {
                    "data": "AvgCost",
                    "autoWidth": true,
                    "searchable": true
                },
                {
                    "data": "BookValue",
                    "autoWidth": true,
                    "searchable": true
                },
                {
                    "data": "Price",
                    "autoWidth": true,
                    "searchable": true
                },
                {
                    "data": "MarketValue",
                    "autoWidth": true,
                    "searchable": true
                },
                {
                    "data": "DailyProfit",
                    "autoWidth": true,
                    "searchable": true
                },
                {
                    "data": "Profit",
                    "autoWidth": true,
                    "searchable": true
                },
                {
                    "data": "ROI",
                    "autoWidth": true,
                    "searchable": true
                },
                {
                    "data": "Fees",
                    "autoWidth": true,
                    "searchable": true
                },
            ],
        });
    </script>
}

我也很高兴以不同的方式显示我的 activetrades 视图模型中的内容。

标签： c#asp.net-mvcdatatables

您需要将model对象传递到将要呈现的视图中，如下所示：

return View(model);

然后你还需要定义表格的主体部分，并生成行和单元格。

在关闭之后</thead>，插入：

<tbody>
    @foreach (var item in Model.ActiveTrades)
    {
        <tr>
            <td>@item.Prop1</td>
            <td>@item.Prop2</td>
            ( .... etc.... )
        </tr>
    }
</tbody>

使用您的实际属性名称而不是这些示例。

通过这样做，您可以省去所有的 Ajax 代码，这样就不需要了。

c# - C# MVC Viewmodel 数据未显示在数据表中

问题描述

解决方案

推荐阅读