I use a kendo Splitter with 2 vertical panes (top-pane and bottom-pane).
Inside the top-pane .Content( ), I have a Kendo TabStrip with 3 tabs. Inside the bottom-pane .Content( ), I have a DropDownList / textbox controls and one input button "Save".
When the Main View page loads, my Main Controller Action retrieves the data and return the MainViewModel for my DropDownList / textbox controls and determines which Tab to select (ie show) to the user.
Here is my Kendo TabStrip on my main view with the MainViewModel
01.
@(Html.Kendo().TabStrip()
02.
.Name("WorksheetTabStrip")
03.
.Items(tabstrip =>
04.
{
05.
tabstrip.Add().Text("Condition 1")
06.
.Selected( Model.ConditionSelection == 1 ? true : false)
07.
.LoadContentFrom("ConditionAction", "Worksheet", new { invoiceID = Model.InvoiceID, tabNum = 1 })
08.
.ContentHtmlAttributes(new { style = "height:580px;" });
09.
10.
tabstrip.Add().Text("Condition 2")
11.
.Selected(Model.ConditionSelection == 2 ? true : false)
12.
.LoadContentFrom("ConditionAction", "Worksheet", new { invoiceID = Model.InvoiceID, tabNum = 2 })
13.
.ContentHtmlAttributes(new { style = "height:580px;" });
14.
15.
tabstrip.Add().Text("Condition 3")
16.
.Selected(Model.ConditionSelection == 3 ? true : false)
17.
.LoadContentFrom("ConditionAction", "Worksheet", new { invoiceID = Model.InvoiceID, tabNum = 3 })
18.
.ContentHtmlAttributes(new { style = "height:580px;" });
19.
20.
})
21.
Each of the tabStrip .LoadContentFrom( ) calls the action "ConditionAction" to load data in the tab's corresponding PartialView.
public ActionResult ConditionAction(int invoiceID, int tabNum) {
// ... get data for the corresponding Tab from database
ConditionViewModel model = getDBdata();
if (tabNum == 1)
return PartialView("_Condition1", model);
else if (tabNum == 2)
return PartialView("_Condition2", model);
else if (tabNum == 3)
return PartialView("_Condition3", model);
else
return View("Error");
}
With the codes that I have so far, displaying the right data for the appropriate tab contents works.
My problem is when user clicks on the "Save" button (at the bottom-pane), how do I read from the form data of the Tab that I want.
For example, user clicks "Tab 2" and types some inputs in Textboxes, then clicks the Save button. I just want to read the form in Tab2 and save its data. (form in Tab1 and Tab 3 are ignored) and additionally read the main form controls (DropdownList etc) and save as well all at the same time.
I was planning to do an Ajax call onClick of the Save button. But don't know how to read and pass the PartialViewModel to my Controller.
<
input
type
=
"button"
id
=
"btnSave"
name
=
"btnSave"
value
=
"Save"
class
=
"btn btn-danger btn-default"
style
=
"width:100px;"
/>
<
script
type
=
"text/javascript"
>
$("#btnSave").click(function () {
var formData = $("#formWorksheet").serialize();
$.ajax({
url: '@Url.Action("SaveWorksheet", "Worksheet")',
type: "POST",
cache: false,
contentType: "application/x-www-form-urlencoded",
data: formData,
datatype: "json",
success: function (response) {
if (response.ok) {
alert(response.message);
}
else {
window.alert("Error: " + response.message);
}
},
error: function (request, status, error) {
alert("Unexpected Error! Please contact the Administrator.");
alert(error);
}
});
})
</
script
>
Any suggestion?