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

本文关键字：jQuery 模板 MVC ASP | 更新日期: 2023-09-27 18:14:58

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

对于添加折扣输入，我使用以下代码片段

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的输出并将其插入模板中。如果我改变模型中的验证，我每次都会改变模板。如何自动生成此模板并保留客户端验证的所有数据属性?

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

您可以像创建输入代码一样生成模板代码，但是Model。折扣必须至少包含一个元素。参见下面的代码。我添加折扣的折扣代码，如果它是空的，并改变一些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>
相关文章：