how to prevent web page refreshing - c#

I have a "CaptchaControl" in a webusercontrol, when i click refresh link for the captcha code, the page refresh too. how can i prevent it?
<cc:CaptchaControl ID="captcha" CssClass="toppading" runat="server" CharCount="5" ImageUrl="~/images/CapchaImage.jpg" />
<asp:LinkButton CssClass="leftpading" id="btnReset" runat="server" Text="Refresh" resourcekey="lblrefresh" OnClick="btnReset_Click" ></asp:LinkButton>
protected void btnReset_Click(object sender, System.EventArgs e)
{
captcha.Refresh();
}
i've heard something about ajax, but i'm green in ajax.

Ajax is the best solution for this problem.ajax will send data to your server with out making a post back in your browser.
Just add an ajax update-panel in your form(you can find this in your Toolbox under the tab Ajax extensions) and put your user-control inside it.And don't forget to add a script-manager in the beginning of your form.

Related

How can we do ajax calls for gridview events like RowCommand, RowDeleting

I'm working on a asp.net web application where all events are generated in .ASPX and code behind code is also written in C# and both are working fine. But now I want to call c# server side events using AJAX Calls.
I know how to create and call webmethod using AJAX calls but don't know how to handle (object sender, GridViewRowEventArgs e) these parameters through AJAX.
Thanks in advance.
ASPX Code:
<asp:GridView ID="grd" runat="server"
AutoGenerateColumns="false"
OnRowCommand="grd_RowCommand">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="btn" runat="server" CommandName="AddRow" Text="AddRow">
</asp:Button>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
C# Code:
protected void grd_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "AddRow")
{
//Do Something
}
}
Controls that don't normally postback to the server naturally use some ASP.NET JS methods to trigger the postback, which sets two hidden field values: __EVENTTARGET and __EVENTARGUMENT (see this post with some brief details on it in another context). These fields should contain the relevant object/event arg data. So your solution would likely need to be able to work with that, invoke the page request, and parse out the response to replace the grid, and maybe that will work. However, I think that might have issues.
Since you are using web forms, I would recommend using an UpdatePanel preferrably, or consider using this technique to dynamically loading a grid from an AJAX response. Any eventing within the grid would need to be handled via JS though.

asp.net search button just refreshing page

Im trying to create a search button on my website on my homepage which is an aspx page but when I click search all it does is refresh the page instead of preforming the query, any help would be appreciated
heres the code for my index.aspx and the code for my index.aspx.cs page
<asp:TextBox ID="searchtitle" runat="server"></asp:TextBox>
<asp:Button ID="searchitems" runat="server" Text="Search" />
protected void searchitems_Click(object sender, EventArgs e)
{
String stext = searchtitle.Text;
Response.Redirect("search.aspx?searchquery=" + stext);
}
The button is not working because you didnt call the event on the button
<asp:Button ID="searchitems" runat="server" OnClick="searchitems_Click" Text="Search" />
add OnClick attribute with name of the event you want to call and in the given code the event you want to call is searchitems_Click.
definitely when you will click the searchitems page will reload because function for that click is defined on server side.. what you have to do is on the pageload look for the QueryString and get the value of ["searchquery"] then manipulate it as you want..
if you want to not refresh the page use Ajax then...

asp:Button not displaying correctly

this is my scenario:
I want to display a button(btnGenerate) based on the amount of rows displayed in my gridview. I've gotten it to display for a second then it goes away again. I'm using the onclientclick of one of my other buttons(btnImport). What I think is causing the problem is that on the same button(btnImport)'s OnClick event two gridview's performs for each a databind. Could this be the problem? I have written a script using javascript to perform this task from the client side. Is there a better way to do it? What can I do to fix my problem?
Here is my code that I have so far:
<asp:Button runat="server" ID="btnImport" Text="Load Data from File"
BackColor="#990000" ForeColor="White" nowrap OnClick="btnImport_Click"
style="display:none" OnClientClick="DisplayButtonGenerate()"/>
<asp:Button ID="btnGenerate" runat="server" Text="Generate New Stock Codes"
BackColor="#990000" ForeColor="White" OnClick="btnGenerate_Click"
style="display:none" />
I have two gridviews : ErrorsGrid that displays all the faulty records and InventoryGrid that displays the records that are correct. Like I said above, the idea is to display btnGenerate if ErrorsGrid has rowCount=0.
protected void btnImport_Click(object sender, EventArgs e)
{
InventoryGrid.DataBind();
ErrorsGrid.DataBind();
}
protected void btnGenerate_Click(object sender, EventArgs e)
{
FinalMessage.AppendLine(_InsertWrapper.PostData());
}
Here is the script:
<script language="javascript" type="text/javascript">
function DisplayButtonGenerate() {
var rowCount = <%=ErrorsGrid.Rows.Count %>;
var buttonGen = document.getElementById("<%=btnGenerate.ClientID%>");
if(rowCount == 0)
{
buttonGen.style.display = "block";
}
}
</script>
Your btnImport has server-side OnClient and client-side OnClientClick both set. I guess what's happening is the client-side is called first, shows the button, then the server-side one kicks in, the page gets refreshed from the server, and your button is hidden again. You can do it in one way or another, but not both:
Server-side: Remove the OnClientClick & style="display:none" & JavaScript, set the Visible property of the button to false, and in the code-behind click event on the server add:
if(ErrorsGrid.Rows.Count == 0)
btnImport.Visible = True;
Client-side: Return false from the JavaScript function to the OnClientClick:
OnClientClick="return DisplayButtonGenerate()"
function DisplayButtonGenerate() {
....
return false;
}
If you want to update InventoryGrid,ErrorsGrid grid controls in code after you click a button, you need to keep those in a UpdatePanel
<asp:UpdatePanel ID="upnl" runat="server" UpdateMode="Conditional">
<contenttemplate>
InventoryGrid,ErrorsGrid mark up
</contentTemplate>
<Triggers>
//set async trigger as btnImport
</Triggers>
</asp:UpdatePanel>
Let's breakdown your problem into steps.
you click on btnImport, it first calls the OnClientClick, does client side processing
and then does a full postback, goes to server side and processes its server side handler OnClick.
after the OnClick handler is processed, the page again renders, the unconditioned code in the btnGenerate display:none again runs, and the default state is again rendered.
you see the problem? even if you are manipulating certain logic in your clientClick, it all resets on page reload, because your btnImport is doing that.
Solutions:
there are couple of things I can suggest.
Use UpdatePanel to prevent Postback of the entire page or
make your btnImport a client side button altogether, and do a post using xhr or jQuery's ajax.
Set the visibility of btnGenerate on the server side itself
most simple would be the 3rd one i.e. remove the onclientclick event from the code and change your btnImport to do this:
protected void btnImport_Click(object sender, EventArgs e)
{
InventoryGrid.DataBind();
ErrorsGrid.DataBind();
//set visibility of btnGenerate in Page_Load also;
btnGenerate.Visible = ErrorsGrid.Rows.Count == 0;
}
and remove display:none from btnGenerate from client
There's no need for a JS function here.
Simply check the datasource for ErrorsGrid if count != 0 and if it's not just set the visibility of your button in codebehind.
If i've understood your req. correctly, setting 'Visbible' property of button to true or false should work. i.e btnGenerate.Visible=true/false. Initially you can set the button visibility as false then based on the record count you can modify it in the required event handler.

