C# 如何在ASP.NET MVC中生成jQuery模板？

我想用jQuery模板动态地向表单添加输入

下面列出了用于渲染窗体的我的viewModel

public class FormViewModel
{
    public int Id { get; set; }

    [Required]
    [StringLength(25, ErrorMessage = "Max firstname length is 25 symbols.")]
    [DisplayName("First name")]
    public string FirstName { get; set; }

    [Required]
    [StringLength(25, ErrorMessage = "Max lastname length is 25 symbols.")]
    [DisplayName("Last name")]
    public string LastName { get; set; }

    [Required]
    [Email(ErrorMessage = "Provide correct email address, please.")]
    [DisplayName("Email")]
    public string Email { get; set; }

    [Range(16, 150, ErrorMessage = "Age should be between 16 and 150.")]
    [DisplayName("Age")]
    public int? Age { get; set; }

    public IList<DiscountCode> Discounts { get; set; }
}

我有这个局部视图用于呈现折扣代码输入

@using DynamicForm.Models
@model FormViewModel
@if (Model != null && Model.Discounts != null)
{
    for (int i = 0; i < Model.Discounts.Count; i++)
    {
        <div class="row">
            <input type="hidden" name="Discounts.Index" value="@i" />
            <div class="col-md-4 form-group">
                <div class="input-group">
                    @Html.TextBoxFor(m => m.Discounts[i].Code, new { @class = "form-control " })
                    @Html.ValidationMessageFor(m => m.Discounts[i].Code, string.Empty, new { @class = "help-block" })
                </div>
            </div>
            <div class="col-md-6 form-group">
                <div class="input-group">
                    @Html.LabelFor(m => m.Discounts[i].Percent, new { @class = "control-label" })
                    @Html.TextBoxFor(m => m.Discounts[i].Percent, new { @class = "form-control " })
                    @Html.ValidationMessageFor(m => m.Discounts[i].Percent, string.Empty, new { @class = "help-block" })
                </div>
            </div>
            <div class="col-md-2 form-group">
                <div class="input-group">
                    <button type="button" class="btn btn-primary removeDiscountRow">Remove</button>
                </div>
            </div>
        </div>
    }
}

这个模板呢

<script id="discountRow" type="text/x-jsrender">
    <div class="row">
        <input type="hidden" name="Discounts.Index" value="{{: index}}">
        <div class="col-md-4 form-group">
            <div class="input-group">
                <label class="control-label" for="Discounts_{{: index}}__Code">Code name</label>
                <input class="form-control " data-val="true" data-val-required="Code is required" data-val-length="Max name length is 10 symbols." data-val-length-max="10"
                       id="Discounts_{{: index}}__Code" name="Discounts[{{: index}}].Code" type="text" value="">
                <span class="field-validation-valid help-block" data-valmsg-for="Discounts[{{: index}}].Code" data-valmsg-replace="true"></span>
            </div>
        </div>
        <div class="col-md-6 form-group">
            <div class="input-group">
                <label class="control-label" for="Discounts_{{: index}}__Percent">Code discount</label>
                <input class="form-control " data-val="true" data-val-required="Percent is required" data-val-number="The field Code discount must be a number."
                       data-val-range="The field Percent should be between 1 and 60." data-val-range-max="60" data-val-range-min="1"
                       data-val-regex="The field Percent should be a positive non-decimal number."
                       data-val-regex-pattern="^-?\d+$" data-val-required="The Code discount field is required."
                       id="Discounts_{{: index}}__Percent" name="Discounts[{{: index}}].Percent" type="text" value="0" aria-required="true" aria-invalid="false"
                       aria-describedby="Discounts_{{: index}}__Percent-error">
                <span class="help-block field-validation-valid" data-valmsg-for="Discounts[{{: index}}].Percent" data-valmsg-replace="true"></span>
            </div>
        </div>
        <div class="col-md-2 form-group">
            <div class="input-group">
                <button type="button" class="btn btn-primary removeDiscountRow">Remove</button>
            </div>
        </div>
    </div>
</script>

代号
代码折扣
去除

---

正如你们所看到的，我只是复制razor的输出并将其插入模板中。所以，若我在模型中更改验证，我每次都会更改模板。如何自动生成此模板并保留所有数据属性以进行客户端验证

您可以像创建输入代码一样生成模板代码，但Model.discounters必须至少有一个元素。请参阅下面的代码。如果折扣为空，我会将折扣代码添加到折扣中，并更改一些html属性以使模板显示为所需；）

if（Model.Discounts==null | | Model.Discounts.Count m.Discounts[0]。百分比，新的{@class=“control label”，For=“discounters[{{{:index}]。code”}）
@Html.TextBoxFor（m=>m.discounters[0]。代码，新{@class=“form control”，Id=“discounters”{{{{index}}}}{Code”，Name=“discounters[{{index}]。Code”，Value=”“}）
@Html.ValidationMessageFor（m=>m.discounters[0]。代码，字符串。空，新的{@class=“help block”，Data_Valmsg_For=“discounters[{{:index}]。代码”}）
@Html.LabelFor（m=>m.discounters[0].Percent，新的{@class=“control label”，For=“discounters[{{:index}].Percent”}）
@Html.TextBoxFor（m=>m.discounters[0].Percent，new{@class=“form control”，Id=“discounters{{{:index}}}}}{u Percent”，Name=“discounters[{{:index}].Percent”，Value=”“}）
@Html.ValidationMessageFor（m=>m.discounters[0].Percent，string.Empty，新建{@class=“help block”，Data_Valmsg_For=“discounters[{{:index}].Percent”}）
去除

为什么不能像创建其他数据一样创建用于验证的变量并传递给视图？

var data = { index: lastIndex };
var html = $.templates("#discountRow").render(data);
$(html).appendTo($discountsContainer);

<script id="discountRow" type="text/x-jsrender">
    <div class="row">
        <input type="hidden" name="Discounts.Index" value="{{: index}}">
        <div class="col-md-4 form-group">
            <div class="input-group">
                <label class="control-label" for="Discounts_{{: index}}__Code">Code name</label>
                <input class="form-control " data-val="true" data-val-required="Code is required" data-val-length="Max name length is 10 symbols." data-val-length-max="10"
                       id="Discounts_{{: index}}__Code" name="Discounts[{{: index}}].Code" type="text" value="">
                <span class="field-validation-valid help-block" data-valmsg-for="Discounts[{{: index}}].Code" data-valmsg-replace="true"></span>
            </div>
        </div>
        <div class="col-md-6 form-group">
            <div class="input-group">
                <label class="control-label" for="Discounts_{{: index}}__Percent">Code discount</label>
                <input class="form-control " data-val="true" data-val-required="Percent is required" data-val-number="The field Code discount must be a number."
                       data-val-range="The field Percent should be between 1 and 60." data-val-range-max="60" data-val-range-min="1"
                       data-val-regex="The field Percent should be a positive non-decimal number."
                       data-val-regex-pattern="^-?\d+$" data-val-required="The Code discount field is required."
                       id="Discounts_{{: index}}__Percent" name="Discounts[{{: index}}].Percent" type="text" value="0" aria-required="true" aria-invalid="false"
                       aria-describedby="Discounts_{{: index}}__Percent-error">
                <span class="help-block field-validation-valid" data-valmsg-for="Discounts[{{: index}}].Percent" data-valmsg-replace="true"></span>
            </div>
        </div>
        <div class="col-md-2 form-group">
            <div class="input-group">
                <button type="button" class="btn btn-primary removeDiscountRow">Remove</button>
            </div>
        </div>
    </div>
</script>

if (Model.Discounts == null || Model.Discounts.Count <= 0)
{
    Model.Discounts = new List<DiscountCode> { new DiscountCode() };
}
<script id="discountRow" type="text/x-jsrender">
    <div class="row">
        <input type="hidden" name="Discounts.Index" value="{{: index}}" />
        <div class="col-md-4 form-group">
            <div class="input-group">
                @Html.LabelFor(m => m.Discounts[0].Percent, new { @class = "control-label", For = "Discounts[{{: index}}].Code" })
                @Html.TextBoxFor(m => m.Discounts[0].Code, new { @class = "form-control ", Id = "Discounts_{{: index}}__Code", Name = "Discounts[{{: index}}].Code", Value="" } )
                @Html.ValidationMessageFor(m => m.Discounts[0].Code, string.Empty, new { @class = "help-block", Data_Valmsg_For = "Discounts[{{: index}}].Code" })
            </div>
        </div>
        <div class="col-md-6 form-group">
            <div class="input-group">
                @Html.LabelFor(m => m.Discounts[0].Percent, new { @class = "control-label", For = "Discounts[{{: index}}].Percent" })
                @Html.TextBoxFor(m => m.Discounts[0].Percent, new { @class = "form-control ", Id = "Discounts_{{: index}}__Percent", Name = "Discounts[{{: index}}].Percent", Value = "" })
                @Html.ValidationMessageFor(m => m.Discounts[0].Percent, string.Empty, new { @class = "help-block", Data_Valmsg_For = "Discounts[{{: index}}].Percent" })
            </div>
        </div>
        <div class="col-md-2 form-group">
            <div class="input-group">
                <button type="button" class="btn btn-primary removeDiscountRow">Remove</button>
            </div>
        </div>
    </div>
</script>