Reputation: 1231
In my form(razorview) i would like the user to input a number of how many attending people they would bring.
After typing the number, i would like to show as many textboxes as the number would be.
How can i achive this? At first i figured i could generate all the textboxes, but hide them with css at first. At the number input i could show the count with javascript. However, this might be a problem if i settle on 20 inputs, and they want to bring more.
Doubt anyone need code to tell me how i should start, but ill throw it in here.
Here is my current view:
@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)
}
model:
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; }
}
Upvotes: 2
Views: 2150
Reputation: 1857
Here's an article about accepting a variable number of elements. http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/
The gist of it is, your controller would accept a collection of your model instead of a single instance, then provide a way of generating more controls to the user.
Upvotes: 1