I've been struggling all day with Ajax, and have no luck. I know this question title has been asked before, but I've been pouring over many other posts about this, and none have the solution for me. Let's start with the simplest scenario.
Having installed Ajax Toolbox, Version 15.1, I create a new web application, delete the content from the default page, drop a textbox onto it, and then try to drop an Ajax AutoCompleteExtender onto the textbox. Result = no effect on the webpage at all. The Toolbox has all the AjaxControlToolkit.15.1, but none of the Ajax controls can be dragged onto any forms. (Other controls can be dragged correctly - only the AjaxControlToolkit controls have no effect)
Moving on to the more complicated scenario, I've tried to implement this manually, by adding a reference to the AjaxControlToolkit to the project - which requires a HDD search to find the dll, and adding a reference to this.
After manually adding the reference, then I can create a new page, and by editing the aspx source, I can create an AjaxCompleteExtender which builds and runs, but does not function correctly. If I connect the AjaxCompleteExtender to a webservice, it does nothing. If I connect it to a local function, it gives a strange list of autocomplete entries as follows...
<
D
O
C
T
Y
P
E
h
t
m
... etc...
I have put breakpoints in my ServiceMethod functions, and they never get called.
Here is the webpage for the version with the in-page function.
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
<asp:TextBox ID="txtBox" runat="server"></asp:TextBox>
<asp:AutoCompleteExtender ServiceMethod="AutoCompleteSymbol"
MinimumPrefixLength="2"
CompletionInterval="100" EnableCaching="false" CompletionSetCount="10"
TargetControlID="txtBox"
ID="AutoCompleteExtender1" runat="server" FirstRowSelected = "false">
</asp:AutoCompleteExtender>
And here is the code behind this page.
namespace Jug2013
{
public partial class TestForm : System.Web.UI.Page
{
[WebMethod]
[ScriptMethod]
public static string[] AutoCompleteSymbol(string partial, int count)
{
var retval = new List<string>();
retval.Add("Hello");
retval.Add("Hello2");
retval.Add("Hello3");
return retval.ToArray();
}
}
}
I have checked the code of this version and the web service version many times against online examples, and tried many different variations that I've found in sample code. In final desperation, I have uninstalled and reinstalled Ajax, but still no luck anywhere.
Related
I am working on a DotNetNuke project where I have to show some images from the SQL server database on the front end as a slider. I have enclosed the slider markup in asp:ListView control on ASCX page and have assigned a dataset as the data source for the asp:ListView in my code behind file.
The code is working fine but I need the images to be shown as a slider. Currently, the 2nd image is shown right at the bottom of the first image and 3rd image after the 2nd one. I want them like a slider which slides from right to left or vice versa with navigation buttons on the left and right side.
Here is my ASCX code:
<asp:ListView ID="lvFeaturedSlider" runat="server" class="full">
<ItemTemplate>
<div class="home-slide">
<a href="#">
<span class="project-title-large">MARRIOT HOTEL LOUNGE</span>
<img src="http://localhost:52829<%# Eval("Image") %>" alt="">
</a>
</div>
</ItemTemplate>
</asp:ListView>
And here is my code behind code:
private void BindSlider()
{
ProjectsController objController = new ProjectsController();
DataSet ds = new DataSet();
ds = objController.GetFeaturedProjectSlider();
if (ds.Tables[0].Rows.Count > 0)
{
lvFeaturedSlider.DataSource = ds.Tables[0].DefaultView;
lvFeaturedSlider.DataBind();
}
else
{
lvFeaturedSlider.DataSource = null;
lvFeaturedSlider.DataBind();
}
}
The navigation buttons on left and right are appearing when I hard code the markup outside ItemTemplate. But upon binding, they are not appearing and images are also not showing like a slider. I have tried enclosing the code inside ItemTemplate in a foreach statement but I can't figure out the exact format of how the items are located on ASCX page.
I know that stackoverflow frowns on answering questions by changing the subject, but ... I think that's appropriate here.
First question: Are you doing this in your theme(skin) file? If you are that's not the normal way of doing this.
Second question: Are you storing images in the DNN database? Generally that's frowned on, mainly for performance issues.
Now the right way to go about this is to install a module in your DNN installation and use it's UI and tools to configure the slider. All of that should be part of the module. There are some very good slider modules, both commercial and open source. Google, or check the DNN Store.
Now to your question. Your repeater creates a series of divs on your page, one for each image. That is why you see all of the images in a vertical layout. If you want to "slide" them, you need to add some functionality to do that. They way that is done is by adding some javascript or jQuery to turn that set of divs into a slider. Google 'jquery slider' for a lot of choices.
If you use a module that's already been developed, all of this stuff will have been done for you. You only need to supply the images, and perhaps other stuff, too.
I am trying to figure out how I can display a series of images returned as a DataSet from an SQL Query in a DataLayer (using 3-Tier architecture in ASP.NET, using C# code behind) so that the images appear as if in a grid or table. I have tried to research similar questions, but I always end up missing some vital piece that would meet my specific intentions. I have tried GridView and can get the images returned to display, but only in a single vertical column – I want these images to display from left to right, and flow through as many rows as necessary to complete the set of images, which GridView seems to be restricted from doing. I came across information regarding DataLists to try to do just that, but cannot seem to get things quite right to make DataList control to actually display anything as yet. I know from my research that with DataList (which I have little actual experience with) the Repeat Horizontally and Repeat Flow attributes can help display the images in the format I am looking for (left to right, top to bottom). Only one column of distinct data is being returned in the dataset (with several rows depending on the SQL query results), and I have a rather specific SQL statement that is essential to this returned dataset, so I need this to stay in-tact. I have call statements that trickle down to the data layer from the business and presentation layers, so somehow I need to incorporate the initial call statement in the presentation layer into whatever coding is needed to make the dataset returned display the images through the desired control, which seems to lean heavily towards a DataList control. Most code I find either jumps around to other possible coding, which doesn’t help me, or leaves out some things that may be essential to making things function fully. So, can anybody provide a more complete coding picture for both the asp.NET/HTML coding and the C# code behind that might get things working?
I am using Visual Studio 2012, and an MS Access Database to test things. My site is also set up using MasterPages if this matters, though the page in question that I am attempting to display images to is not a MasterPage within the website.
Code Samples for what I’ve tried:
GridView attempt:
ASP.NET Page:
<asp:GridView ID="grdSwatches" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:ImageField DataImageUrlField="SwatchImg" HeaderText="Available Colors">
</asp:ImageField>
</Columns>
</asp:GridView>
C# Code Behind:
protected void Page_Load(object sender, EventArgs e)
{ //Initiate Binding of GridView
//Ensures updated Swatch Data appears in GridView
BindSwatchesGridView();
}//End Page_Load() Constructor
/*This method calls the data layer to fetch a list of all Distinct Swatches related to the CatalogID
then binds the list to the GridView. It will also store the DataSet in the cache.*/
private ds13thStytchTestDatabase2 BindSwatchesGridView()
{
/*Establish the path of the Database file 13thStytchTestDatabase2.accdb via server
object MapPath() and declare new myDataLayer object*/
string tempPath = Server.MapPath("~/App_Data/13thStytchTestDatabase2.accdb");
clsDataLayer myDataLayer = new clsDataLayer(tempPath);
/*Call BusinessLayer to get list of all relavant Distinct Swatches and set it to variable
passing CatalogID as a parameter.*/
ds13thStytchTestDatabase2 swatches = myBusinessLayer.FindSwatches(CatalogID);
//Fills GridView with data from Database table tblSwatches
grdSwatches.DataSource = swatches.tblSwatches;
//Bind Swatch List to GridView then store list in Cache
grdSwatches.DataBind();
Cache.Insert("SwatchesDataSet", swatches);
//Return Completed Apps List Data
return swatches;
}//End of BindSwatchesGridView() Method
Call statement from BindSwatchesGridView to BusinessLayer’s FindSwatches(CatalogID) Method calls a similar Method in the DataLayer where the SQL Statement resides and returns the dataset results up through the BusinessLayer and back to the BindSwatchesGridView Method. From here the GridView on the ASP.NET webpage is populated as a single verticle column at Page Load as per the BindSwatchesGridView() call in the Page_Load section.
DataList attempt (vers 1):
This attempt, while seeming to be the more versatile solution, is where things have gotten a little muddled…
One potential solution offered to the nearest similar problem I have encountered supplied the following:
<asp:DataList ID="dlImages" runat="server"
RepeatColumns="5"
RepeatDirection="Horizontal"
RepeatLayout="Flow">
<ItemTemplate>
<asp:Image ID="imgPrettyPic" runat="server" />
</ItemTemplate>
</asp:DataList>
if (!Page.IsPostBack())
{
dtImageURLs = GetImageUrlsFromDB();
dlImages.DataSource = dtImageURLs;
dlImages.DataBind();
}
Along with:
protected void dlImages_ItemDataBound(object sender, System.Web.UI.WebControls.DataListItemEventArgs e)
{
Image TargetImage = default(Image);
DataRow DataSourceRow = default(DataRow);
DataSourceRow = ((System.Data.DataRowView)e.Item.DataItem).Row;
TargetImage = (Image)e.Item.FindControl("imgPrettyPicture");
TargetImage.ImageUrl = DataSourceRow.Item("ImageURL").ToString;
}
(Posted by user Dillie-O on Apri 8 ’09 at 22:25) (see ASP.Net Display Images in a GridView span across columns and rows? Using C# for further reference)
Since I have a 3-tier architecture and a specific SQL Statement already set up in my DataLayer, I altered the above solution offerings to better fit my coding (I thought):
ASP.NET Page:
<asp:DataList ID="dlSwatches" runat="server"
RepeatColumns="5"
RepeatDirection="Horizontal"
RepeatLayout="Flow">
<ItemTemplate>
<asp:Image ID="imgSwatches" runat="server" />
</ItemTemplate>
</asp:DataList>
C# Code Behind (incomplete):
protected void Page_Load(object sender, EventArgs e)
{
/*Call the FindSwatches() method in the BusinessLayer, passing the specified parameter and set this to the
DataSet.*/
ds13thStytchTestDatabase2 dsFindSwatches = myBusinessLayer.FindSwatches(CatalogID);
dlSwatches.DataSource = dsFindSwatches;
dlSwatches.DataBind();
}//End Page_Load() Constructor
protected void dlSwatches_ItemDataBound(object sender, System.Web.UI.WebControls.DataListItemEventArgs e)
{
Image TargetImage = default(Image);
DataRow DataSourceRow = default(DataRow);
DataSourceRow = ((System.Data.DataRowView)e.Item.DataItem).Row;
TargetImage = (Image)e.Item.FindControl("imgSwatch");
TargetImage.ImageUrl = DataSourceRow["ImageUrl"].ToString();
}//End of dlSwatches_ItemsDataBound() Method
This method when tried ended up not really being accessed when the webpage was run. Instead, based on Debugging, there seems to be no direct call to this method tied to the coding suggested for the Page_Load constructor. So, I made several failed attempts to alter this dlSwatches_ItemDataBound() Method to see if anything else would work. Nothing has… End result: no images displayed on web page.
DataList attempt (vers 2):
I even attempted to blend the BindSwatchesGridView() into a BindSwatchesDataList() method:
ASP.NET Page (unchanged):
<asp:DataList ID="dlSwatches" runat="server"
RepeatColumns="5"
RepeatDirection="Horizontal"
RepeatLayout="Flow">
<ItemTemplate>
<asp:Image ID="imgSwatches" runat="server" />
</ItemTemplate>
</asp:DataList>
C# Code Behind:
protected void Page_Load(object sender, EventArgs e)
{
//Initiate Binding of DataList
//Ensures updated Swatch Data appears in DataList
BindSwatchesDataList();
}//End Page_Load() Constructor
/*This method calls the data layer to fetch a list of all Distinct Swatches related to the CatalogID
then binds the list to the DataList. It will also store the DataSet in the cache.*/
private ds13thStytchTestDatabase2 BindSwatchesDataList()
{
/*Establish the path of the Database file 13thStytchTestDatabase2.accdb via server
object MapPath() and declare new myDataLayer object.*/
string tempPath = Server.MapPath("~/App_Data/13thStytchTestDatabase2.accdb");
clsDataLayer myDataLayer = new clsDataLayer(tempPath);
/*Call BusinessLayer to get list of all relavant Distinct Swatches and set it to variable
passing CatalogID as a parameter.*/
ds13thStytchTestDatabase2 swatches = myBusinessLayer.FindSwatches(CatalogID);
//Fills DataList with data from Database table tblSwatches
dlSwatches.DataSource = swatches.tblSwatches;
//Bind Swatch List to DataList then store list in Cache
dlSwatches.DataBind();
Cache.Insert("SwatchesDataSet", swatches);
//Return Swatch List Data
return swatches;
}//End of BindSwatchesDataList() Method
Again - End results yielded no images being displayed on the web page
Perhaps I am expecting too much from piecemealing solutions I find, trying to fit them into things that already make sense to me (trial and error as it were), and perhaps there is yet a totally different solution that would incorporate the calls to the database through the 3-tier architecture in place instead of gutting it to start something from scratch. Maybe there’s a completely different way of going about all this. My experience is limited in alternative methods that would meet my needs so far, so I welcome any suggestions along with some in-depth code to demonstrate the solutions so my understanding may be more complete. Let me know if there is more information needed for this problem and I’ll try to add it as needed.
I have tried searching for a solution for this, but nothing seems to be working for me. My problem is pretty straightforward though (so, I think).
I am using foundation with asp webforms and have a reveal modal window that fires when the page is loaded.
Code:
$(document).ready(function () { $('#myModal').foundation('reveal', 'open') });
The above works fine, however, any time I put an ASP button inside the modal (the one I am using, btnReset, redirects to a new page), clicking on it will not fire the event attached to it.
Code:
<div id="reset">
<div class="large-2 columns">
<asp:Button ID="btnReset" runat="server" Text="Reset"
OnClick="btnReset_Click" OnClientClick="btnReset_Click"
CssClass="button small radius alert" />
</div>
</div>
Code for btnReset:
protected void btnReset_Click(object sender, EventArgs e)
{
HttpCookie cookie = Request.Cookies["userInfo"];
cookie.Expires = DateTime.Now.AddDays(-1);
Response.Cookies.Add(cookie);
Response.Redirect("LogIn.aspx");
//Server.Transfer("LogIn.aspx");
}
I'm sure I am missing some here, but I'm just stumped on what I am doing wrong. How can I get an ASP button and have it fire it's event when it is inside a modal?
I know this was asked a month ago, but I ran into the same problem and found this question with no solution. I have found the solution over at the Foundation forums and thought I would answer it here for future reference.
This issue is with how foundation adds your modal. When you look in your dev tools you will see that the modal, when called, is outside the form making the asp buttons unable to access the code behind.
This means we need to append the the modal to the form so that the buttons will access the code behind.
I tried several different ways to achieve this in the javascript using appendTo, but found the easiest method was the make foundation use the root element form.
$(document).foundation('reveal', { rootElement: 'form' });
I found that here: Elena Zhdanova solution
For anyone new stumbling across this issue you can now add this to your reveal modal and your webforms buttons will work as intended inside the modal.
data-append-to="form"
The documentation is here. And the credit goes to this old forum post by Lars Jensen at the bottom of the thread here
with scrolling list box, the page will refresh(unwanted).
this problem is only in chrome (Version 27). In other browsers it works properly.
.aspx file:
<asp:Label runat="server" ID="label1" ></asp:Label>
<asp:ListBox ID="ListBox1" runat="server"
OnSelectedIndexChanged="ListBox1_SelectedIndexChanged"
DataValueField="f1" DataTextField="f2" DataSourceID="SqlDataSource1"
Rows="15" AutoPostBack="true" >
</asp:ListBox>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
SelectCommand="sp1" SelectCommandType="StoredProcedure"
ConnectionString="<%$ ConnectionStrings:ConnectionString1 %>">
</asp:SqlDataSource>
.cs file :
protected void ListBox1_SelectedIndexChanged(object sender, EventArgs e)
{
label1.Text = ListBox1.SelectedItem.Text;
}
We've noticed this unfortunate bug only recently, on a page that had been working without issue for a very long time. It is specific to Google Chrome version 27, and I am currently using version 26.
The bug:(clicking anywhere inside of the control - the scroll bar being the focus of the issue - causes a complete postback [provided you set the AutoPostBack attribute to true])
The bug could be at a higher level of scripting, and I'm not sure it affects all of our listboxes. It seems unlikely as we have many, on multiple pages, and we would be getting calls if all of them exhibited this behavior.
Our solution contained two options, with another option being less classy:
1) Impractical: to wait for an update for Google Chrome, or use version 26 explicitly. This is impractical for a large userbase which doesn't have permissions for installation or the ability to roll back to a previous version. It also doesn't work if you, for whatever reason, absolutely must test against the latest version of Chrome.
2) We have access to Telerik controls which enable us to use RadListBox instead, slightly more viewstate overhead which may not be a good solution for you, if it's an option at all. This was the option we chose, as the RadListBox escapes the problem behavior.
A distant third, substantially less appealing solution: Find some other alternative for displaying your data, such as a dropdown list, possibly with a secondary subselecting control if you're dealing with a particularly large set of information. It's more work, in the interim, and you would likely wish to revert your changes when a fix was made.
I know all of these are mediocre solutions, but they're possible workarounds. Sorry if this isn't much help.
This is a bug in some Chrome versions (as others have noted). I was getting the same behaviour on Chrome on an earlier v27 release.
You should upgrade Chrome to the latest version: my version is currently v 27.0.1453.116 m and the problem appears to be fixed in this release.
This is an issue in v27 of Chrome, updating to the latest version should fix this.
http://googlechromereleases.blogspot.co.uk/2013/06/stable-channel-update_18.html
The JavaScript function mypostback doesn't work if the listbox has SelectionMode="Multiple"
Disable the AutoPostBack for the ListBox, use the onClick attribute of the ListBox to run a javascript doing __doPostBack for it. It is a work around. I think Google should fix this Chrome bug (ver 27, and 28, ...). It, AutoPostBack True of ListBox, works fine at all other browsers. TY Pien.
<script type="text/javascript">
function mypostback(id, parameter)
{
__doPostBack(id, parameter)
}
</script>
<asp:ListBox ID="lstbox_id" runat="server" onclick="mypostback('lstbox_id','')">
</asp:ListBox>
It's definitely a bug in Chrome (e.g. v.27.0.1453.110 m). See this answer too.
I am modifying an existing application developed by another programmer using ASP.NET Web Forms and C#.
I have to add to a simple TextBox the autocomplete functionality. When the user starts to input something into the TextBox, the TextBox should show suggestions based on the data stored in a database. The suggestions have to be based just on the prefix (the initial part of the words already inputed).
I found many examples based on the autocomplete AJAX extender but it is based on fetching data froma Web Service. What are the steps and required methods and operations in order to fulfill this task?
Link you posted is pretty much explains everything that needs to be done . Follow this video.
If you need to pass some additional parametes check this example.
Steps.
1.Add Textbox and Ajax Extender to page and specify target id as textboxid .Specify web service name to extender
2.Implement webservice as in link above and test it in browser .
3.In webservice write the way you want to retrieve data . You will be returning a string[] .
Instead of creating webservice you can even use webmethod attribute to a regular method check following
http://www.ajaxtutorials.com/ajax-tutorials/using-autocomplete-in-the-ajax-toolkit/
http://allwrong.wordpress.com/2007/03/13/ms-ajax-autocomplete-extender-using-a-page-method/
You can simply define a method on the page codebehind, decorate it with the [WebMethod] attribute and then set it on the ServiceMethod property of the dropdown extender.
The method must implement the logic to retrieve/filter the results and its signature must match the examples (e.g.: public string[] MyMethod(string prefixText, int count)).
The Prerequisite is to have "AjaxControlToolKit".
First we need to place the textbox in the updatepanel so that partial postback can happen thereby eliminating the entire page reload.
Use the ajax autocompleteExtender using which we can invoke a service method which is having DB call which will fetch data and populate the textbox.
<asp:UpdatePanel ID="pnlAcct" runat="server">
<ContentTemplate>
<asp:TextBox ID="txtAcctNum"></asp:TextBox>
<asp:AutoCompleteExtender ID="AutoCompleteExtenderAccount" runat="server" MinimumPrefixLength="1" ServiceMethod="GetSourceAccount" ServicePath="~/AutoComplete/AutoComplete.asmx"
TargetControlID="txtAcctNum" Enabled="True" CompletionSetCount="20" CompletionInterval="1000"
EnableCaching="true">
</asp:AutoCompleteExtender>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="txtAcctNum" />
</Triggers>
</asp:UpdatePanel>
The service call can be done by adding a WebService(.asmx file) and writing the below code in .asmx.cs file.What ever data available in the string will be displayed below the textbox.
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public string[] GetSourceAccount(string prefixText, int count)
{
List<string> lstSimilarSource = new List<string>();
//Service call and populating the string
lstSimilarSource = Autocomplete.GetSimilarSource(prefixText, "ACCOUNT");
return lstSimilarSource.ToArray();
}