https://i.sstatic.net/aAbD9.jpg
My webpage consists of two main sections: the red section which is a partial view containing actions for forms, and the blue section which contains tabbed forms. Each tab in the blue section is also a view, called using the kendo ajax tabstrip tool. The code looks like this:
@(Html.Kendo().TabStrip()
.Name("tabstrip")
.Animation(animation =>
{
animation.Enable(false);
})
.SelectedIndex(0)
.Items(tabstrip =>
{
tabstrip.Add().Text("Customer Info")
.LoadContentFrom(Url.Content("CustomerInfo"));
tabstrip.Add().Text("Customer Address")
.LoadContentFrom(Url.Content("CustomerAddress"));
tabstrip.Add().Text("Customer Payment")
.LoadContentFrom(Url.Content("CustomerPayment"));
tabstrip.Add().Text("Identity")
.LoadContentFrom(Url.Content("Identity"));
})
)
For saving actions, I have a generic JavaScript method named SaveRecord in the root script file. In each tab's view, I call the click event by using the generic SaveRecord method as follows:
PartialButtonView
<input title="Save" type="button" value="Save" onclick="toolbarSaveAction();" class="toolbarButton toolbarBtnMarginLeft" />
Root.js
function SaveRecord(action, controller, param, customData) {
var form = $("[aria-expanded=true]").find("form");
var validator = form.kendoValidator().data("kendoValidator");
if (validator.validate()) {
var data = form.serialize();
$.ajax({
url: '/' + controller + '/' + action,
dataType: 'json',
type: 'POST',
data: data,
success: function (response) {
if (response !== null && !response.success) {
..
}
else {
..
}
},
error: function (xhr, ajaxOptions, thrownError) {
..
}
});
}
}
CustomerInfo View
<script>
function toolbarSaveAction() {
SaveRecord('CustomerInfo', 'Customer', ['customerId']);
}
</script>
CustomerAddress View
<script>
function toolbarSaveAction() {
SaveRecord('CustomerAddress', 'Customer', ['customerId']);
}
</script>
The issue I'm facing is that for each tab view, there is a toolbarSaveAction() method for the save click event. When switching between tabs, multiple views are loaded on the page, resulting in multiple toolbarSaveAction() methods. How can I ensure that the correct method is picked when clicking the save action?