Link OnClick code behind does not execute when set as ModalPopupExtender TargetControlID

I did a lot of searching and cannot figure this out.
I have a ModalPopupExtender pop-up that I want to display when the user clicks a link DoSomething. The pop-up has a dropdown control that I then want to populate on the fly when the user asks to open the dialogue. This needs to happen server side via the code behind. Currently I am trying to do it via an OnClick event on the link but as soon as the link is tied to the ModalPopupExtender the link OnClick code is not executed.
Code snippet:
<asp:LinkButton ID="lnkDoSomething" runat="server" onClick="lnkDoSomething_Click">Do Something</asp:LinkButton>
<asp:ModalPopupExtender ID="mpelnklnkDoSomething" runat="server" BackgroundCssClass="modalBackground"
DropShadow="true" PopupControlID="lnkDoSomething"
PopupDragHandleControlID="pnlDragHandlerForlnkDoSomething"
TargetControlID="lnklnkDoSomething"></asp:ModalPopupExtender>
The problem is as soon as I set the ModalPopupExtender to the link the OnClick code does not execute. This obviously is by design but it doesn't make sense to me (naive) as if the user clicks the link the OnClick code should be executed.
Any ideas why this is not supported and what the correct solution is?
Attach the ModalPopupExtender to a dummy button and show the modal on the LinkButton's OnClick even from the code-behind:
Markup:
<asp:LinkButton ID="lnkDoSomething" runat="server" onClick="lnkDoSomething_Click">Do Something</asp:LinkButton>
<asp:Button id="dummyButton" runat="server" style="display:none;" />
<asp:ModalPopupExtender ID="mpelnklnkDoSomething" runat="server"
BackgroundCssClass="modalBackground" DropShadow="true" PopupControlID="controlToPopUpId"
PopupDragHandleControlID="pnlDragHandlerForlnkDoSomething"
TargetControlID="dummyButton"></asp:ModalPopupExtender>
Code-behind:
protected void lnkDoSomething_Click(Object sender, EventArgs e)
{
//do work
mpelnklnkDoSomething.Show();
}

Button need to be click twice to fire an event

I have a simple ASP.NET Button inside of iFrame, for strange reason i have to click it twice in order to fire an event.
<asp:Button ID="btnSaveComment" runat="server" Text="Add Comment"
CssClass="button"
OnClick="btnSaveComment_Click"
ValidationGroup="add" />
protected void btnSaveComment_Click(object sender, EventArgs e)
{
AddComment();
}
I suspect that when you initially click an area above the button you're giving focus to the iframe (that is to say, the page within it), and on the second click the mouse can interact with the button.
On the other hand, if the page seems to be posting back but not actually doing anything until the second click, then it might well be related to the page lifecycle, as suggested in an answer comments by #AndroidHustle.
Edit:
To test the theory of whether or not the frame is focused, try giving it focus via script. Something like the following might help:
<script type="text/javascript">
document.getElementById("iFrameId").focus();
</script>
I had the same problem. Here is how I solved it:
$("#MainContent_Button1").hover(function (event) {
$("#MainContent_Button1").click()
});
Now it only takes 1 click, and the button functions like it's supposed to.
<asp:Button ID="Button1" runat="server" Text="Save Payment Plan" OnClick="Button1_Click" />

Categories

Resources