Alignment issues between a View and Partial View

Question

I am wondering if anyone could help me with some alignment issues I am having. I have a partial view which I want to put inside a table as I loop through it.

I have tried two approaches

1. Using two separate tables (One in the the main view and one in the partial view).

2. Putting the table in the main view and then only the rows in the partial view to no success.

I am also getting extra line breaks between each loop through my model (This is the main reason I want to use a table, to try and stop these extra blank lines.)

I have Updated whats happening now, including the suggestions made. I am have still having issues.

The Issue occurs to be very specific when I click add new. The new row is not going into the table, because the table has already be created in on page load, is it possible to update the whole table when the partial is updated...? The problem is the header of the table is outside the partial view so it will not continually repeated

Any help would be gratefully appreciated.

Image

Main View:

<div id="editorRows">
    <div class="row text-center ">
        @Html.ActionLink("Add New Line", "BlankEditorRow", null, new { id = "addItem", @class = "btn blue" })
        <input type="submit" value="Save Changes" class="btn blue" />
    </div>

    <table class="table" style="border: none;" width="70">
        <tr>
            <th>StockCode</th>
            <th class="tg-031e">Description</th>
            <th>Qty</th>
            <th>Price</th>
            <th>Net</th>
            <th>Tax</th>
            <th>Gross</th>
            <th>Remove</th>
        </tr>
        <tr>
            @if (Model.OrderLines != null)
            {
                foreach (var item in Model.OrderLines)
                {
                    Html.RenderPartial("OrderLinesEditorRow", item);
                }
            }
        </tr>
    </table>
</div>

Partial View:

@using HtmlHelpers.BeginCollectionItem
@model MyModel.Models.OrderLines

<style>
    input.Width {
        width: 5em;
    }
</style>

<div class="editorRow">
    <script>
        $("a.deleteRow").live("click", function () {
            $(this).parents("div.editorRow:first").remove();
            return false;
        });

        $(document).ready(function () {
            $('.selectpicker').selectpicker({
                liveSearch: true,
                showSubtext: true
            });
        });
    </script>

    @using (Html.BeginCollectionItem("OrderLines"))
    {
        <td>
            @Html.HiddenFor(model => model.Itemid, new { size = 4 })
            @Html.DropDownList("StockCode",
                    new SelectList(ViewBag.StockCodeList, "Value", "Text"),
                    new
                    {
                        @class = "form-control selectpicker",
                        @Value = @Model.Description,
                        onchange = "this.form.submit();",
                        data_show_subtext = "true",
                        data_live_search = "true"
                    })
        </td>

        <td>
            @Html.DropDownListFor(x => x.StockCode,
                      (IEnumerable<SelectListItem>)ViewBag.AllStockList,
                       new
                       {
                           @class = "form-control selectpicker",
                           @Value = @Model.Description,
                           onchange = "this.form.submit();",
                           data_show_subtext = "true",
                           data_live_search = "true"
                       })
        </td>

        <td>
            @Html.EditorFor(model => model.QtyOrder, new { htmlAttributes = new { @class = "form-control Width", @Value = @Model.QtyOrder } })
        </td>

        <td>
            @Html.EditorFor(model => model.UnitPrice, new { htmlAttributes = new { @class = "form-control Width", @Value = @Model.UnitPrice } })
        </td>

        <td>
            @Html.EditorFor(model => model.NetAmount, new
            {
                htmlAttributes = new { @class = "form-control Width", @Value = @Model.NetAmount }
            })
        </td>

        <td>
            @Html.EditorFor(model => model.TaxAmount, new { htmlAttributes = new { @class = "form-control Width", @Value = @Model.TaxAmount } })
        </td>

        <td>
            @Html.EditorFor(model => model.FullNetAmount, new { htmlAttributes = new { @class = "form-control Width", @Value = @Model.FullNetAmount } })
        </td>

        <td>
            <a href="#" class="deleteRow btn blue">Remove</a>
        </td>
    }
</div>

Answer 1

you can use two tr , i mean two table rows instead of one and construct rowwise in your pertial view. You only used 1 tr and inside of that row you added 2 dropdowns or text boxes. After that you can check if your html is a valid html5. Link https://validator.w3.org

Also from main view just start the table markup..then foreach..which will only contain row..at the end you close ur table mark up. Problem is you have too many tables. I would say it can be combined to only 1 table.

Main view: table starts with header ...foreach item .........partial view with table row only ....end of foreach Main view: close table

Answer 2

The Solution which worked for me in the was

<table class="inventory">
    <thead>
        <tr>
            <th width="180"><span>Code</span></th>
            <th width="265"><span>Description</span></th>
            <th><span>Price</span></th>
            <th><span>Quantity</span></th>
            <th><span>Discount %</span></th>
            <th><span>Discount Amt</span></th>
            <th><span>Net £</span></th>
            <th><span>Tax %</span></th>
            <th><span>VAT Amt</span></th>
        </tr>
    </thead>

    @{
        if (Model.OrderLines == null)
        {
            Model.OrderLines = new List<Accounts.Models.OrderLines>();
            Accounts.Models.OrderLines Line = new Accounts.Models.OrderLines();
            Line.CustomerID = Model.CustomerID;
            Model.OrderLines.Add(Line);
        }

        foreach (var item in Model.OrderLines)
        {
            Html.RenderPartial("orderline", item);
        }
    }

</table>

And Partial

    @using HtmlHelpers.BeginCollectionItem
@{
    Layout = "";
}

@using (Html.BeginCollectionItem("OrderLines"))
{
    <tbody>
        <tr>
            <td>
                <a class="cut">-</a><span contenteditable>
                    @Html.DropDownList("StockCode", new SelectList(ViewBag.StockCodeList, "Value", "Text"),
                    new
                     {
                         @class = "form-control selectpicker",
                         @Value = @Model.Description,
                         onchange = "this.form.submit();",
                         data_show_subtext = "true",
                         data_live_search = "true"
                     })
                </span>
            </td>
            <td><span contenteditable>
                    @Html.DropDownList("StockCode", new SelectList(ViewBag.AllStockList, "Value", "Text"),
                                 new
                                    {
                                        @class = "form-control selectpicker ",
                                        onchange = "this.form.submit();",
                                        data_show_subtext = "true",
                                        data_live_search = "true"
                                    })
                </span></td>
            <td><span data-prefix>$</span><span contenteditable>150.00</span></td>
            <td><span contenteditable>4</span></td>
            <td><span contenteditable>0</span></td>
            <td><span contenteditable>0.00</span></td>
            <td><span contenteditable>0.00</span></td>
            <td><span contenteditable>0</span></td>
            <td><span data-prefix>$</span><span>0.00</span></td>
        </tr>
    </tbody>
}