I'm trying to get selected items from chosen select in server-side.
Here is my HTML:
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<link href="Content/chosen.css" rel="stylesheet" />
<form id="form1" runat="server">
<select id="chsn" runat="server" class="chzn-select" multiple="true" name="faculty" style="width: 200px;">
</select>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
<script src="Scripts/chosen.jquery.js"></script>
<script type="text/javascript">
$(function () {
$(".chzn-select").chosen();
$(".chosen-select").chosen();
});
</script>
</form>
Here is server-side:
protected void Button1_Click(object sender, EventArgs e)
{
List<ListItem> tmpLst = new List<ListItem>();
for (int i = 0; i < chsn.Items.Count; i++)
{
if (chsn.Items[i].Selected)
tmpLst.Add(chsn.Items[i]);
}
}
chsn.Items[i].Selected always returns false. Is there a better way to get selected items?
The problem is not with your Button1_Click event. ( I have tested it ).
The problem must be with the Page_Load event where you bind the select chsn with values. Make sure that you are binding the HTMLSelect under !IsPostBack
Naveen is right .. I am just answering this as i though you might not get Naveens point.
Everything in you pageload event.
put it under this check
if(!isPostBack)
{
//here comes the code you have in pageload event.
}
Related
So just starting out with asp.net... I want to display my textbox when my checkbox is checked, but this doesn't seem to be working. I also tried with the visible property, but that didn't work either. What am I doing wrong exactly?
Code:
protected void checked_CheckedChanged(object sender, EventArgs e)
{
text.Style["display"] = "block";
}
Layout:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<p>gehuwd/samenwonend<asp:checkbox runat="server" ID="checked" OnCheckedChanged="checked_CheckedChanged"></asp:checkbox>
</p>
<asp:TextBox runat="server" ID="text" style="display:none"></asp:TextBox>
</form>
</body>
</html>
Use the AutoPostBack property for checkbox and set it to true:
<asp:checkbox runat="server" ID="checked" OnCheckedChanged="checked_CheckedChanged" AutoPostBack="true"></asp:checkbox>
You can use add css property of textbox in c# as given below. If your checkbox OnCheckedChanged is not working then you can set property AutoPostBack is true in checkbox.
protected void checked_CheckedChanged(object sender, EventArgs e)
{
text.Attributes.Add("display","block");
}
You can also do this completely client side, using jQuery or javascript.Making a post back to the server everytime you need to change the visual appearance of your HTML can put unnecessary strain on the server and have a negative effect on the user experience by slowing down the overall performance of your site.
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var id = "<%: text.ClientID %>";
id = "#" + id;
$(id).hide();
$("#chkShowHide").change(function () {
if (this.checked) {
$(id).show();
}
else{
$(id).hide();
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<input id="chkShowHide" type="checkbox" /> Show\Hide<br />
<asp:TextBox runat="server" ID="text"></asp:TextBox>
</form>
</body>
I want to display the search result in the Fancybox. The code works fine in the web form, but when i integrate with the master page, the fancy box is not opening. Please give me a solution!
I created two web forms, Default1.aspx and Default2.aspx
The code in the Default1.aspx is given below,
<head runat="server">
<title></title>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<script lang="javascript" type="text/javascript">
$(document).ready(function (){
$('#fancybox').fancybox({
autoDimensions: false,
height: 400,
width: 700,
type: "iframe"
});
});
</script>
<a id="fancybox" runat="server" style=" visibility: hidden "></a>
<asp:Literal ID="Literal1" runat="server"></asp:Literal>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</div>
</form>
</body>
**Default1.aspx.cs**
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
TextBox1.Text = Request.QueryString["cargoNo"];
}
}
protected void Button1_Click(object sender, EventArgs e)
{
fancybox.Attributes["href"] = "~/Default2.aspx?cargoNo=" + TextBox1.Text.Trim();
Literal1.Text = "<script> $(document).ready(function() {$(\"#fancybox\").trigger('click');});</script>";
clear();
}
public void clear()
{
TextBox1.Text = "";
}
}
In the Default2.aspx I added a Sql Datasource and used Gridview to display it.
When you enter the number in the text box and click button1. the serach will initiate and display the result in the fancybox. The above code is working great.
When i added this to the Master page the Fancybox is not triggering. Twhen button is clicked, the page just refresh. All replies are appreciated. I am new to asp.net. Please help me to solve this problem.
First of all, make sure You don't call a Jquery source in your Master Page, because I see you are calling Jquery on your Default1.aspx, since Jquery should be load once. Second, if you don't want your button make a Postback, add this to your button: UseSubmitBehavior="False". Hope this help
When a user wants to upload a file (currently there are 4 places in the form that allow for this), they first have to “Choose File” and then they have to click on “Upload”. If they miss the 2nd "Upload" step, there is no indication to them or us.
Is there a way to combine the “two-step” process to a single step (select and upload).
Use this link to know more about it
http://www.c-sharpcorner.com/UploadFile/2b481f/uploading-a-file-in-Asp-Net-web-api/
And you can also use this code
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.9.1.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="fileupload1" runat="server" />
<asp:Button ID="btn" runat="server" OnClick="btn_Click" Text="upload" style="display:none" />
</div>
<script type="text/javascript">
var isfirst = true;
$(function () {
$('#<%= fileupload1.ClientID %>').on('change', function (e) {
console.log('change triggered');
$('#<%= btn.ClientID%>').trigger('click'); // trigger the btn button click which i have hidden using style='display:none'
});
});
</script>
</form>
</body>
Code behind
protected void btn_Click(object sender, EventArgs e)
{
//TODO
}
Browse and Upload with using asp:FileUploadcontrol is working perfectly fine.
But It is two step process. First we have to browse and then select the file.
I want it working in single step So for making it single step I tried the following code:
protected void Button1_Click(object sender, EventArgs e)
{
//to launch the hidden fileupload dialog
ClientScript.RegisterStartupScript (GetType(),
"hwa", "document.getElementById('fileupload').click();", true);
//Getting the file name
if (this.fileupload.HasFile)
{
string filename = this.fileupload.FileName;
ClientScript.RegisterStartupScript(GetType(), "hwa", "alert('Selected File: '" + filename + ");", true);
}
else
{
ClientScript.RegisterStartupScript(GetType(), "hwa", "alert('No FILE has been selected');", true);
}
}
In this code, there is one fileUpload control that is being invoked on Button1_Click. Ideally it should execute the first line then A file Upload control should be shown and after selecting a file or canceling the dialog, flow should go to next line. But dialog is showing up after full function execution finishes.
Because of this asynchronous or not expected execution flow if (this.fileupload.HasFile) is returning false(because user has not been asked to select any file yet) and I am not getting the selected file name.
Can we modify this code to achieve file upload in single step? Or if any other way is possible to do this?
Note- I have asked not to use window forms and Threads. So solution by using these two is not acceptable.
You are missing the fact there is a client side/server side disconnect in the web environment.
Your line: ClientScript.RegisterStartupScript (GetType(),"hwa","document.getElementById('fileupload').click();", true); is client side code and will not be executed until the serverside script is comleted and the resulting HTML/javascript/CSS returned to the browser as it is client side javascript. YOu want to be leveraging the onchange event of the file upload control.
The question should help you out: ASP.NET FileUpload: how to automatically post back once a file is selected?
this is not exactly what you are looking for but it does what you want. difference is that instead of clicking a separate button you have to click the Browse button. and when you press the Open button, the page will postback. I have used JQuery for this. here's my code
ASPX
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.9.1.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="fileupload1" runat="server" />
<asp:Button ID="btn" runat="server" OnClick="btn_Click" Text="upload" style="display:none" />
</div>
<script type="text/javascript">
var isfirst = true;
$(function () {
$('#<%= fileupload1.ClientID %>').on('change', function (e) {
console.log('change triggered');
$('#<%= btn.ClientID%>').trigger('click'); // trigger the btn button click which i have hidden using style='display:none'
});
});
</script>
</form>
</body>
Code behind
protected void btn_Click(object sender, EventArgs e)
{
//TODO
}
For the ones who land here late,
<div>
<asp:FileUpload ID="fu" runat="server" CssClass="bbbb" onchange="clickSeverControl()"/>
<asp:LinkButton Text="Upload" ID="lnkUpload" runat="server" OnClientClick="showUpload();return false;" OnClick="lnkUpload_Click"/>
</div>
hide the file control with css
<style>
.hiddenStyle {
visibility:hidden;
}
</style>
on client click event of link button trigger the click of file upload control
function showUpload() {
document.getElementById("fu").click();
}
on change event trigger the server side click
function clickSeverControl() {
__doPostBack('<%= lnkUpload.ClientID %>', 'OnClick');
}
on server click save the uploaded file
protected void lnkUpload_Click(object sender, EventArgs e)
{
fu.PostedFile.SaveAs(Server.MapPath("~/Upload") + "/" + fu.PostedFile.FileName);
}
Thanks for the other answer I have just combine two example and got the solution for my problem in my project
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.9.1.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="fileupload1" runat="server" />
<asp:Button ID="btnUploadBulk" runat="server" OnClick="btn_Click" Text="upload" style="display:none" />
</div>
<script type="text/javascript">
var isfirst = true;
$(function () {
$('#<%= btnUploadBulk.ClientID%>').on('click', function (e) {
showUpload();
})
});
function showUpload() {
var control = document.getElementById("<%= FileUploadControl.ClientID %>");
control.click();
}
</script>
</form>
Code Behind
protected void btn_Click(object sender, EventArgs e)
{
//TODO
}
This worked for me
I have a dropDownlist in my project and i am adding items to it in javascript. Now i want to get selected index in C# (on a button click event). But i am unable to do this because it seems to be a problem that viewstate is not maintained.
Further more i have
EnableEventValidation="false"
in my Page
Please tell me how can i achieve this functionality? Right Now i am adding selected values in a hidden field and then accessing that hidden field in C#. Its working but i want "cleanliness".
Regards
When ASP.NET performs a form POST the drop down options need to be passed through to the server and be recreated there for further processing.This is achieved through ViewState.
I'm not aware of any other way of doing this, what you can do however is retrieve the selected value of the drop down using Request.Form[ddlProducts.UniqueID] if you can figure out the item index based on the selected value, great! Else I think hidden fields are your only option
Here's a complete example:
<head runat="server">
<title></title>
<script type="text/javascript">
window.onload = function () {
var select = document.getElementById("ddlProducts");
select.options[select.options.length] = new Option('Product 1', 'Value 1');
select.options[select.options.length] = new Option('Product 2', 'Value 2');
select.options[select.options.length] = new Option('Product 3', 'Value 3');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="ddlProducts" runat="server">
</asp:DropDownList>
<asp:Button ID="btnOK" runat="server" Text="OK" OnClick="Process" /> <span id="output"
runat="server" />
</div>
</form>
</body>
</html>
protected void Process(object sender, EventArgs e)
{
int selectedIndex = ddlProducts.SelectedIndex;
output.InnerHtml = Request.Form[ddlProducts.UniqueID];
}