javascript - View 中存在多个表单，部分 View 中存在单个提交

Question

我有这样的网页，红色部分是部分 View ，包括蓝色部分中选项卡式表单中表单的操作。事实上，每个选项卡也是一个 View ，CustomerDef View 通过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。在部分 View 上，对于 onclick 事件，我有一个方法toolbarSaveAction。在每个选项卡 View 上，我通过放置通用 SaveRecord 方法来调用单击事件。这是它的样子；

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

                ..

            }
        });
    }
}

客户信息 View

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

客户地址 View

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

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

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

现在只有一个操作作为toolbarSaveAction

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

}