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

Question

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>
}

Answer 1

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.

Answer 2

The two widgets (even though separated via a tab strip) remain in the same form element. The form sends all inputs that have name attribute - in this case, both the values of the DropDownList and the TextBox.

One workaround would be to make a distinct form element for each of the tabs of the tab strips.

The other option would be to handle the submit event of the form and restructure the parameters that will be sent.