动态文本框数(输入)MVC

时间:2013-12-13 20:25:57

标签: c# asp.net-mvc razor

在我的表格(razorview)中,我希望用户输入他们带来的参加人数。

输入数字后,我希望显示尽可能多的文本框。

我怎么能做到这一点?起初我想我可以生成所有文本框,但最初用css隐藏它们。在数字输入我可以用javascript显示计数。但是,如果我确定20个输入,并且他们想要带来更多输入,这可能是一个问题。

怀疑任何人都需要代码来告诉我应该如何开始,但不要把它扔进去。

以下是我目前的观点:

@model SolutionName.Website.Presentation.Web.Models.KonferanseModel

<link href="~/Content/ContactForm.css" rel="stylesheet" />

<h3>Påmeldingsskjema</h3>
@using (Html.BeginForm("Konferansepamelding", "Page", FormMethod.Post))
{
    @Html.HiddenFor(m => m.KonferanseNavn)
    <div class="form-horizontal">
        <div class="control-group">
            <div class="controls">
                @Html.TextBoxFor(m => m.KontaktNavn, new { placeholder = "Kontaktperson" })<br />
            </div>
        </div>
        <div class="control-group">
            <div class="controls">
                @Html.TextBoxFor(m => m.FirmaNavn, new { placeholder = "Firmanavn" })<br />

            </div>
        </div>
        <div class="control-group">
            <div class="controls">
                @Html.TextBoxFor(m => m.FirmaAdresse, new { placeholder = "Firmaadresse" })<br />
            </div>
        </div>
        <div class="control-group">
            <div class="controls">
                @Html.TextBoxFor(m => m.FirmaTelefon, new { placeholder = "Firmatelefon" })<br />

            </div>
        </div>
        <div class="control-group">
            <div class="controls">
                @Html.TextBoxFor(m => m.KontaktEpost, new { placeholder = "Epostadresse" })<br />
            </div>
        </div>
        <div class="control-group">
            <div class="controls">
                @Html.TextBoxFor(m => m.NumberOfPeople, new { placeholder = "Antall deltakere" })<br />
            </div>
        </div>
        <div class="control-group">
            <div class="controls">
                @Html.TextBoxFor(m => m.FakturaInformasjon, new { placeholder = "Fakturaadresse" })<br />
            </div>
        </div>
        <div class="control-group">
            <div class="controls">
                @Html.TextAreaFor(m => m.Names, new { placeholder = "Navn på deltakere" })<br />
            </div>
        </div>
    </div>
    <input class="btn" type="submit" value="Send" /><br />
    <br />
    @Html.ValidationSummary(false)
}

模型:

public class KonferanseModel
    {
        [Required(ErrorMessage = "Navn er påkrevd")]
        [Display(Name = "Fullt navn")]
        public string KontaktNavn { get; set; }

        [Required(ErrorMessage = "Gateadresse er påkrevd")]
        [Display(Name = "Gateadresse for bedriften")]
        public string FirmaAdresse { get; set; }

        [Phone(ErrorMessage = "Du må fylle inn et gyldig telefonnummer")]
        [Required(ErrorMessage = "Telefonnummer for bedriften er påkrevd")]
        [Display(Name = "Telefonnummer for bedriften")]
        public string FirmaTelefon { get; set; }

        [EmailAddress(ErrorMessage = "Du må fylle inn en gyldig epostadresse")]
        [Required(ErrorMessage = "Epost for bedriften er påkrevd")]
        [Display(Name = "Epost for bedriften")]
        public string KontaktEpost { get; set; }  

        [Required(ErrorMessage = "Fakturainformasjon er påkrevd.")]
        [Display(Name = "Fakturainformasjon")]
        public string FakturaInformasjon { get; set; }

        [Required(ErrorMessage = "Fyll inn navn på deltakere")]
        [Display(Name = "Navn på deltakere")]
        public string Names { get; set; }

        [Display(Name = "Firmanavn")]
        public string FirmaNavn { get; set; }

        [Required(ErrorMessage = "Fyll inn antall deltakere")]
        [Display(Name = "Antall deltakere")]
        [RegularExpression(@"[0-9]*$", ErrorMessage = "Antall deltakere må være et tall")]
        public string NumberOfPeople { get; set; }

        public string KonferanseNavn { get; set; }

    }

1 个答案:

答案 0 :(得分:1)

这是一篇关于接受可变数量元素的文章。 http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/

它的主旨是,您的控制器将接受您的模型集合而不是单个实例,然后提供一种为用户生成更多控件的方法。