I have a asp:Button that has an onclick function. Is there a way to eliminate the refresh that occurs?
Current HTML containing button.
<div id="user" class="font">
<div id="userPanel">
<asp:TextBox ID="txtSearch" runat="server" Width="400px" align="left"></asp:TextBox>
<asp:Button ID="searchbutton" text="enter" runat="server"
onclick="searchbutton_Click" />
<asp:Label ID="test" runat="server"></asp:Label>
</div>
<asp:UpdatePanel ID="userinfoupdatepanel" runat="server">
<ContentTemplate>
<div class="topcontent">
<ul>...</ul>
</div>
</ContentTemplate>
</asp:UpdatePanel>
The button click then calls a function that fills the UL content
You can use OnClientClick to bind a Javascript function to handle the click in the browser. If you return false from that fumction, the postback doesn't happen.
You can also add client events using Attributes collection.
searchbutton.Attributes.Add("onclick", "alert('Test')");
searchbutton.Attributes.Add("onclick", "return fnSomeThing(this);");
Related
I am using LinkButton in a repeater control inside UpdatePanel in my asp.net project like This
<asp:Repeater ID="rep_test" runat="server">
<HeaderTemplate>
<div class="form-group">
<br />
</HeaderTemplate>
<ItemTemplate>
<div class="col-sm-6">
<div class="form-group">
<asp:LinkButton runat="server" ID="itemid" >
<div id="ab-1" class="moder profile-tile-box">
<div class="itemname-box">
<asp:Label ID="lbltets" runat="server" Text='<%# Bind("itmName") %>'></asp:Label>
</div>
</div>
</asp:LinkButton>
</div>
</div>
</ItemTemplate>
<FooterTemplate>
</div>
</FooterTemplate>
</asp:Repeater>
This worked fine for me but the problem is when I click on linkbutton it refreshes the whole page and regenerate all controls and close all open Modal.
how do I fix this issue .. please guide
Check runat=server causing postback...try OnClientClick=“...return false” in link button
You have to wrap your code inside a update panel to prevent a whole page reload
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true">
<ContentTemplate>
// add your repeater here
</ContentTemplate>
</asp:UpdatePanel>
This will do partial postback on the part thats inside the update panel. Incase of modal put it inside the modal so it will not close the modal itself because it will else rebuild the modal resulting in closing it.
I am using Visual Studio 2015 to create a ASP.NET web site. I have a DIV that is hidden by default and I am trying to display it if the user checks a check box. I am wondering if there is a way using C# to immediately display the DIV as soon as the user checks the box. I can't seem to find a way to recognize the change in state without the form being first submitted. I can easily achieve this using JavaScript however this is for a uni assignment and requires functionality to be implemented in C#.
This is the HTML for the checkBox:
<form id="form1" runat="server">
Limit Stations To My Location<asp:CheckBox ID="limitOptions" runat="server" onClick="toggleOptions()" />
<br /><br />
<div id="locationOptions" runat="server" hidden="hidden">
Radius (KM)<asp:TextBox ID="radius" runat="server" Text="100"></asp:TextBox>
<asp:Button ID="updateList" runat="server" Text="Button" OnClick="updateList_Click"/>
</div>
Any help would be greatly appreciated.
You can do this with C# in code behind. Add a OnCheckedChanged event to the CheckBox and set the AutoPostBack to true and handle the change. Note that a Panel becomes a div in HTML.
<asp:CheckBox ID="limitOptions" runat="server" OnCheckedChanged="limitOptions_CheckedChanged" AutoPostBack="true" />
<asp:Panel ID="locationOptions" runat="server" Visible="false">
Radius (KM) <asp:TextBox ID="radius" runat="server" Text="100"></asp:TextBox>
</asp:Panel>
However this causes a PostBack, so just using JavaScript could be a better option.
<asp:CheckBox ID="limitOptions" runat="server" onclick="toggleOptions()" />
<div id="locationOptions" runat="server" style="display: none">
Radius (KM)<asp:TextBox ID="radius" runat="server" Text="100"></asp:TextBox>
</div>
<script type="text/javascript">
function toggleOptions() {
var id = '#<% =locationOptions.ClientID %>';
if ($(id).css('display') == 'none') {
$(id).slideDown('fast', function () { });
} else {
$(id).slideUp('fast', function () { });
}
}
</script>
I am integrating a Foundation 5 Reveal Modal component with an <asp:LinkButton>. For the reveal modal to work it requires the addition of a non-standard HTML attribute data-reveal-id to the <asp:LinkButton>. If I do 'not' add this attribute in the .aspx below, then clicking the LinkButton will trigger rptNotice_ItemCommand. However, when data-reveal-id is added to the LinkButton as shown below rptNotice_ItemCommand does not run, and lbMessage is not updated. The lbMessage is required by the database upon submission of the modal form.
How do I get this to work?
Is there another way to keep track of the message ID?
In the .aspx file
<!-- Foundation 5 Reveal Modal -->
<div id="replyModal" class="reveal-modal" data-reveal>
<h2>Reply to Notice</h2>
<asp:Label ID="lbMessage" runat="server" />
<asp:TextBox ID='tbFollowQuestion' runat="server" TextMode="MultiLine" Width="100%" /><br />
<asp:Button ID="btnFollowCancel" runat="server" Text="Cancel" OnClick="followQuestionCancel_Clicked" />
<asp:Button ID="btnFollowQuestion" runat="server" Text="Submit" OnClick="followQuestionSave_Clicked" />
<a class="close-reveal-modal">×</a>
</div>
<asp:Repeater ID="rptNotice" runat="server" OnItemCommand="rptNotice_ItemCommand">
<ItemTemplate>
<div class="row padding-bottom-10 border-bottom-1 margin-bottom-10">
<!-- LinkButton -->
<div class="small-6 medium-2 xlarge-1 columns">
<asp:LinkButton data-reveal-id="replyModal" CommandName="Contact" CommandArgument='<%#Eval("MessageId")%>' ToolTip="Reply" runat="server"><img src="/images/icon/envelop.jpg" alt="Contact Us"><strong class="font-size-14">Reply</strong></asp:LinkButton>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
In the .aspx.cs file
public void rptNotice_ItemCommand(object source, System.Web.UI.WebControls.RepeaterCommandEventArgs e)
{
lbMessage.Text = "MessageId: " + e.CommandArgument.ToObjectString();
}
There seems to be possible parsing issue due to unknown parameter. I would suggest using CommandArgument field. Try "replyModal" to CommandArgument .
Split the value at backend and get operation type.
I have a tags that when you hover over another div tag containing the login and password form appears. But for some reasons the event is not firing.
I put the same control outside of the hover and it can be fired.
At first i thought it was because of a drag-and-drop problem because my div could be dragged and placed in the textbox for the website link so i disabled drag-and-drop on my page but the problem doesn't go away.
The mouse cursor changes to the human finger cursor too when I hover over the div.
Here is the code on masterpage where nav-item is the cause:
<div class="brick1" style="width: 33%">
<a href="" class="nav-item">
<div class="nav-hover">
<div class="loginbrick">
<asp:ContentPlaceHolder ID="LoginPlaceHolder" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<i class="li_bulb"></i><span>Welcome, Hover over to login</span>
</a>
</div>
Default.aspx's contentplaceholder:
<asp:Content ID="Content4" ContentPlaceHolderID="LoginPlaceHolder" runat="Server">
<form id="AnonymousForm" runat="server">
<asp:Label ID="Label1" runat="server" Text="UserName: " CssClass="aspTextView"> </asp:Label>
<asp:TextBox ID="tbUserName" runat="server" CssClass="aspTextBox" OnTextChanged="tbUserName_TextChanged"></asp:TextBox>
<br />
<asp:Label ID="Label2" runat="server" Text="Password: " CssClass="aspTextView"></asp:Label>
<asp:TextBox ID="tb_Password" runat="server" CssClass="aspTextBox"></asp:TextBox>
<br />
<asp:Button ID="Button1" runat="server" Text="Login" OnClick="Button1_Click" />
</form>
</asp:Content>
You are enclosing div.nav-hover and div.loginbrick in a hyperlink. Try what happens when you remove that.
in your html brow > brick1 in which your login form is placed.
On brick1 click all event are prevented..
So try to put your form out side brick1.
I am sure your button event is not fire bCoz of js
Checkout you have not added multiple form tag actually we have same problem. and i found issue was because of multiple form in same page.
On my aspx page I have two fieldsets, each wrapped with an <asp:Panel DefaultButton="..."> that have their own <input type="submit"> buttons. Here's an abbreviated version...
<div id="content">...</div>
<asp:Panel runat="server" id="formPanel1" DefaultButton="form1SubmitButton">
<fieldset>
<asp:TextBox runat="server" id="textbox1"/>
<asp:TextBox runat="server" id="textbox2"/>
<asp:Button runat="server" id="form1SubmitButton" OnClick="form1SubmitButton_OnClick"/>
</fieldset>
</asp:Panel>
<asp:Panel runat="server" id="formPanel2" DefaultButton="form2SubmitButton">
<fieldset>
<asp:TextBox runat="server" id="textbox3"/>
<asp:TextBox runat="server" id="textbox4"/>
<asp:Button runat="server" id="form2SubmitButton" OnClick="form2SubmitButton_OnClick"/>
</fieldset>
</asp:Panel>
Only the last submit button form2SubmitButton will postback, the other button does nothing when clicked. I have simplified the code above but I should mention that each form, Panel included, is kept in a separate user control that is registered on the aspx.
UPDATE: After some more research I've figured out that the submits are not working because of validators on the another fieldset on the master page. That fieldset is for signing into the site, so it is needed. Thoughts?
As PCasagrande mentioned, make sure your validation groups match the default button and all validators. Specially for your logging part.
Example:
<asp:Panel ID="pnlUpdateInfo" runat="server" DefaultButton="btnUpdateInfo">
<ASP:TEXTBOX id="txtZip" runat="server"></ASP:TEXTBOX>
<asp:RequiredFieldValidator id="reqvalZipSignUp" runat="server"
ControlToValidate="txtZip" ValidationGroup="btnUpdateInfo" />
<asp:Button ID="btnUpdateInfo" runat="server" ValidationGroup="btnUpdateInfo" />
</asp:Panel>
Turns out it has to do with HTML5 constraint validation. I figured this out because in chrome, from the console, I was getting the error An invalid form control with name='...' is not focusable. This led me to this post. I added the html5 attribute formnovalidate="formnovalidate" to the submit buttons and everything works just fine (*tested in chrome v20.0.1132.57, firefox v14.0.1, IE9 v9.0.8112).
So to recap, here's the answer...
<asp:Button runat="server" id="submit1" OnClick="submit1_OnClick" text="Submit" formnovalidate="formnovalidate"/>