视图中的多个表单和部分视图中的单个提交

Question

我有这样的网页，红色部分是一个局部视图，其中包括蓝色部分中选项卡式表单中表单的操作。其实每个标签也是一个视图，CustomerDef视图通过kendo ajax tabstrip tool这样调用它们；

 @(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"));
              })
)

对于保存操作，我在根脚本文件中有一个通用的 javascript 方法 SaveRecord。在局部视图中，对于 onclick 事件，我有一个方法工具栏SaveAction。在每个选项卡视图上，我通过放置通用的 SaveRecord 方法来调用单击事件。这是它的样子；

部分按钮视图

<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) {

                ..

            }
        });
    }
}

客户信息视图

<script>
        function toolbarSaveAction() {
            SaveRecord('CustomerInfo', 'Customer', ['customerId']);
        }
</script>

客户地址视图

<script>
        function toolbarSaveAction() {
            SaveRecord('CustomerAddress', 'Customer', ['customerId']);
        }
</script>

这是我的问题，对于每个选项卡视图，我都有一个用于保存单击事件的工具栏SaveAction() 方法。当 CustomrDef 页面的第一个请求仅加载第一个选项卡时，保存操作可以正常工作，但是如果我单击其他选项卡，页面上将加载多个视图，这意味着将有多个工具栏SaveAction()。那么，当点击保存操作时，我该如何选择正确的方法呢？

Answer 1

您好，在 dom 中维护一个隐藏变量，然后在 kendo 选项卡上选择将当前选项卡文本分配给该元素

<input type="hidden" name="hdnSelectedTab" id="hdnSelectedTab"/>

然后在javascript中

  $(document).ready(function() {
                function onSelect(e) {
                   $('#hdnSelectedTab').val($(e.item).find("> .k-link").text());
                }
         });

现在只有一个动作作为工具栏SaveAction

<script>
    function toolbarSaveAction(selectedTab) {
        SaveRecord('CustomerInfo', 'Customer', ['customerId'],selectedTab);
    }
</script>

并从按钮传递选项卡值

<input title="Save" type="button" value="Save" onclick="toolbarSaveAction($('#hdnSelectedTab').val());"  class="toolbarButton toolbarBtnMarginLeft" />

然后终于在

function SaveRecord(action, controller, param, customData,selectedTab) {
   switch(selectedTab) {
     case "Customer-Info":
                  //    Implementation    
                   break;
     case "Identity":
                  //Implementation    
                   break;
     default:
            //default Implementation    
      }

}