I have the following scenario in my project.
I have one telerik tab strip which contains three tabs like "Basic", "Contact" and "Address". Each tab contains one editor template. In the final tab (Address tab) i have
Submit button.
I want to previous tabs validate tabs when click on next tab and show the validation errors if validation fails. Finally when i click on
Submit button all models should be validated and then save the record into database.
I am able to do validations in case of the above scenario.
Anyone suggest me to resolve this issue.
Please find the below code.
Models
public class Organization
{
public Organization()
{
this.OrgBasic = new OrganizationBasic();
this.OrgAddress = new Address.Address();
this.OrgContact = new OrganizationContact();
}
public OrganizationBasic OrgBasic { get; set; }
public Address.Address OrgAddress { get; set; }
public OrganizationContact OrgContact { get; set; }
}
public class OrganizationBasic
{
public int OrganizationId { get; set; }
[DisplayName("Organization Name")]
[Required]
public string OrgName { get; set; }
[DisplayName("Organization Code")]
[Required]
public string OrgCode { get; set; }
public int OrgTypeId { get; set; }
[DisplayName("Organization Group")]
[Required]
public string OrgGroupName { get; set; }
public int ParentOrgId { get; set; }
[DisplayName("Parent Organization")]
[Required]
public string ParentOrgName { get; set; }
public int StatusId { get; set; }
[Required]
public string Status { get; set; }
[DisplayName("Web Address")]
public string WebAddress { get; set; }
public int SchoolYearId { get; set; }
[DisplayName("School Year")]
public string SchoolYear { get; set; }
[DisplayName("Organization Open Date")]
[Required]
public DateTime? OpenDate { get; set; }
[DisplayName("Organization Close Date")]
public DateTime? ClosedDate { get; set; }
}
public class OrganizationContact
{
public int EmailTypeId { get; set; }
[DisplayName("Email Type")]
public string EmailType { get; set; }
public string Email { get; set; }
public int PhoneTypeId { get; set; }
[DisplayName("Phone Type")]
public string PhoneType { get; set; }
[DisplayName("Phone No.")]
public string Phone { get; set; }
}<
public class Address
{
public string AddressTypeId { get; set; }
[DisplayName("Address Type")]
public string AddressType { get; set; }
public string Address1 { get; set; }
public string Address2 { get; set; }
public string City { get; set; }
public string StateId { get; set; }
public string State { get; set; }
[DisplayName("Zip Code")]
public string ZipCode { get; set; }
}
Main view
@model SISWebMvc.Models.Organization.Organization
@{
ViewBag.Title = "Organization Create";
}
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<p>
@Html.ValidationSummary(false, "Please fill the following fields before proceeding:")
</p>
<div class="form-horizontal">
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@(Html.Kendo().TabStrip()
.Name("orgTab")
.Items(items =>
{
items.Add().Text("Basic Information")
.Selected(true)
//.Content(@Html.Partial("~/Views/Shared/EditorTemplates/OrganizationBasic.cshtml", Model.OrgBasic).ToHtmlString());
.Content(@Html.EditorFor(model => model.OrgBasic).ToHtmlString());
items.Add().Text("Contact Information")
.Content(@Html.EditorFor(model => model.OrgContact).ToHtmlString());
items.Add().Text("Address Information")
.Content(@Html.EditorFor(model => model.OrgAddress).ToHtmlString());
})
)
</div>
}
Basic View
@model SISWebMvc.Models.Organization.OrganizationBasic
<div class="row-fluid data-fields">
<div class="span4">
@Html.LabelFor(model => model.OrgName, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.OrgName, new { htmlAttributes = new { @class = "form-control" } })
@*@Html.Kendo().TextBoxFor(model => model.OrganizationName).Name("txtOrgName")*@
@*@Html.ValidationMessageFor(model => model.OrganizationName, "", new { @class = "text-danger" })*@
</div>
</div>
<div class="span4">
@Html.LabelFor(model => model.OrgCode, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.OrgCode, new { htmlAttributes = new { @class = "form-control" } })
@*@Html.ValidationMessageFor(model => model.OrganizationCode, "", new { @class = "text-danger" })*@
</div>
</div>
<div class="span4">
@Html.LabelFor(model => model.OrgGroupName, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@*@Html.EditorFor(model => model.OrgGroupName, new { htmlAttributes = new { @class = "form-control" } })*@
@*@Html.ValidationMessageFor(model => model.OrganizationGroupName, "", new { @class = "text-danger" })*@
@(Html.Kendo().DropDownListFor(model => model.OrgTypeId)
//.Name("OrgTypeId") //The name of the dropdownlist is mandatory. It specifies the "id" attribute of the widget.
.OptionLabel("--Select--")
.SelectedIndex(0)
.DataTextField("OrganizationTypeName") //Specifies which property of the Product to be used by the dropdownlist as a text.
.DataValueField("OrganizationTypeID") //Specifies which property of the Product to be used by the dropdownlist as a value.
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetOrgGroupinfo", "Organization"); //Set the Action and Controller name
})
.ServerFiltering(true); //If true the DataSource will not filter the data on the client.
})
)
</div>
</div>
</div>
<div class="row-fluid data-fields">
<div class="span4">
@Html.LabelFor(model => model.ParentOrgName, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@(Html.Kendo().DropDownListFor(model => model.ParentOrgId)
.DataTextField("Title") //Specifies which property of the Product to be used by the dropdownlist as a text.
.DataValueField("OrganizationID") //Specifies which property of the Product to be used by the dropdownlist as a value.
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetAllparentOrganization", "Organization").Data("filerOrgGroups"); //Set the Action and Controller name
})
.ServerFiltering(true); //If true the DataSource will not filter the data on the client.
})
.Enable(false)
.AutoBind(false)
.CascadeFrom("OrgBasic_OrgTypeId")
.OptionLabel("--Select--")
)
</div>
</div>
<div class="span4">
@Html.LabelFor(model => model.Status, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@(Html.Kendo().DropDownListFor(model => model.StatusId)
.OptionLabel("--Select--")
.DataTextField("StatusCD")
.DataValueField("StatusID")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetStatus", "Organization"); //Set the Action and Controller name
})
.ServerFiltering(true); //If true the DataSource will not filter the data on the client.
})
)
</div>
</div>
<div class="span4">
@Html.LabelFor(model => model.WebAddress, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.WebAddress, new { htmlAttributes = new { @class = "form-control" } })
</div>
</div>
</div>
<div class="row-fluid data-fields">
<div class="span4">
@Html.LabelFor(model => model.SchoolYear, htmlAttributes: new { @class = "control-label col-md-2" })
@(Html.Kendo().DropDownListFor(model => model.SchoolYearId)
.OptionLabel("--Select")
.DataTextField("SchoolYear")
.DataValueField("SchoolYearId")
.DataSource(source =>
{
source.Read("SchoolYears", "Master").ServerFiltering(true);
})
)
</div>
<div class="span4">
@Html.LabelFor(model => model.OpenDate, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@(Html.Kendo().DatePickerFor(model => model.OpenDate)
//.Format("MMMM yyyy")
.Min(new DateTime(1900, 1, 1)) //Set min date of the datepicker
.Max(new DateTime(2099, 12, 31)) //Set min date of the datepicker
.Value(DateTime.Today) //Set the value of the datepicker
)
</div>
</div>
<div class="span4">
@Html.LabelFor(model => model.ClosedDate, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@(Html.Kendo().DatePickerFor(model => model.ClosedDate)
.Min(new DateTime(1900, 1, 1)) //Set min date of the datepicker
.Max(new DateTime(2099, 12, 31)) //Set min date of the datepicker
.Value(DateTime.Today) //Set the value of the datepicker
)
</div>
</div>
</div>
<div class="row-fluid data-fields">
<div class="float-right">
@*<button id="basicNext" value="basicNext">Next</button>
<button id="basicCancel" value="basicCancel">Cancel</button>*@
<input type="button" id="basicNext" name="basicNext" value="Next " />
</div>
</div>
Contact View
@model SISWebMvc.Models.Organization.OrganizationContact
<div class="row-fluid data-fields">
<fieldset>
<legend>Email Information</legend>
<div class="span4">
@Html.LabelFor(model => model.EmailType, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@(Html.Kendo().DropDownListFor(model => model.EmailTypeId)
.OptionLabel("--Select--")
.SelectedIndex(0)
.DataTextField("EmailType") //Specifies which property of the Product to be used by the dropdownlist as a text.
.DataValueField("EmailTypeId") //Specifies which property of the Product to be used by the dropdownlist as a value.
.DataSource(source =>
{
source.Read(read =>
{
read.Action("EmailTypes", "Master"); //Set the Action and Controller name
})
.ServerFiltering(true); //If true the DataSource will not filter the data on the client.
}))
</div>
</div>
<div class="span4">
@Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
</div>
</div>
</fieldset>
</div>
<div class="row-fluid data-fields">
<fieldset>
<legend>Phone Information</legend>
<div class="span4">
@Html.LabelFor(model => model.PhoneType, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@(Html.Kendo().DropDownListFor(model => model.PhoneTypeId)
.OptionLabel("--Select--")
.SelectedIndex(0)
.DataTextField("PhoneType") //Specifies which property of the Product to be used by the dropdownlist as a text.
.DataValueField("PhoneTypeId") //Specifies which property of the Product to be used by the dropdownlist as a value.
.DataSource(source =>
{
source.Read(read =>
{
read.Action("PhoneTypes", "Master"); //Set the Action and Controller name
})
.ServerFiltering(true); //If true the DataSource will not filter the data on the client.
}))
</div>
</div>
<div class="span4">
@Html.LabelFor(model => model.Phone, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Phone, new { htmlAttributes = new { @class = "form-control" } })
</div>
</div>
</fieldset>
</div>
<div class="row-fluid data-fields">
<div class="float-right">
@*<button id="basicNext" value="basicNext">Next</button>
<button id="basicCancel" value="basicCancel">Cancel</button>*@
<input type="button" id="contactBack" name="contactBack" value="Back" />
<input type="button" id="contactNext" name="contactNext" value="Next" />
</div>
</div>
Address View
@model SISWebMvc.Models.Address.Address
<div class="row-fluid data-fields">
<fieldset>
<legend>Address Information</legend>
<div class="row-fluid data-fields">
<div class="span4">
@Html.LabelFor(model => model.AddressType, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@(Html.Kendo().DropDownListFor(model => model.AddressTypeId)
.OptionLabel("--Select--")
.SelectedIndex(0)
.DataTextField("AddressType") //Specifies which property of the Product to be used by the dropdownlist as a text.
.DataValueField("AddressTypeId") //Specifies which property of the Product to be used by the dropdownlist as a value.
.DataSource(source =>
{
source.Read(read =>
{
read.Action("AddressTypes", "Master"); //Set the Action and Controller name
})
.ServerFiltering(true); //If true the DataSource will not filter the data on the client.
}))
</div>
</div>
<div class="span4">
@Html.LabelFor(model => model.Address1, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Address1, new { htmlAttributes = new { @class = "form-control" } })
</div>
</div>
<div class="span4">
@Html.LabelFor(model => model.Address2, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Address2, new { htmlAttributes = new { @class = "form-control" } })
</div>
</div>
</div>
<div class="row-fluid data-fields">
<div class="span4">
@Html.LabelFor(model => model.City, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.City, new { htmlAttributes = new { @class = "form-control" } })
</div>
</div>
<div class="span4">
@Html.LabelFor(model => model.State, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@(Html.Kendo().DropDownListFor(model => model.StateId)
.OptionLabel("--Select--")
.SelectedIndex(0)
.DataTextField("State") //Specifies which property of the Product to be used by the dropdownlist as a text.
.DataValueField("StateId") //Specifies which property of the Product to be used by the dropdownlist as a value.
.DataSource(source =>
{
source.Read(read =>
{
read.Action("States", "Master"); //Set the Action and Controller name
})
.ServerFiltering(true); //If true the DataSource will not filter the data on the client.
}))
</div>
</div>
<div class="span4">
@Html.LabelFor(model => model.ZipCode, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.ZipCode, new { htmlAttributes = new { @class = "form-control" } })
</div>
</div>
</div>
<div class="row-fluid data-fields">
<div class="float-right">
<input type="button" id="addressBack" name="addressBack" value="Back" />
<input type="submit" id="submit" name="submit" value="Submit" />
<input type="button" id="cancel" name="cancel" value="Cancel" />
</div>
</div>
</fieldset>
</div>
Submit an article or tip