i want to develop dropdown inside a check box . this url shows me how to do it.
http://dropdown-check-list.googlecode.com/svn/trunk/demo.html
but the code isnt given how to implement it in project.
i need to bind my datatable to this dropdow.
and once user selects a value and clicks on the button in .cs file i should be able to get all these values
if any one knows how to slove this issue let me know
thank you
This is a jquery plugin that does the transformation client side. You haven't tagged your question to indicate what server side technology you are using, but from your description I infer it is ASP.NET.
Here's a sample page I've setup illustrating how to achieve the functionality you are looking for:
<%# Page Language="C#" %>
<%# Import Namespace="System.Linq" %>
<script type="text/C#" runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
listBox.DataSource = new[] { "Aries", "Taurus", "Gemini" };
listBox.DataBind();
}
}
protected void BtnClick(object sender, EventArgs e)
{
var selectedItems = (from item in listBox.Items.Cast<ListItem>()
where item.Selected
select item.Text).ToArray();
result.Text = "You selected: ";
result.Text += string.Join(",", selectedItems);
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/ui.core.js"></script>
<script type="text/javascript" src="scripts/ui.dropdownchecklist.js"></script>
<script type="text/javascript">
$(function() {
$('.listBox').dropdownchecklist();
});
</script>
<link rel="stylesheet" href="css/ui.dropdownchecklist.css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ListBox ID="listBox" runat="server" SelectionMode="Multiple" CssClass="listBox" />
<asp:LinkButton ID="btn" runat="server" Text="Click me" OnClick="BtnClick" />
<asp:Label ID="result" runat="server" />
</div>
</form>
</body>
</html>
Related
I tried to pass a variable from the client side to server side using HiddenField like in this example.
What I have tried so far:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type ="text/javascript">
<script type ="text/javascript">
function passValue() {
document.getElementById('<%=HiddenField1.ClientID%>').value = "some stuff";
}
window.onload = passValue;
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:HiddenField ID="HiddenField1" runat="server"/>
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick ="passValue()"/>
</div>
</form>
</body>
</html>
On the server side I have the following code:
protected void Page_Load(object sender, EventArgs e)
{
string a, b;
if (IsPostBack)
{
Response.Write("The input value is: " + HiddenField1.Value.ToString());
a = HiddenField1.Value.ToString();
}
else
{
Response.Write("The input value is: " + HiddenField1.Value.ToString());
b = HiddenField1.Value.ToString();
}
}
When my page opens I expect to see on it the message: "The input value is: some stuff". The message appears only if I press the button because only in this case the IsPostBack becomes true.
What should I do so get the message without pressing the button? Thanks in advance!
Ok so I am trying to make a list of links in a page that is generated using a foreach and loop as long as there are objects in the list. Here is the code that I use to generate the links:
protected void Page_Init(object sender, EventArgs e)
{
if (!IsPostBack)
{
if (Session["mamlist"] != null)
{
mamlist = (List<mammifere>)Session["mamlist"];
int i = 0;
foreach (mammifere l in mamlist)
{
mamol.InnerHtml += ("<li><a onClick='select("+i+");' >" + l.Nom + "</a></li>");
i++;
}
}
}
}
For some reason, the links are unclickable. I get this:
How can I make links that do not lead to another page but instead launch a method in the C# code of the page?
You can create LinkButton controls that call subroutines/methods in your ASPX code:
Sample code:
<%# Page Language="C#" AutoEventWireup="True" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>LinkButton Example</title>
<script language="C#" runat="server">
void LinkButton_Click(Object sender, EventArgs e)
{
Label1.Text="You clicked the link button";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<h3>LinkButton Example</h3>
<asp:LinkButton id="LinkButton1"
Text="Click Me"
Font-Names="Verdana"
Font-Size="14pt"
OnClick="LinkButton_Click"
runat="server"/>
<br />
<asp:Label id="Label1" runat="server" />
</form>
</body>
</html>
In your specific case, add a ContentPlaceHolder in your master page:
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server" />
In the page where you want the links to appear you add a Content control like so:
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</asp:Content>
Then foreach link you want, do this:
foreach (mammifere l in mamlist)
{
LinkButton linkButton = new LinkButton();
linkButton.Text = l.Nom;
linkButton.OnClick= "LinkButton_Click";
linkButton.ID = l.Nom;
Content1.Controls.Add(linkButton);
}
I've tried to wrap up my problem with a complete example below - the original problem is part of a jQuery plug-in that I'm writing to extend the behaviour of an ASP.NET ajax application I already have.
The aspx page below has one drop down list which is marked for auto post back. I've also bound a change event using jquery (which ultimately I will swap for a .live() event to maintain the binding after the update panel refresh.) The problem is, when the jQuery event is bound I see two ajax begin requests and page_loads fire but only one ddlTest_OnselectedIndexChanged event. One of the page loads is malformed too - the content-length states it's about 300 bytes long whilst the totalBytes is 0 and form data empty. This does not happen if I bind to the click event of a button.
Can someone explain why the erroneous page_load event is firing please??
<%# Page Language="C#" AutoEventWireup="true" %>
<%# Import Namespace="System.Diagnostics" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<script runat="server">
private void Page_Load(object sender, EventArgs e)
{
Debug.WriteLine(Request.Headers["Content-Length"]);
Debug.WriteLine(Request.TotalBytes);
Debug.WriteLine(Request.Form.ToString());
Debugger.Break();
}
private void ddlTest_OnSelectedIndexChanged(object sender, EventArgs e)
{
Debugger.Break();
}
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequestHandler);
$("#<%=ddlTest.ClientID%>").change(function() { alert('jQuery binding fired'); });
});
function beginRequestHandler() {
alert("Started ajax call");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="SciptManager" runat="server" />
<asp:UpdatePanel ID="updTest" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:DropDownList ID="ddlTest" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlTest_OnSelectedIndexChanged" >
<asp:ListItem>First</asp:ListItem>
<asp:ListItem>Second</asp:ListItem>
</asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
Update : I've narrowed the problem down even further. Firefox and Chrome both work as I would expect whilst IE is having a problem. I've also simplified the erroneous code to the example below. It's hard to believe it's this simple but the jQuery .change() method on the drop down list triggers the onchange event on the select element twice! I'll look for other people who've had this problem and report back my findings!
<%# Page Language="C#" AutoEventWireup="true"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('#ddlTest').change(function() { alert('jQuery event fired'); });
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:DropDownList id="ddlTest" runat="server" onchange="alert('element event');">
<asp:ListItem Text="First" />
<asp:ListItem Text="Second" />
</asp:DropDownList>
</form>
</body>
</html>
The call of $("#<%=ddlTest.ClientID%>").change(... is probably trigger your drop down list and because of your autopostBack, you get an second refresh of your page.
It looks like I've uncovered a bug in the latest version of jQuery :(. If I change the test back to version 1.3.2 it works fine! I've also found a reference to a bug raised with jQuery.
Take out the autopostback=true = it is firing one postback and the change event is another.
It is hitting the Page_Load event, but not the LinkButton's click :
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode=Conditional>
<ContentTemplate>
<asp:LinkButton ID="btnRenewAll" runat="server" onclick="LinkButton1_Click" OnClientClick="javascript:return ClientMe()">LinkButton</asp:LinkButton>
<br />
<asp:Label ID="lblMe" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
<script>
function ClientMe() {
var btnRenewall = document.getElementById('<%= btnRenewAll.ClientID %>');
btnRenewall.disabled = true;
alert("Hello");
return true;
}
</script>
</html>
CodeBehind :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void LinkButton1_Click(object sender, EventArgs e)
{
lblMe.Text = "Checked";
UpdatePanel1.Update();
}
}
If you replace your JS with:
function ClientMe() {
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(startRequest);
return true;
}
function startRequest(sender, e) {
var btnRenewall = document.getElementById('<%= btnRenewAll.ClientID %>');
btnRenewall.disabled = true;
alert("Hello");
}
it should work. citing:
link text
Change this line:
btnRenewall.disabled = 'disabled';
Here is a list of the minimized attributes in HTML and how they should be written in XHTML :
HTML XHTML
compact compact="compact"
checked checked="checked"
declare declare="declare"
readonly readonly="readonly"
disabled disabled="disabled"
selected selected="selected"
defer defer="defer"
ismap ismap="ismap"
nohref nohref="nohref"
noshade noshade="noshade"
nowrap nowrap="nowrap"
multiple multiple="multiple"
noresize noresize="noresize"
It seems to be impossible to change GridView .Caption after it has been set once.
Once I set caption and then change it within postbacks, in the code all seem to be ok, on page PreRender, GridView PreRender and wherever
I have no idea what to do - on page (and GridView also) PreRender event while debugging the .Caption is proper, but it renders with old caption anyway
Page seems to be render with set-once caption although I changed it.
I even tried to place it to updatePanel and update it, but it didn't help.
Can anybody suggest the reason?
thanks in advance.
Seems to be working here in this example, can you post your code?
<%# Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
System.Collections.Generic.List<int> Values = new System.Collections.Generic.List<int> { 1, 2, 3, 4, 5, 6, 7 };
grdTest.DataSource = Values;
grdTest.DataBind();
}
}
protected void btnSubmit_Click(object sender, EventArgs e)
{
grdTest.Caption = "test grid " + DateTime.Now.ToString();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="grdTest" Caption="test grid" runat="server">
<Columns>
<asp:TemplateField>
<ItemTemplate>
hello
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Button ID="btnSubmit" runat="server" onclick="btnSubmit_Click" Text="Submit" />
</div>
</form>
</body>
</html>