Question

所以我正在尝试创建一个Invoice表单。在这种形式中，我想填写一些客户详细信息并添加相同形式的产品我创建了一个我希望它看起来如何的静态示例：我的想法是手动填写产品，如果我想要其他产品，我会按绿色加上glyphicon并添加其他产品。
通过单击创建按钮，我想提交整个表单，其中包含客户详细信息和添加产品的数组/列表。

这是我到目前为止的代码：

这是我在视图中使用的视图模型：

public class InvoiceViewModel
{
    public Enums.Gender Gender { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string StreetName { get; set; }
    public string HouseNumber { get; set; }
    public string PostCode { get; set; }
    public string City { get; set; }
    public string PhoneNumber { get; set; }
    public string EmailAddress { get; set; }
    public List<InvoiceItemViewModel> InvoiceItems { get; set; }
}

这是我在局部视图中使用的InvoiceItemViewModel：

public class InvoiceItemViewModel
{
    public string Name { get; set; }
    public Enums.UnitType UnitType { get; set; }
    public int Ammount { get; set; }
    public decimal PriceWithoutVAT { get; set; }
}

这是创建视图：

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.Gender, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EnumDropDownListFor(model => model.Gender)
                @Html.ValidationMessageFor(model => model.Gender, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.LastName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.PostCode, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.PostCode, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.PostCode, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.HouseNumber, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.HouseNumber, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.HouseNumber, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.StreetName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.StreetName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.StreetName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.City, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.City, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.City, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.PhoneNumber, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.PhoneNumber, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.PhoneNumber, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.EmailAddress, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.EmailAddress, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.EmailAddress, "", new { @class = "text-danger" })
            </div>
        </div>

        <hr />
        <h4>Products</h4>
        <div class="container">
            <div class="row">
                <div class="col-md-6">Name</div>
                <div class="col-md-2">Unit(s)</div>
                <div class="col-md-2">Ammount</div>
                <div class="col-md-2">Price</div>
            </div>
            <div class="form-group">
                <div class="row">
                    <div class="col-md-11">
                        @Html.Partial("~/Views/Invoice/InvoiceItem.cshtml")
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-11">
                        @Html.Partial("~/Views/Invoice/InvoiceItem.cshtml")
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-11">
                        @Html.Partial("~/Views/Invoice/InvoiceItem.cshtml")
                    </div>
                    <div class="col-md-1">
                        <span class="glyphicon glyphicon-plus" style="color: green;"></span>
                    </div>
                </div>
            </div>
        </div>

        <br />
        <br />
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>

    </div>
}

这是发票项目的部分视图：

<div class="col-md-6">
    @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
</div>
<div class="col-md-2">
    @Html.EnumDropDownListFor(model => model.UnitType)
</div>
<div class="col-md-2">
    @Html.EditorFor(model => model.Ammount, new { htmlAttributes = new { @class = "form-control" } })
</div>
<div class="col-md-2">
    @Html.EditorFor(model => model.PriceWithoutVAT, new { htmlAttributes = new { @class = "form-control" } })
</div>

所以我的问题是，如何向我的表单添加多个发票项目，我可以在提交时在控制器中使用？我担心这会是很多javascript DOM操作。

Answer 1

在页面上有一个隐藏的行模板，然后单击加号按钮，您可以读取模板的innerhtml并附加到列表容器。

示例代码

var templatehtml = $('#template')[0].innerHTML;
var newhtml = templatehtml
        .replace(new RegExp('{{counter}}', 'g'), counter.toString())
        .replace('{{counter++}}', (Number(counter) + Number(1)).toString());
$('#container').append(newhtml);

这将帮助您入门，但它不是最优化的代码，推荐的方法是使用像JSRender这样的模板库

带有动态对象数组的C＃MVC Razor表单

1 个答案: