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

Question

我想使用 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; }
}

这是我用于动态创建输入的模型。

public class DiscountCode
    {
        [Required]
        [DisplayName("Code name")]
        [StringLength(10, ErrorMessage = "Max name length is 10 symbols.")]
        public string Code { get; set; }

        [Required]
        [DisplayName("Code discount")]
        [Integer(ErrorMessage = "The field Percent should be a positive non-decimal number")]
        [Range(1,60, ErrorMessage = "The field Percent should be between 1 and 60.")]
        public int Percent { get; set; }
    }

我有这个部分视图来呈现 DiscountCode 输入

@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>
    }
}

为了添加折扣输入，我使用此代码 sn-p

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>

如您所见，我只是复制 razor 的输出并将其插入到模板中。因此，如果我更改模型中的验证，我每次都会更改模板。如何在保留所有数据属性的情况下自动生成此模板以进行客户端验证？

Answer 1

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

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>