在asp.net上调用任何javascript函数按钮单击

时间:2016-07-10 15:02:08

标签: javascript c# css asp.net



function createBadge(k) {
  var v = document.createElement("span");
  var t = document.createTextNode(k);
  v.appendChild(t);
  v.className = "badge";

  return v;
}

function addBadge(el, k) {
  if (!el.querySelector(".badge")) {
    el.appendChild(createBadge(k));
  } else {
    el.removeChild(el.getElementsByClassName("badge")[0]);
  }
}

.badge {
  padding: 3px;
  text-shadow: 2px 2px 2px rgba(45, 84, 89, 0.5);
  color: magenta;
  font-size: 16px;
  font-family: Arial;
  z-index: 1;
  position: relative;
  top: 30px;
  left: 30px;
}
.abc {
  width: 60px;
  height: 60px;
  background-color: blueviolet;
}

<div class="abc">
  <span class="badge">81</span>
</div>
</br>
<div class="abc" onclick="addBadge(this, 15)">

</div>
</br>
<div class="abc" onclick="addBadge(this, 23)">

</div>
&#13;
&#13;
&#13;

my codes are

1. On button click

 protected void Button1_Click(object sender, EventArgs e)
    {
        Page.ClientScript.RegisterStartupScript(GetType(), "hello", "addBadge(notification, 23);", true);
    }
2. My html file
  this is my navigationbar where on one tab i want notification

<ul class="mainmenu">
            <li class="mainmenulist">
                <div class="mainmenulistanchor menuicon" id="menuicon" onclick="openNav()">
                    <div class="bar1"></div>
                    <div class="bar2"></div>
                    <div class="bar3"></div>
                </div>
            </li>
            <li class="mainmenulist"><a class="mainmenulistanchor icon" href="#"><b class="fa fa-home"></b></a></li>
            <li class="mainmenulist"><a class="mainmenulistanchor icon notification" href="#"><b class="fa fa-globe"></b></a></li>
            <li class="mainmenulist"><a class="mainmenulistanchor" href="#">My Profile</a></li>

            <li class="mainmenulist"><a class="mainmenulistanchor" href="#">My Friends</a></li>
            <asp:TextBox ID="txt_search" runat="server" CssClass="searchtext" Font-Italic="True"></asp:TextBox>
        </ul>

3.my javascript part
 this is used to create my notification

function createBadge(k) {
    var v = document.createElement("span");
    var t = document.createTextNode(k);
    v.appendChild(t);
    v.className = "badge";

    return v;
}

这用于在特定地点实施通知

function addBadge(p, k) {
    el = document.getElementsByClassName(p)[0];
    if (!el.querySelector(".badge")) {
        el.appendChild(createBadge(k));
    }
    else {
        el.removeChild(el.getElementsByClassName("badge")[0]);
    }
}

4. my css part

.badge{

    padding:3px;
    text-shadow:2px 2px 2px rgba(45,84,89,0.5);
    color:magenta;
    font-size:16px;
    font-family:Arial;
    z-index:1;
    position:relative;
    top:30px;
    left:30px;

}

//我正在尝试类似通知,就像在facebook上一样,点击按钮//在c#中但没有出现任何内容。我希望服务器响应通知。但是//当单独尝试的东西正在下降时工作。请帮助。< / p>

我已经提供了我尝试服务器端通知的基础。

0 个答案:

没有答案