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

Posted 2023-02-26

【中文标题】在 asp.net 中使用 jquery 选项卡的 OnClick 函数

【英文标题】：OnClick function using jquery tabs in asp.net

【发布时间】：2013-06-11 17:22:30

【问题描述】：

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

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

这里是代码：

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

我正在使用此代码强制页面在发生后打包时保持选定的选项卡，并且它工作正常。

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

            );

        );

【问题讨论】：

缺少 onclick="ChangeMode();" (??) 它是否触发了事件？

您的 div 是客户端元素，但您的功能是服务器端的。客户端代码没有服务器端代码的概念，无法直接访问。

由于您正在混合服务器端和客户端代码，这将不起作用。但是，如果不知道您在此方法中要达到的目标，就不可能纠正您。无论您对DV_Test 服务器端所做的任何更改都不会影响您在页面上看到的内容（也可能不会被持久化，除非DV_Test.ChangeMode 执行数据库更新或类似操作。请更详细地说明您的实际情况尝试做。

难道不使用ajax解决向服务器发送请求和更新页面的问题（如果你选择的话）？

我只是想在单击选项卡后将我的 DetailView 模式更改为“ReadOnly”模式。我是新手，这就是为什么我正在寻求您的专业知识，因为您可以看到我正在混合客户端和服务器端。谢谢

【参考方案1】：

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

如果您更喜欢使用 Razor 视图，请查看 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');
    
);

---

另外，我不确定你决定使用什么，但我喜欢这些关于标签的建议：尝试找到 here 的 html，它使用 ul/li 和 a 来制作标签本身。触发动作的通常是a。

【讨论】：

谢谢，我试过了，但根本没有开火。我只是试图显示这个 $("#target").click(function() alert("Handler for .click() called."););它没有工作

你有 Razor View 吗？另外，您使用的是 ASP.NET Web 窗体还是 ASP.NET MVC？我可以使用 Razor View 给你写一个答案，但我不确定你使用的是哪种技术。

您可以通过分叉尝试this fiddle来隔离问题

我的第二个选项也不起作用when isolated。我会尽快删除它。

我正在使用 asp.net 网络表单。谢谢你的帮助，如果你能在这里帮助我，我真的很感激