I have a website that uses the AjaxControlToolkit. I'm making some parallel iPhone-friendly pages for the site, and since Ajax isn't very good-looking in a mobile browser, I'm trying to phase it out. One such Ajax tool is the CalendarExtender, which I replaced with the iPhone's Date Picker using this method.
The second tool I need to replace is the AutoCompleteExtender. It functions as a simple dropdown menu when the user types text into a text box. The purpose is for searching functionality; I have a large list of contacts, and when the user starts to type in a name or company name the extender appears with a list of suggestions based on what the user typed in so far.
Here's what it looks like in Ajax:
<asp:TextBox ID="NameTextBox" runat="server" AutoComplete="off" AutoPostBack="True"
OnTextChanged="NameTextBox_TextChanged" Width="95%" Font-Size="Medium"></asp:TextBox>
<cc1:AutoCompleteExtender ID="NameTextBox_AutoCompleteExtender" runat="server" CompletionInterval="250"
CompletionListCssClass="autocomplete_completionListElement" CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"
CompletionListItemCssClass="autocomplete_listItem" DelimiterCharacters="" Enabled="True"
MinimumPrefixLength="2" ServiceMethod="GetCompletionList" ServicePath="" TargetControlID="NameTextBox"
UseContextKey="True">
</cc1:AutoCompleteExtender>
What is a good way to replace this with either a common piece of iPhone UI (such as the UIPickerView), or a more general mobile-friendly piece of HTML?
I would use a standard HTML element to maintain user experience.
For the autocomplete part I would use some javascript or an jQuery plugin. You could also choose to use Autocomplete from jQuery UI: http://jqueryui.com/demos/autocomplete/.
Related
I am trying to change URL of website and need help for the same. The scenario is that I have a search engine for student search and have different criteria for refine search. By default I am showing all the student data on homepage and when we use search the result is displayed on the same page, so URL of the page does not change.
My search criteria are by date of join(1 month,2months,6months,1Yr) and state they belong from. I have added radio button for refine search, so on "OnCheckedChanged" event the data gets populated on the page. So now how do I change the URL so as to show something like, say I have website www.xyz.com and need to show www.xyz.com/bydate/1month or www.xyz.com/bystate/LA. Have googled many links but not able to understand how to start.
Below is snippet of my code
<asp:DataList ID="dlJoin" CssClass="slider" r RepeatColumns="1" RepeatDirection="Vertical" runat="server" OnItemDataBound="dlJoin_ItemDataBound">
<ItemTemplate>
<label style="text-align: left; margin-left:15px;">
<asp:RadioButton ID="rddlJoin" CssClass="radiobooking" Checked="false" AutoPostBack="true" OnCheckedChanged="rddlJoin_checkchanged" GroupName="rdGroupTag" runat="server" onKeyPress="return suppress(event);" /><%#Eval("Name")%>
</label>
<asp:Literal runat="server" Visible="false" ID="litdlJoin" Text='<%#Eval("Value")%>'></asp:Literal>
</ItemTemplate>
</asp:DataList>
I would do this with Javascript and not worry about redirecting on the server side(assuming that all your clients should have javascript). You can do a "pure" redirect by using something like
window.location.href = "http://xyz.com/bydate/1month";
This has equivalent behavior as to if you clicked on a link to that URL.
If you're wanting to use Ajax and make things be a bit nicer looking(and no full page loads) you can use a combination of # URL changes and using a tool like jQuery to easily load a div or some such from another URL
I'm using a CalendarExtender control with the help of <img> to populate a TextBox with a date. I am using this in EditItemTemplate of GridView. But when I click on the image, the calendar control is not poping up.
I have used this CalendarExtender control in four or five other places (in this project) also. Everywhere else it is working fine. I have compared the code from the well working version to this code. No difference at all.
I have written the code like below:
<EditItemTemplate>
<asp:TextBox ID="txtDateDelivered" runat="server"
Text='<%# Bind("DateDelivered","{0:dd/MM/yy}") %>'
CssClass="DateTextBoxInGridView" >
</asp:TextBox>
<asp:CalendarExtender ID="calexDateDelivered" runat="server"
Format="dd/MM/yy"
TargetControlID="txtDateDelivered"
PopupButtonID="calDateDelivered">
</asp:CalendarExtender>
<img src="Images/calendar.gif"
id="calDateDelivered"
alt="Calendar" />
</EditItemTemplate>
Can anybody please tell where could be the problem?
how many row do you have in grid? also probably you have more than one image with such id
The image tag which you have used is not a server control.
It is simple html control, this is the reason why the calender control does not reconise this image control..
Try using asp.net image button over here instead of .
It should work then.
cheers....
Rahul C.
I am using RadListBox and RadDateTimePicker in a traditional C# ASP.Net 3.5 web application, and I have labels like this:
<asp:Label ID="lblStartDate" runat="server" Text="Start Date" AssociatedControlID="dtpStartDate" />
<telerik:RadDateTimePicker ID="dtpStartDate" runat="server">
</telerik:RadDateTimePicker>
The label doesn't connect to the date picker with a for attribute because the picker is a complex control and it can't work out which element to target. Telerik propose a JavaScript solution to this, but that seems unwieldy to me and also depends on client side scripting.
Is there a better way which will provide a reasonable level of accessibility? Either wrapping the Telerik solution somehow or an altogether alternative approach?
Yep, the Telerik picker is a composite control as well and similar javascript to attach the label to the date input should do the trick. To reference the input field, use the get_dateInput() property from the client API of the picker.
I'm using markdownsharp with my asp.net forms website.
I want to use MarkItUp as my editor and have found a straight forward article on how to integrate with MVC which seems straight forward enough: http://rsolberg.com/2010/09/asp-net-mvc-markitup-rich-text-editor/
However, how do I do this with a forms website?
How do I get the MarkItDown Textarea on a postback and get the preview to work as well?
Place the Javascript and CSS file links in the head portion of the page just as you would with MVC. Then in your form, place a TextArea control. Set the rows and columns as needed.
<asp:TextBox ID="txtEditor" runat="server" TextMode="MultiLine" Columns="40" Rows="5" Text="" />
Then use JQuery to enable to functionality.
$(document).ready(function() {
$('<%=txtEditor.ClientID%>').markItUp(mySettings); });
Then on PostBack the contents of the editor will be available in the Text property of the TextBox control.
txtEditor.Text
This is not the only way to do this, you could also use a HTML TextArea control with a runat="server" attribute. Use whatever your personal preference is.
I've just started tinkering with the ASP:Login control, and want to edit its appearance. So I did the following:
<asp:login ID="login" runat="server" onauthenticate="Authenticate">
<LayoutTemplate>
<asp:TextBox ID="UserName" runat="server"></asp:TextBox>
<asp:TextBox ID="Password" runat="server" TextMode="Password"></asp:TextBox>
</LayoutTemplate>
</asp:login>
Despite the fact that I have no <table> tag anywhere in the document, once I preview the page and view the source, it very clearly shows a <table> there. Ah! How in the world do I prevent this crazy behavior, or am I forced to use tables for layout instead of CSS?
You can set it not to use tables without third party extensions, just make sure you use the
<LayoutTemplate>
</LayoutTemplate>
For laying out your HTML/form inside the control, then set the attribute on the Login that controls the outer table to false.
RenderOuterTable="false"
That's it, no tables :)
You can use the CSS Friendly control adapter for the login control to change it.
http://www.asp.net/CSSAdapters/Membership/Login.aspx
There's a number of things you can do.
The easiest would be to use the Css Control Adapters toolkit's version of the Login control, although it hasn't been updated in a while and I haven't used it recently, so maybe it's not a great option anymore, I'm not sure.
Otherwise you could try creating your own ITemplate and setting it as the property of the LayoutTemplate for the Login control.
Alternately you could rewrite the generated HTML with an IHttpHandler, or even redo it on the client with something like jQuery dom replacement.