I have a TextBox:
<asp:TextBox ID="textSearch" runat="server" Width="80" ForeColor="Black" />
and a Repeater with ImageButtons:
<asp:Panel ID="panRepeater" runat="server" ScrollBars="Vertical">
<asp:Repeater ID="Repeater" runat="server">
<ItemTemplate>
<asp:ImageButton ID="imgSearchResult" runat="server" ImageUrl='<%# Eval("ImageUrl") %>'/>
</ItemTemplate>
</asp:Repeater>
</asp:Panel>
In code behind, I add the Images to the ImageButtons with this function:
private void LoadImages()
{
string[] filesindirectory = Directory.GetFiles(Server.MapPath("~/Images/ORAS"));
List<System.Web.UI.WebControls.Image> images = new List<System.Web.UI.WebControls.Image>(filesindirectory.Count());
foreach (string item in filesindirectory)
{
System.Web.UI.WebControls.Image image = new System.Web.UI.WebControls.Image();
image.ImageUrl = (String.Format("~/Images/ORAS/{0}", System.IO.Path.GetFileName(item)));
images.Add(image);
}
Repeater.DataSource = images;
Repeater.DataBind();
}
I want to be able to search and only display the wanted ImageButtons similar to this example:
I would type in 00 into the Search-TextBox and all ImageButtons, which contain 00 will be shown. The thing is that I'd have to do this after every KeyDown.
This is a complex scenario and can be implemented in two different ways.
Using ajax postback by hooking up a server-side text changed event of search textbox. In this server-side event, you would get records from database using the search text box text value. An example of a similar scenario using gridview can be found at this URL: Server-side Search
The second approach, which is more prefered is calling the server-side method to get records directly from JavaScript or jquery. This can be very quick and fast. An example of such a scenario using gridview can be found at this URL: Search using client-side code.
For the second option, you have to hookup client-side keyup event to get search text before making an ajax call to a web service method from jquery, and also only do a search if user has input a minimum number of characters like 2 or 3 or 4 or whatever you think is a good number. The web service method on server-side will return a JSON collection of the searched items for your repeater control. Finally, in the success event of jquery ajax call you would need to populate the repeater items with the search items.
A Suggestion
Also, as another suggestion to make it easier to implement the client-side solution you could create an html string in the web service method and then in success event of jquery ajax call just set the innerHTML of a div to this html, so in jquery just one line of code in success event would populate the repeater control. This would be easier than returning a JSON collection from web service and then in success event of jquery ajax call you would need to create/populate html into the repeater control using DOM manipulation which would need some jquery.
Related
I´m trying to understand the annoying refreshment of the GridView/Repeater that occurs most of the times I click on a LinkButton within that element. If this is caused by the Postback, then why doesn't it happen all the times?
And if it is not caused always, do I might even get rid of it?
I usually do this to get detailed information on a cell clicked in a Grid or repeater:
<asp:LinkButton ID="ButtonSelect" runat="server" CommandName ="Select" CommandArgument = '<%# Eval("date") %>' Text='<%# Bind("TAG") %>' OnClick="GetDetails"/>
The data processed in the "GetDetails" method will then be displayed in some other element. There wouldn't be any need to refresh the Grid.
Is this the normal behavior for any LinkButton click in a GridView?
Martin
It's the normal action of a server button within a gridview. It will cause a postback. A postback will force the Page LifeCycle. The entire page will be recreated and Databinding may or may not occur depending on your cache options and programming.
"Fixing" that really depends what you are trying to accomplish. If it's simply to stop the "screen flicker" due to the postback, consider using AJAX calls or <asp:UpdatePanel> server controls.
If you are trying to work with JS on the clientside and just wish to defer the postback until later, convert the button to a template field and replace the <asp:LinkButton> with a basic html control <a href="javascript:void();" ...>, <button type='button'>, <input type='button' ..., etc...
I have datalist in field.ascx and i have a label and textbox in fields.ascx and i am binding textbox and label dynamically in datalist and display in webform.aspx.Now i want to get label text and textbox value in webform.aspx when clicking a button in webform.aspx using ajax.
field.ascx:
<asp:DataList ID="dtlist" runat="server" RepeatColumns="4" CellPadding="5" EnableViewState="True">
<ItemTemplate>
<data:Value ID="test" runat="server" />
<ItemTemplate>
</asp:DataList>
Fields.ascx:
<asp:Label ID="lbl" runat="server" />
<asp:TextBox id="tb4" runat="server" />
Webform.aspx
<button onclick="myFunction()">Click me</button>
[WebMethod]
public static string LoadUserControl()
{
using (Page page = new Page())
{
HtmlForm form = new HtmlForm();
UserControl userControl = (UserControl)page.LoadControl("UserControls/field.ascx");
form.Controls.Add(userControl);
using (StringWriter writer = new StringWriter())
{
page.Controls.Add(form);
HttpContext.Current.Server.Execute(page, writer, false);
return writer.ToString();
}
}
}
You are destroying the values in the user control within the following line of your ASP.NET AJAX page method:
using (Page page = new Page())
In reality, you don't have access to the Page object at all within an ASP.NET AJAX page method, because it is static and does not at all interact with the ASP.NET Page Lifecycle.
If you are only going to have one instance of your user control, then you could use jQuery selectors in your myFunction JavaScript function to pull out the values for the Label and TextBox controls (be aware of the container naming that ASP.NET uses for master pages, and the control hierarchy). You can then build up an object literal to pass to the ASP.NET AJAX Page Method via the jQuery .ajax() function.
If you are going to have multiple instances of the user control on your page, then you will be better off using a server-side solution, coupled with the ASP.NET UpdatePanel control to give the illusion of asynchronous calls to the server (read: less screen flickering, because of only a partial postback). In this case, you can have public properties of the values you want to pull out of the user control and your server-side code will have references to each of the user control instances by ID.
So bottom line is that if you do not need to actually use a client-side JavaScript function to make a call to the server, then just use the server-side button click handler to do the logic of getting values from the server-side controls. The water quickly gets muddied when trying to get values out of server-side controls that could have multiple instances.
I have textbox in asp.net where i am writting Address.
On linkbutton below i wanted to direct it to goole map.
I have below textbox:
<asp:TextBox ID="txtJobAddress" runat="server" TextMode="MultiLine" Width="95%" Height="20px"
onBlur="javascript:saveChanges('JobAddress');"></asp:TextBox>
Linkbutton as below:
<a href="http://maps.google.com/maps?q=<%=txtJobAddress.Text%>" target="_blank">
<img src="images/gmap_button.gif" alt="Map" />
</a>
but when its getting directed through anchor tag, its not catching "q" parameter.
Its giving as:
https://www.google.com/maps/preview?q=
why its not taking value of:
<%=txtJobAddress.Text%>
Please help me , how can i attach textbox string here in
http://maps.google.com/maps?q=<%=txtJobAddress.Text%>
as below
http://maps.google.com/maps?q=NewYork
The <%=txtJobAddress.Text%> will be empty on page load. Presumably your saveChanges method prompts an ajax call to save the "JobAddress"? If this is the case then a full page postback won't occur, and therefore the <%=txtJobAddress.Text%> isn't populated with the updated value as this would occur on the server. You'll want to populate the query string value client side
e.g. in your blur event you could add a call to a javascript function that updates your link:
onBlur="javascript:saveChanges('JobAddress'); updateLink()"
in your updateLink function you would update the link query string value
how to fill textbox in asp.net while i am typing in another text
.. changes in one textbox will affect in another textbox auto.. and without refreshing my page.
Ok, try this. You will need the AJAX Control Toolkit. So read the article Installing AJAX Control Toolkit 4 in Visual Studio 2010 to see how to install it in Visual Studio.
Then you need to add a ScriptManager to your ASPX page. You will need to add the following code:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
What you then need to do, is add an UpdatePanel to your page. Inside this update panel, you need to place the textbox. This means that only the controls inside the update panel will refresh, and not the whole page. To do this, add the following code:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<!--Add your Textbox Control to update here: Textbox1-->
<asp:TextBox ID="Textbox1" runat="server" ReadOnly="True"></asp:TextBox>
<asp:TextBox ID="Textbox2" runat="server" ReadOnly="True" ontextchanged="Textbox2_TextChanged"></asp:TextBox>
</ContentTemplate>
<Triggers>
<!--This is the textbox you will be typing text into: TextBox2-->
<asp:AsyncPostBackTrigger ControlID="Textbox2" EventName="TextChanged" />
</Triggers>
</asp:UpdatePanel>
The Trigger tells your page which control on the form needs to initiate the postback. Now in your .cs file, you need to add the event handler for the Textbox2 TextChanged event. Add the following code:
protected void Textbox2_TextChanged(object sender, EventArgs e)
{
// Set the text of textbox1 = textbox2
}
I hope that this helps.
No need for AJAX. JQuery is enough. The code will do it
$('#text1').bind('keyup', function(){
$('#text2').val($('#text1').val());
});
Assuming
text1 id of box writing into.
text2 textbox that text gets copied to
in .Net you will have to use client id to get the correct id so it may look like this
$('<%=text1.ClientID%>').bind('keyup', function(){
$('<%=text2.ClientID%>').val($('#text1').val());
});
Oh and wrap it up in $(document).ready as per standard. And of coures you need to include the JQuery library to your page.
No posting back or page refreshes at all. It's your lightest solution and easy to implement.
You will need to use Javascript to accomplish this. ASP.Net code runs on the server side, which means it cannot affect the page without a postback happening first. Read up on the OnTextChanged event and how to hook into it with javascript. There is a javascript library called jQuery which makes everything easier, though it isn't strictly necessary.
Use JQuery. You may need to make an AJAX call to the server if you are relying on a datasource such as a database to autofil this field.
I have a csv importroutine which imports my CSV values into Sitecore. After this proces is done i want to show the errors in an asp:literal. This is not working, and I think this is because i need an updatepanel for this in order to be able to update text after the first postback (the csv upload / import).
I made this:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</ContentTemplate>
</asp:UpdatePanel>
and coded this:
string melding = string.Format("Er zijn {0} objecten geïmporteerd.{1}", nrOfItemsImported, errors);
ViewState["Melding"] = melding;
And i have a button. On the onclick of this button I have:
Literal literal = new Literal();
literal.Text = (string)ViewState["Melding"];
literal.ID = DateTime.Now.Ticks.ToString();
UpdatePanel1.ContentTemplateContainer.Controls.Add(literal);
PlaceHolder1.Controls.Add(literal);
When i now press the button i want to update the panel so that it will show my Literal with the errormsg on it. This however isn't happening. How can this be? I'm guessing it has something to do with my viewstate, i don't see keys on the viewstate after I press the button...
#Update:
I found the problem. I was storing information in a session, however the data for the key i was storing the information in was too large. This made the Session key empty. I was posting an empty string into my literal and therefore no information was shown. I am now looking for a better way to store my data and make it show in my updatepanel. I have tried Viewstate / Session / Cookies and none of it would work the way i wanted. When I am using a viewstate I am not able to store information. The viewstate (debugmode) shows count 0 and 0 keys ... Hope someone knows a good way to make sure that my errorstring (476kb) gets stored somewhere where i can easily post it to my updatepanel's literal.
If you are using a FileUpload control, then you cannot use the UpdatePanel to asynchronously update the panel. The file upload is a synchronous event, so you'll need to update the Literal control on the page after the upload completed during the next Page_Load event.
In your code, have you tried UpdatePanel1.Update();? Even though you have added a control, you still will need to "trigger" the update to the update panel.
See here for a possible similar issue: StackOverflow
I tried this code and on click of button I am able to get the literal text on web page. Can you provide with some more details .