MVC3中如何在一个页面的订单列表中点击同一页面显示订单详细信息

Question

说明：MVC3中如何在一个页面的订单列表中点击同一页面显示订单详细信息，订单和订单详细是两个表，这个页面用的是ViewModel
1.ViewModel代码如下：
public class OrderViewModel
    {
        public List<Order> Orders { get; set; }
        public List<OrderDetail> OrderDetails { get; set; }
    }
2.页面如下：
@model MvcMusicStore.ViewModels.OrderViewModel@{
    ViewBag.Title = "OrderList";
}<table>
    <tr>
        <th></th>
    </tr>@foreach (var item in Model.Orders) {
    <tr>
        <td>
            @item.OrderId
        </td>
        <td>
            @item.Username
        </td>
        <td>
            @item.Address
        </td>
       
        <td>
        
            @Html.ActionLink("Edit", "Edit", new { id=item.OrderId }) |            这里怎么写，点击“订单明细”显示在div show里部分视图Details.cshtml的内容            @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
        </td>
    </tr>
}</table>
<div id="show" >
</div>
部分视图，MVC3

Answer 1

你可以是返回的model为 List<Order>然后点击某个订单，利用 js+ajax 根据当前订单id获取详细信息后，展示在本页面上

Answer 2

我是MVC新手，没有人用ViewModel的时候遇到过这种情况吗？

Answer 3

正常就是列表就是列表页，页面接受的模型也是List<Order>详细页，也是独立的，页面接受的模型，也就是 Order只不过，如果整合到一个页面的话，就是，js+ajax，像控制器发送请求，返回json，也好，只要能被前台解析，就可以，然后展示信息出来就完了.

Answer 4

这个和Ajax没关系吧
你使用ajax获取数据 返回显示在DIV就是了

Answer 5

ajax 传个ID过去。返回一串Html 你用个弹出层什么的直接加进去就好了。

Answer 6

弹出层我是用的 bootstrap  LZ可以百度一下。。    <div id="EditModal" class="modal hide fade">    
    </div><a class="btn btn btn-primary edit" href="javascript:;" Get-Url="@Url.Action("DetailsPartial", new { id = item.About_ID  })"><i class="icon-pencil icon-white"></i>&nbsp;编辑</a> $(".edit").click(function () {
                $.ajax({
                    type: "GET",
                    url: $(this).attr("Get-Url"),
                    success: function (data) {
                        $("#EditModal").html(data);//data获取的是一个partialview的Html
                        $("#EditModal").modal("show");//弹出层 
                    }
                });
            });        [HttpGet]
        public ActionResult DetailsPartial(int id)
        {
            System.Threading.Thread.Sleep(2000);
            Travel_About model = repository.LoadEntities(i => i.About_ID == id).FirstOrDefault();
            return PartialView(model);
        }  //这个action 返回一个PartialView  也就是下面的内容
@using (Html.BeginForm("Edit", "About", new { id = Model.About_ID }, FormMethod.Post, new { @class = "form-horizontal", style = "margin:0" }))
{
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>编辑</h3>
    </div>
    <div class="modal-body">
       <div class="control-group">
            <label class="control-label" > 名称</label>
            <div class="controls">
                @Html.TextBoxFor(m => m.About_Name, new { @class = "span3" })
            </div>
        </div>
       <div class="control-group">
            <label class="control-label" > 备注</label>
            <div class="controls">
                @Html.TextBoxFor(m => m.About_Note, new { @class = "span3" })
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal">关闭</button>
        <button class="btn btn-primary" type="submit">保存更改</button>
    </div>
}