I am doing a project in asp.net. i have a panel which contains some field like txtbox ,buttons etc..I want to use jquery event on a asp.net button click which will open this panel by using jquery show() function and also perform some tasks in server side. Please help me.
The code is :
protected void btninsertfordeo_Click(object sender, EventArgs e)
{
// GridViewforcontact.Enabled = false;
PanelForInsert.Visible = true;
colvisible = true;
txtfaxnoextra.Focus();
if (colvisible == true)
{
GridViewforcontact.Columns[9].Visible = false;
}
colvisible = false;
}
You can use the OnClientClick property of the button to call your client-side function and OnClick to call your server code
<asp:Button ID="btninsertfordeo" runat="server" OnClientClick="functionToShowPanel()" OnClick="hlkContinue_Click" Text="Click"></asp:Button>
<script>
functionToShowPanel(){
$('#pnlToShow').show()
}
</script>
or without using OnClientClient you can probably do:
$('#<%=btninsertfordeo.ClientID %>').click(function(){
$('#pnlToShow').show()
}
Another option would be to use an UpdatePanel instead of jquery to show/hide elements on the page. This way you can control the visibility of your div from your code-behind. Add all the dynamic elements within the UpdatePanel's ContentTemplate and add your button as an AsynPostbackTrigger for the UpdatePanel to enable dynamic updating of our page.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btninsertfordeo" EventName="click" />
</Triggers>
<ContentTemplate>
<asp:Panel ID="PanelForInsert" runat="server" Visible="false">
//Your textboxes, buttons etc goes here
</asp:Panel>
<asp:Button ID="btninsertfordeo" runat="server" Text="Click" OnClick="btninsertfordeo_Click"></asp:Button>
</ContentTemplate>
</asp:UpdatePanel>
Here are links to documentation that will help you in understanding and implementing an UpdatePanel:
Introduction to the UpdatePanel
UpdatePanel Control Overview
UpdatePanel Class
Related
In ASP.NET when using validation controls (i.e. RequiredFieldValidator) the client sided framework will execute the JS function Page_ClientValidate. This function will validate all controls on the page (of the given ValidationGroup) and call the JS function ValidatorUpdateDisplay with a parameter of the DOM element of the span tag of the validator control.
ValidatorUpdateDisplay toggles the visibility of the span tag depending on the result of the validation.
In my web application I've overridden the ValidatorUpdateDisplay JS function to provide more functionality on the validation scenario (i.e. red borders around the controls, showing popover on the first failed control and scrolling to it).
Now this works very well until my controls (incl. submit button) are shown the first time after a postback in an UpdatePanel.
<asp:ScriptManager runat="server" />
<asp:UpdatePanel ID="upTest" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="bShow" runat="server" UseSubmitBehavior="false" Text="SHOW" OnClick="bShow_Click" />
<asp:Panel ID="pContent" runat="server" Visible="false">
<asp:TextBox ID="tbTest" runat="server" />
<asp:RequiredFieldValidator ID="rfvTest" runat="server" ControlToValidate="tbTest" Text="Not valid" />
<asp:Button ID="bTest" runat="server" UseSubmitBehavior="false" Text="TEST" />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript">
function ValidatorUpdateDisplay(val) {
debugger; // this will not be reached
}
</script>
protected void bShow_Click(object sender, EventArgs e)
{
this.pContent.Visible = true;
}
After initial load press bShow to display pContent.
Now, if you leave tbTest.Text empty and press on bTest it should enter the overridden ValidatorUpdateDisplay function, however it enters the function of the framework and displays "Not valid" from rfvTest.
If you change pContent.Visible to true and press bTest after initial load the desired effect will happen: It will enter the custom ValidatorUpdateDisplay function and not display "Not valid".
If you move the button bTest out of the UpdatePanel the problem persists.
How can I make it work inside an UpdatePanel?
ASP.NET uses a lazy loading approach to insert the ValidatorUpdateDisplay function when it needs it the first time, hence in my example it will load the function after the postback of the UpdatePanel.
This will override my own implementation of the ValidatorUpdateDisplay function, because it's inserting the function at the end of the page.
There is a dirty workaround, I just inserted an empty CustomValidator on initial load that is always valid:
<asp:CustomValidator runat="server" />
I wish there was a cleaner solution.
DropDownList's SelectedIndexChanged() Event fills the ListBox on the page. Obviously this posts the page back to the server. Is there any way to make it happen without full postback?
protected void ddlTablo_SelectedIndexChanged(object sender, EventArgs e)
{
List<string> list = new List<string>();
ListBox1.Items.Clear();
var columnNames= from t in typeof(Person).GetProperties() select t.Name;
foreach (var item in columnNames)
{
list.Add(item);
}
ListBox1.DataSource = list;
ListBox.DataBind();
}
You could put the DropDownList into an <asp:UpdatePanel> and set the trigger to the SelectedIndexChanged event of the DropDownList.
Something like this (don't forget the script manager)
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DropDownList ID="drop1" runat="server" OnSelectedIndexChanged="ddlTablo_SelectedIndexChanged" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostbackTrigger ControlID="drop1" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
You can send ajax call, using asp.net UpdatePanel or use jQuery ajax. This wont do postback and your whole page wont get refreshed.
The UpdatePanel is quite straight forward and easy to use. ASP.net ajax will generate the asyn calls for you whereas jQuery ajax will probably need you to render html using javascript.
In the code snippet below, add this parameter: AppendDataBoundItems="True"
<asp:DropDownList ID="ddlGroupNameFilter"
runat="server"
AutoPostBack="true"
AppendDataBoundItems="true"
OnSelectedIndexChanged="ddlLeadgroupName_SelectedIndexChange">
</asp:DropDownList>
I have placed a user control inside update panel after doing asynchronous postback of page associated js file of that user control is not working so that is there any method to exclude a control from updatepanel in another word i don't want to post that user control.
<asp:UpdatePanel ID="upPnlAnswerList" runat="server">
<ContentTemplate>
// another code that required to placed inside updatepanel
<div id="miancontainer" class="containerr"
<klmsuc:Share ID="shareUserControl" runat="server" />
// another code that required to placed inside updatepanel
</div>
Use a PostBackTrigger to perform exclusion rather than having to specify a large number of includes.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:LinkButton ID="lnkExport" runat="server" OnClick="lnkExport_Click" Text="Export Data"></asp:LinkButton>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="lnkExport" />
</Triggers>
</asp:UpdatePanel>
Set UpdateMode=Conditional and provide exclusive Triggers for the UpdatePanel.
See:
http://msdn.microsoft.com/en-us/library/bb386454.aspx
you must add some controls in code behind and in the right event and register it for exclusion(postback) instead and AsyncPostBack which is a ajax call.
ScriptManager.GetCurrent(this).RegisterPostBackControl(btnAdd);
https://stackoverflow.com/a/23036830/184572
protected void grdExpense_RowCreated(object sender, GridViewRowEventArgs e)
{
LinkButton btnAdd = (LinkButton)e.Row.Cells[0].FindControl("btnAdd");
if (btnAdd != null)
{
ScriptManager.GetCurrent(this).RegisterPostBackControl(btnAdd);
}
}
look for another similar page which excludes all the controls in a gridview
http://www.aspsnippets.com/Articles/Assign-PostBack-Trigger-Full-PostBack-for-LinkButton-inside-GridView-within-AJAX-UpdatePanel-in-ASPNet.aspx
private void RegisterPostBackControl()
{
foreach (GridViewRow row in GridView1.Rows)
{
LinkButton lnkFull = row.FindControl("lnkFull") as LinkButton;
ScriptManager.GetCurrent(this).RegisterPostBackControl(lnkFull);
}
}
I have an ASP page with an asp:DropDownList (with AutoPostBack="true") so that when the user changes it, it reload the appropriate data.
Under that control i have a list of UserControls, that includes a tinymce editor (tied to an asp:TextBox) and an asp:ImageButton to save the data.
When clicking on the ImageButton, the applications send the postback data via ajax to the same page (__EVENTARGUMENT, __EVENTTARGET, etc...). Why does it load that ajax page, and how do i prevent it? I'm updating the value in the DB in the OnClick event handler on the ImageButton, so all I need to do, is get ride of that ajax call.
Any ideas?
Solution 1
<asp:ImageButton ID="btn" runat="server" ImageUrl="~/images/yourimage.jpg"
OnClientClick="return false;" />
OR
Solution 2
<asp:ImageButton ID="btn" runat="server" ImageUrl="~/images/yourimage.jpg"
OnClientClick="yourmethod(); return false;" />
In addition (solution 2), your javascript method may be in this form
<script type="text/javascript">
function yourmethod() {
__doPostBack (__EVENTTARGET,__EVENTARGUMENT); //for example __doPostBack ('idValue',3);
}
</script>
in code behind
protected void Page_Load(object sender, System.EventArgs e)
{
if (this.IsPostBack) {
string eventTarget = this.Request("__EVENTTARGET") == null ? string.Empty : this.Request("__EVENTTARGET");
string eventArgument = this.Request("__EVENTARGUMENT") == null ? string.Empty : this.Request("__EVENTARGUMENT");
}
}
You've not stated you're using an UpdatePanel but this is presumably how you've implemented ajax calls. If so you need to add a trigger to exclude the imagebutton event from ajax:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:PostBackTrigger ControlID="ImageButton" />
</Triggers>
<ContentTemplate> </ContentTemplate>
</asp:UpdatePanel>
I have the following situation: I have a textbox inside an ajax updatepanel. Wherever the user types in the textbox I must display a message (different message that depends on the user typed data).
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
<ContentTemplate>
<asp:TextBox ID="txtMyTexbox" runat="server" Width="500px" OnTextChanged="txtMyTexbox_TextChanged" AutoPostBack="true"></asp:TextBox>
<br />
<asp:Label ID="lblMessage" runat="server" CssClass="errorMessage" Visible="false">Hello World</asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="txtMyTexbox" />
</Triggers>
</asp:UpdatePanel>
In server side I have written the following at page load
ScriptManager.GetCurrent(this).RegisterAsyncPostBackControl(txtMyTexbox);
and the method like this
protected void txtMyTexbox_TextChanged(object sender, EventArgs e)
{
if (.....)
{
lblMessage.Visible = false;
}
else
{
lblMessage.Visible = true;
}
}
My problem now is that: when the user types in the textbox it doesn't cause OnTextChanged event.
Am I missing something?
I'm not sure that your problem has anything to do with the UpdatePanel.
In fact, the TextChanged event doesn't fire while typing. It will only fire after the textbox loses focus. This happens directly if AutoPostBack is set to True, or when the next postback occurs. Please see the docs for the AutoPostBack property and the TextChanged event.
Afaik, your best bet is probably to handle the keyup event in javascript.
Here's a simple jQuery example:
$(document).ready(function() {
$(':text[id$=YourTextBox]').keyup(function() {
if ($(this).val() === "your special value") {
$('span[id$=YourLabel]').css('visibility', 'visible');
}
else {
$('span[id$=YourLabel]').css('visibility', 'hidden');
}
});
});
Set the EventName property for your txtMyTexbox AsyncPostBackTrigger to TextChanged
<Triggers>
<asp:AsyncPostBackTrigger ControlID="txtMyTexbox" EventName="TextChanged" />
</Triggers>
Other sugguestion:
Have you tried looking at the AutoComplete control that is part of the AjaxControlToolKit? Its behaves the same way you want your solution to behave.
its strnage to know that even after adding update panel / AsyncPostBackTrigger , TextBox ChangeEvent doesn't work properly. Some time its works and some times it not..Since its is Asychronous call, we need to some time refresh, or wait or unpredictable , Hopes microsoft will come up with competent one.. Below are easy way to check user name pretty good
------ Under Page_Load - aspx.cs -----------------------
this.TextBox1.Attributes.Add("onKeyUp", "fnUNameSubmit(this);");
-------in aspx -add script ---------------------------------------
<script language="javascript" type="text/javascript">
function fnUNameSubmit(urInput) {
var inpt= urInput.value;
if (inpt.length > 21) {
document.getElementById('<%= TextBox1.ClientID %>').style.backgroundColor = "green";
document.form1.submit(); // This is only trick we use here..
}
else {
document.getElementById('<%= TextBox1.ClientID %>').style.backgroundColor = "red";
}
}
</script>
-------in aspx -add script ---------------------------------------
----------------aspx.cs -------------------
if (TextBox1.Text.Length > 21)
{
CheckUsrName();
Label2.Text = "";
}
else
{
Label2.Text = "Length is less than 21"; //lets do some stuff..bla..bla
}
------------------------------------------------- CheckUsername()
public void CheckUsrName()
{
Call dB values
}
You should not be using RegisterAsyncPostBackControl for your TextBox. That method is really only for use for controls that reside outside of UpdatePanels. I would try removing that line of code and seeing what happens.
See this for more info: http://msdn.microsoft.com/en-us/library/system.web.ui.scriptmanager.registerasyncpostbackcontrol.aspx
a workaround check textbox - causesvalidation property and set it to true
The Control which id is used in AsyncPostBackTrigger must be outside the update Panel(that cause to fire the Async call) like this:
<tr>
<td colspan="4"><asp:Label ID="lblEnter_Successfully" Text="Enter Record SuccessFully" runat="server" Visible ="false" ForeColor ="Blue" Font-Size ="Larger" Font-Bold ="true"></asp:Label>
</td>
</tr>
</table>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID = "Button_Save" EventName ="Click"/>
</Triggers>
</asp:UpdatePanel>
<table>
<tr>
<td width = "472px" align ="right">
<asp:Button ID="Button_Save" runat="server" Text="Save" OnClientClick ="return URLValidation();"/>
<asp:Button ID="Button_Clear" runat="server" Text="Clear"/>
</td>
</tr>
</table>