How to Manipulate data to display appropriate html layout asp mvc

Question

I come from a procedural PHP background. I am trying to learn how to do the same stuff I used to do in php and do it in asp.net. I need to sort my orders under their perspective Customer name. Right now my layout is:

Sams Club
Order 1
Sams Club
Order 2
Walmart
Order 1
Walmart
Order 2
Walmart
Order 3

I need my layout more like:

Sams Club
Order 1
Order 2
Walmart
Order 1
Order 2
Order 3

I can easily do this with PHP but am struggling to figure out how to do this in an MVC type of application. This is how my cshtml page looks.

     <table class="table table-condensed" style="border-collapse:collapse;">
        <thead>
            <tr>
                <th><input type="checkbox" name="CheckOrders" />Select All </th>
                <th>Bill to Name</th>
                <th>Qty Ordered</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {    
                <tr data-toggle="collapse" data-target="#@Html.DisplayFor(model => item.customer_number)" class="accordion-toggle">
                    <td><input type="checkbox" name="checkAllCus" value="@Html.DisplayFor(model => item.customer_number)"/></td>
                    <td>
                        @Html.DisplayFor(model => item.Bill_to_Name)
                    </td>
                    <td> 
                        @Html.DisplayFor(model => item.Quantity_Ordered)
                    </td>
                </tr>
                <tr>
                    <td colspan="12" class="hiddenRow">
                        <div class="accordian-body collapse" id="@Html.DisplayFor(model => item.customer_number)">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                       <th></th>
                                       <th>Order Number</th>
                                       <th>Bill to Name</th>
                                       <th>Qty Ordered</th>
                                       <th>Ship Date</th>
                                       <th>Item #</th>
                                       <th>Description</th>
                                       <th>State</th>
                                       <th>Carrier</th>
                                       <th>Details</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><input type="checkbox" name="orders[]" value="@Html.DisplayFor(model => item.order_no)" /></td>
                                        <td>
                                            @Html.DisplayFor(model => item.order_no)
                                        </td>
                                        <td>
                                            @Html.DisplayFor(model => item.Bill_to_Name)
                                        </td>
                                        <td>
                                            @Html.DisplayFor(model => item.Quantity_Ordered)
                                        </td>
                                        <td>
                                            @Html.DisplayFor(model => item.Ship_Date)
                                        </td>
                                        <td>
                                            @Html.DisplayFor(model => item.item_no)
                                        </td>
                                        <td>
                                            @Html.DisplayFor(model => item.descr1)
                                        </td>
                                        <td>
                                            @Html.DisplayFor(model => item.shipstate)
                                        </td>
                                        <td>
                                            @Html.DisplayFor(model => item.shipper)
                                        </td>
                                        <td>
                                            @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ })
                                        </td> 
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </td>
                </tr>
            }
        </tbody>
    </table>

Below is my Model

namespace OpenCustomerOrder3.Models
{
    using System;

    public partial class spOrderDetails_Result
    {
        public string cusNo;
        public string customer_number { get; set; }
        public string shipper { get; set; }
        public string user_def_fld_5 { get; set; }
        public string item_no { get; set; }
        public string descr1 { get; set; }
        public string location1 { get; set; }
        public string Bill_to_Name { get; set; }
        public Nullable<decimal> Quantity_Ordered { get; set; }
        public string Requested_Date { get; set; }
        public string Ship_Date { get; set; }
        public string Status { get; set; }
        public string order_no { get; set; }
        public string shipstate { get; set; }
    }
}

How are you creating this list? I would change it to Name + List of Orders, instead of Name + Order — Fabricio Koch
– Fabricio Koch, Commented Nov 16, 2016 at 19:34
I'm not sure how your Model is currently set up, but the simplest way to handle this, I think, would be to have a Model that is an IEnumerable<Customer>, assuming your Customer model has the collection of Orders inside of it. Then your view basically becomes two foreach loops - loop through each Customer in the Model to create the Row, then loop through each Order in the Customer to create the Cells. If you can post your Model, and what this page is actually supposed to do, I can give a better answer. — Chris Thompson
– Chris Thompson, Commented Nov 16, 2016 at 19:42
Ive got @model IEnumerable<OpenCustomerOrder3.Models.spOrderDetails_Result> at the top of my view. Each row of order data has a customer number attached to it. — Ryan
– Ryan, Commented Nov 16, 2016 at 19:48

Nikkster · Accepted Answer · 2016-11-16 20:02:20Z

1

This really comes down to what your domain model looks like.

It looks like the model type being passed to the view at the moment is simply an IEnumerable<Order> or similar. If you really have to do this way, one way to achieve what you want is by grouping your orders by CustomerName using the GroupBy method in System.Linq.

However, a better model would be to let a Customer model have many orders, i.e. between Customer and Order there is a 1..* relationship. For example,

public class Customer
{
    public string Name { get; set; }
    public IEnumerable<Order> Orders { get; set; }
}

Then what you want is to pass an IEnumerable<Customer> instead to your view.

answered Nov 16, 2016 at 20:02

Nikkster

3372 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to Manipulate data to display appropriate html layout asp mvc

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related