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

Question

我有一个交易列表 active/inactive，我希望在我的视图中显示一个包含活跃交易列表的数据表。每当我加载视图时，我都会收到无效的 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);
}

注释掉的returns是我试过的。当我返回 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 视图模型中的内容。

Answer 1

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

return View(model);

然后您还需要定义table的正文部分，并生成行和单元格。

在结束 </thead> 之后插入：

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

使用您实际的属性名称代替这些示例。

通过这种方式，您可以省略所有 Ajax 代码，不需要它。

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

C# MVC Viewmodel data is not displaying in datatable

c#

asp.net-mvc

datatables