ASP.NET MVC 6如何通过SelectList选中Id获取完整Order对象

方案一：前端无刷新处理（推荐） #

无需回发服务器，直接在前端完成数据匹配与展示，响应速度更快。

1. 视图层准备数据与下拉框 #

先将Order列表序列化为JSON存储在页面，再渲染绑定Id和Code的下拉框：

@model YourNamespace.ViewModels.OrderListViewModel
@{
    ViewData["Title"] = "Order Selection";
}

<h1>Select an Order</h1>

<!-- 隐藏存储所有Order数据的JSON -->
<script>
    const allOrders = @Html.Raw(Json.Serialize(Model.Orders));
</script>

<!-- 下拉框（两种写法任选其一） -->
<!-- 写法1：手动遍历 -->
<select id="orderSelect" class="form-control">
    <option value="">-- Select an Order --</option>
    @foreach (var order in Model.Orders)
    {
        <option value="@order.Id">@order.Code</option>
    }
</select>

<!-- 写法2：使用SelectList -->
@* @Html.DropDownList("orderId", new SelectList(Model.Orders, "Id", "Code"), "-- Select an Order --", new { @class = "form-control", id = "orderSelect" }) *@

<!-- 详情展示区域 -->
<div id="orderDetails" class="mt-3" style="display: none;">
    <h3>Order Details</h3>
    <p><strong>Amount:</strong> <span id="amount"></span></p>
    <p><strong>Coin Name:</strong> <span id="coinName"></span></p>
</div>

2. 添加JavaScript监听事件 #

监听下拉框变化事件，从JSON数据中匹配选中的Order并填充详情：

document.getElementById('orderSelect').addEventListener('change', function() {
    const selectedOrderId = parseInt(this.value);
    const orderDetailsDiv = document.getElementById('orderDetails');
    const amountSpan = document.getElementById('amount');
    const coinNameSpan = document.getElementById('coinName');

    if (selectedOrderId) {
        const selectedOrder = allOrders.find(order => order.Id === selectedOrderId);
        if (selectedOrder) {
            amountSpan.textContent = selectedOrder.Amount;
            coinNameSpan.textContent = selectedOrder.Coin?.Name || 'N/A';
            orderDetailsDiv.style.display = 'block';
        } else {
            orderDetailsDiv.style.display = 'none';
        }
    } else {
        orderDetailsDiv.style.display = 'none';
    }
});

注意：后端查询Order时需用Include(o => o.Coin)加载关联的Coin数据，否则前端selectedOrder.Coin会为null。

方案二：后端回发处理 #

若需实时获取最新数据，可通过表单回发或AJAX请求后端接口。

方式1：表单回发 #

视图代码

@model YourNamespace.ViewModels.OrderDetailViewModel
@{
    ViewData["Title"] = "Order Selection";
}

<h1>Select an Order</h1>

<form method="post" asp-action="GetOrderDetails">
    <select name="orderId" class="form-control">
        <option value="">-- Select an Order --</option>
        @foreach (var order in Model.AvailableOrders)
        {
            <option value="@order.Id" @(Model.SelectedOrder?.Id == order.Id ? "selected" : "")>@order.Code</option>
        }
    </select>
    <button type="submit" class="btn btn-primary mt-2">Load Details</button>
</form>

@if (Model.SelectedOrder != null)
{
    <div class="mt-3">
        <h3>Order Details</h3>
        <p><strong>Amount:</strong> @Model.SelectedOrder.Amount</p>
        <p><strong>Coin Name:</strong> @Model.SelectedOrder.Coin.Name</p>
    </div>
}

控制器代码

public class OrderController : Controller
{
    private readonly YourDbContext _context;

    public OrderController(YourDbContext context)
    {
        _context = context;
    }

    public IActionResult Index()
    {
        var viewModel = new OrderDetailViewModel
        {
            AvailableOrders = _context.Orders.ToList()
        };
        return View(viewModel);
    }

    [HttpPost]
    public IActionResult GetOrderDetails(int? orderId)
    {
        var viewModel = new OrderDetailViewModel
        {
            AvailableOrders = _context.Orders.ToList()
        };

        if (orderId.HasValue)
        {
            viewModel.SelectedOrder = _context.Orders
                .Include(o => o.Coin)
                .FirstOrDefault(o => o.Id == orderId.Value);
        }

        return View("Index", viewModel);
    }
}

视图模型

public class OrderDetailViewModel
{
    public List<Order> AvailableOrders { get; set; }
    public Order SelectedOrder { get; set; }
}

方式2：AJAX异步回发 #

控制器添加API动作

[HttpGet]
public IActionResult GetOrderById(int id)
{
    var order = _context.Orders
        .Include(o => o.Coin)
        .FirstOrDefault(o => o.Id == id);
    
    if (order == null)
    {
        return NotFound();
    }

    return Json(new {
        Amount = order.Amount,
        CoinName = order.Coin.Name
    });
}

视图中的JS代码

document.getElementById('orderSelect').addEventListener('change', function() {
    const selectedOrderId = this.value;
    const orderDetailsDiv = document.getElementById('orderDetails');

    if (selectedOrderId) {
        fetch(`/Order/GetOrderById?id=${selectedOrderId}`)
            .then(response => response.json())
            .then(data => {
                document.getElementById('amount').textContent = data.Amount;
                document.getElementById('coinName').textContent = data.CoinName;
                orderDetailsDiv.style.display = 'block';
            })
            .catch(error => {
                console.error('Error fetching order details:', error);
                orderDetailsDiv.style.display = 'none';
            });
    } else {
        orderDetailsDiv.style.display = 'none';
    }
});

内容的提问来源于stack exchange，提问作者Edgar Gomez