DiPix
DiPix

Reputation: 6083

Why this button displaying above table instead below in ASP.NET MVC CSS

I don't know why, but when i'll run application then this button is displaying above table. This button should be below this table. How can I fix this?

 <table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.MyList.FirstOrDefault().Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.MyList.FirstOrDefault().Amount)
        </th>
    </tr>

    @using (Html.BeginForm())
    {
        @Html.ValidationSummary("", new { @class = "text-danger" })
        <br />
        for (var i = 0; i < Model.MyList.Count; i++)
        {
            <tr>
                <td>
                    @Html.DisplayFor(model => model.MyList[i].Name)
                    @Html.HiddenFor(model => model.MyList[i].Name)
                </td>
                <td>
                    @Html.TextBoxFor(model => model.MyList[i].Amount)
                    @Html.HiddenFor(model => model.MyList[i].Amount)
                </td>
            </tr>

        }
        <input type="submit" value="Confirm" class="btn btn-success" />
    }
</table>

Upvotes: 0

Views: 72

Answers (1)

Captain0
Captain0

Reputation: 2623

Try this. You are mixing your table code with the rest of the Html

@using (Html.BeginForm())
{
    @Html.ValidationSummary("", new { @class = "text-danger" })
    <br />
    <table class="table">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.MyList.FirstOrDefault().Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.MyList.FirstOrDefault().Amount)
            </th>
        </tr>


        @for (var i = 0; i < Model.MyList.Count; i++)
        {
            <tr>
                <td>
                    @Html.DisplayFor(model => model.MyList[i].Name)
                    @Html.HiddenFor(model => model.MyList[i].Name)
                </td>
                <td>
                    @Html.TextBoxFor(model => model.MyList[i].Amount)
                    @Html.HiddenFor(model => model.MyList[i].Amount)
                </td>
            </tr>
        }
    </table>
    <input type="submit" value="Confirm" class="btn btn-success" />
}

Upvotes: 1

Related Questions