javascript - 在 asp.net 中使用 jquery 选项卡的 OnClick 函数

Question

我正在使用 jquery 选项卡并尝试使用 onclick 函数，但它似乎没有触发。当用户单击选项卡时，我想将详细 View 模式更改为只读模式。这是我的 aspx 代码:

<div id="tabs-2" class="column" onclick="ChangeMode">

这里的代码如下:

 protected void ChangeMode()
        {
             if (DV_Test.CurrentMode == DetailsViewMode.Insert)
            {
                DV_Test.ChangeMode(DetailsViewMode.ReadOnly);
                LoadDet();
            }
        }

我使用此代码强制页面在发生 post pack 时保留所选选项卡并且工作正常。

<script type="text/javascript">
        var selected_tab = 1;
        $(function () {
            var tabs = $("#tabs").tabs({
                select: function (e, i) {
                    selected_tab = i.index;

                }
            });
            selected_tab = $("[id$=selected_tab]").val() != "" ? parseInt($("[id$=selected_tab]").val()) : 0;
            tabs.tabs('select', selected_tab);
            $("form").submit(function () {
                $("[id$=selected_tab]").val(selected_tab);

            });

        });

Answer 1

由于您的标签和语法，我假设您正在使用 ASP.NET C#。我可以建议这些选项:使用 Razor view ，或使用您已经使用的 JavaScript/jQuery。

如果您更喜欢使用 Razor View ，请查看 this question 中的引用资料并使用@符号调用服务器函数。在本例中，@ChangeMode 就是您要查找的内容。

既然你已经在使用 jQuery，我建议你使用 jQuery .click() 编写一个 JavaScript 函数。 。由于 JavaScript 和 jQuery 都能够调用服务器，因此您将能够访问服务器端函数 ChangeMode。

$('#tabs-2').click(function(){
    //Make call to server here.  You can use [Ajax][4], 
    //or see the link below concerning ASP.NET C#
});

link ，请参阅此 fiddle

<小时/>

Ajax 调用:

我发现 jQuery .ajax() 调用非常有用，这就是我的 .ajax() 调用通常的样子:

//get information from server and inject in my div with id="mydiv"
$.ajax({
    url: '/ControllerName/MethodName',
    type: 'POST',
    data: ko.toJSON({myvariable}),
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function (data) {
       $('#mydiv').html('visiblity', 'visible');
    },
    error: function (error) {
       alert('Cannot retrieve data');
    }
});

<小时/>

此外，我不确定您决定使用什么，但我喜欢这些选项卡建议:尝试找到的 html here ，它使用 ul/li 和 a 来制作选项卡本身。触发操作的通常是 a。