Search code examples
c#asp.net-mvctelerik-mvcdropdownlistfortabstrip

How to differentiate between entered values in selected tab in Kendo / Telerik TabStrip for MVC


I have a partial view with a form inside that I have split using a Kendo Tabstrip into a dropdown of type Address (existing addresses in the DB) and a freetext address entry field.

The dropdown is on the first tab and the text on the second.

When I submit the form I am seeing the selected dropdown being sent to the controller when I am on the text entry tab. How can I make sure to send the data from the current table on the form submit?

Here is the view


@{
   Layout = null;
}

@using (Html.BeginForm("CheckDistance", "Home", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
   @Html.AntiForgeryToken()
   <hr />
   @Html.ValidationSummary("", new { @class = "text-danger" })



   @(Html.Kendo().TabStrip()
     .Name("tabstrip")
     .Items(tabstrip =>
     {
       tabstrip.Add().Text("Tab 0")
           .Selected(true)
           .Content(tab => Html.Kendo().DropDownListFor(m => m.DeliveryAddress)
           .DataValueField("DeliveryAddress")
           .DataTextField("Name")
           .BindTo((System.Collections.IEnumerable)ViewData["PickupPoints"])
           .AutoWidth(true)
       );
    
       tabstrip.Add().Text("Tab 1")
           .Content(@<text>
            <div class="form-group">
           <div class="col-md-12">
               @Html.Kendo().TextBoxFor(m => m.DeliveryAddress).Placeholder("Adresse").Name("DeliveryAddressText")
           </div>
       </div>
           </text>);
     })
)




   <div class="form-group">
       <div class="col-md-offset-2 col-md-10">
           <input type="submit" class="btn btn-default" value="Continue" />
       </div>
   </div>
}

Solution

  • The way I fixed this was to seperate the values out in the viewmodel to have different fields for each and then select the one that is not null in the controller.