在服务器上运行的jquery和html元素 [英] jquery and html elements that run at server

问题描述

我在用户控件(标题)中包含一个元素.此div包含其内部的sub div.其中之一包括用户选项.用户选项div()显示已登录用户的用户名，以及与已登录用户相关的几个链接，例如注销，设置等."user_options" div绝对位于标题" div中.

I have a element contained in a user control (header). This div includes sub divs inside it. One of them includes user options. The user options div () displays the username of the logged in user, and couple of links related to already signed in users such as logout, settings etc.. the "user_options" div is absolutely positioned within the "header" div.

现在，在登录页面本身中，由于用户未登录，我想隐藏此div，因为她(他)尚未登录.在这种情况下，我将runat ="server"属性设置为"user_options" div和我在.aspx页的page_load事件中进行了检查，以查看用户是否已按以下方式登录；

Now, in the login page itself, I want to hide this div since the user is taken there because she/he is not logged in. In this case, I put a runat="server" attribute to the "user_options" div and I carry a check in page_load event of the .aspx page to see is the user is logged in as follows;

if check_user_loggedin() then
  user_options.attributes("style") = "display:none;"
  ' also tried this with user_options.visible = false and 
else
  user_options.attributes("style") = "display:block;" 
  ' in this one, I even tried the whole positioning css e.g. display:block; positon:absolute; left:100px; etc...
end if

现在使用此代码，当我运行项目时，在我不想显示div的地方工作正常-它成功隐藏了.但是在那些我需要显示div的页面中，它仍然显示在页面的最左上侧，并且其中的其他"div"元素的jquery click事件也不起作用.

now with this code, when I run the project, it works fine where I do not want to display the div - it gets hidden successfully. But in those pages where I need to show the div, it still gets displayed at the far top left side of the page, and the jquery click event of other "div" elements inside it also don't work.

我认为它与执行顺序或页面事件周期有关，但是您能建议任何解决方法吗?

I presume it has something to the with the execution order or the page event cycle but can you suggest any workaround for this?

=========编辑=======================
这是CSS:

========= EDIT =========================
THIS IS THE CSS:

   #user_options
    {
        position:absolute;
        top:18px;
        right:10px;
        width:200px;
        color:#ffffff;
        text-align:right;
    }

这是HTML:

<div id="user_options" **runat="server"**>
    <strong><a class="whiteLink" href="#"><%=MyNamespace.Users.getUsernameFromCookie%></a></strong> | <a class="whiteLink" href="usr_logout.aspx">logout</a> | <a class="whiteLink" href="#">settings</a> | <a class="whiteLink" href="#">help</a>
</div>

这是用户控制中的代码:

THIS IS THE CODE IN USER CONTROL:

Private _displayUserOptions As Boolean
Public Property displayUserOptions() As Boolean
    Get
        Return _displayUserOptions
    End Get
    Set(ByVal value As Boolean)
        _displayUserOptions = value
    End Set
End Property


Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If displayUserOptions Then
        user_options.Attributes("style") = "display:none;"
    Else
        user_options.Attributes("style") = "display:block;"
    End If
End Sub

这是我在HTML页面中调用的以显示用户控件

THIS IS WHAT I CALL IN THE HTML PAGE TO DISPLAY THE USER CONTROL

<uc1:x_layout_top ID="x_layout_top1" runat="server" displayUserOptions="false" />

推荐答案

在进入ASP.NET 4.0和ClientIdMode ="Static"之前，我建议使用唯一的类名来解决此问题.

Before we get to ASP.NET 4.0 and ClientIdMode="Static" I would suggest using unique class names to work around this issue.

<div id="user_options" runat="server" class="user_options">....

因为这样，您可以a)使用后面的代码访问user_options，然后使用jQuery和CSS访问 .user_options 而不是 #user_options

Because then you can a) use code behind to access user_options and then use jQuery and CSS to access .user_options instead of #user_options

这篇关于在服务器上运行的jquery和html元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！