I'm new to ASP.NET and C# and I am having difficulty filtering my SQL data within a Repeater Control using AJAX.
I have the SQL data showing on my page but I need to find a way to filter the data using AJAX. I'm not sure if I need to add code to my .cs file or can update through JavaScript/JQuery.
The code for Repeater is below:
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1" OnItemCommand="Repeater1_ItemCommand">
<ItemTemplate>
<div class="PhysicianDetails">
<span><%#Eval("LastName")%>,</span>
<span><%#Eval("FirstName")%></span>
<p><%#Eval("Language")%></p>
<asp:Button ID="Button2" runat="server" Text="View Profile" CommandName="ViewProfile" CommandArgument='<%#Eval("ContactID")%>' />
</div>
</ItemTemplate>
</asp:Repeater>
The code for input fields and DropDownList which I want to filter the data within Repeater Control.
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div id="sidebar">
<h3>Refine Your Search</h3>
<p>Provider First Name:</p>
<input type="text" runat="server" name="name" value=" " placeholder="Search by First Name" />
<asp:Button ID="Button1" runat="server" Text="GO" />
<p>Provider Last Name:</p>
<input type="text" name="name" value=" " placeholder="Search by Last Name" />
<%--Last Name<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>--%>
<asp:Button ID="Button2" runat="server" Text="GO" />
<p>Search by Language:</p>
<asp:DropDownList ID="DropDownList1" runat="server" DataSourceID="SqlDataSource2" DataTextField="Languages" DataValueField="Languages"></asp:DropDownList>
<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:DB %>" SelectCommand="Select DISTINCT Language From Languages"></asp:SqlDataSource>
<asp:Button ID="Button3" runat="server" Text="GO" />
</div>
Any suggestions? Thanks!
Related
While working on asp.Net webforms. I realize and got many complains. dropdown selected Index is taking huge amount of time to bind another Dropdown on Selected Index Change did very simple thing to check but no luck.
<div class="col-sm-4">
<div>
<asp:Label Text="Category *" ID="LabelCompanyCategory" runat="server"></asp:Label>
</div>
<div>
<telerik:RadComboBox ID="DropDownListCompanyCategory" runat="server"
AutoPostBack="true" AppendDataBoundItems="true"
Width="100%" CssClass="form-control" CausesValidation="False"
DataSourceID="SqlDataSourceCategory" DataTextField="catDescription" DataValueField="CatId"
OnSelectedIndexChanged="DropDownListCompanyCategory_SelectedIndexChanged"
EmptyMessage="Select Category">
</telerik:RadComboBox>
<asp:RequiredFieldValidator runat="server" ErrorMessage="please select a category" Display="Dynamic"
ControlToValidate="DropDownListCompanyCategory" ForeColor="Red" ID="rfv2"></asp:RequiredFieldValidator>
<asp:SqlDataSource ID="SqlDataSourceCategory" ConnectionString='<%$ ConnectionStrings:MainConnection %>' runat="server"
SelectCommand=" select CatId, Catdescription from dbo.category"></asp:SqlDataSource>
</div>
</div>
<div class="col-sm-4" runat="server" id="DivActivity" visible="false">
<div>
<asp:Label Text="Activity *" ID="LabelCompanyActivity" runat="server"></asp:Label>
</div>
<div>
<telerik:RadComboBox ID="DropDownListActivity" runat="server" CssClass="form-control" Width="100%"
AppendDataBoundItems="false" DataSourceID="SqlDataSourceActivity" EmptyMessage="Select Activity" CausesValidation="False"
DataTextField="activity" DataValueField="id">
</telerik:RadComboBox>
<asp:RequiredFieldValidator runat="server" ErrorMessage="please select a Activity"
ControlToValidate="DropDownListActivity" ForeColor="Red" Display="Dynamic" ID="RequiredFieldValidator1"></asp:RequiredFieldValidator>
</div>
<asp:SqlDataSource ID="SqlDataSourceActivity" ConnectionString='<%$ ConnectionStrings:MainConnection %>' runat="server"
SelectCommand="select activity, id from activity where catid=#CategoryId">
<SelectParameters>
<asp:ControlParameter ControlID="DropDownListCompanyCategory" PropertyName="SelectedValue"
DefaultValue="0" Name="CategoryId" />
</SelectParameters>
</asp:SqlDataSource>
</div>
Back end Code:
protected void DropDownListCompanyCategory_SelectedIndexChanged(object sender, EventArgs e)
{
DivActivity.Visible = true;
DropDownListActivity.DataBind();
}
Telerik Components are amazingly fast, but you must configure them appropriately and use the RadAjaxManager.
Follow the example here:
http://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/multiplecomboboxes/defaultcs.aspx
if the dataset is very large and the performance is still not good enough you must configure the loadOnDemand or revert to client side data binding.
My problem is that I can't seem to get my textbox to fire the OnTextChanged event. I also checked and it doesn't seem like it is doing an autopostback despite the fact that it is set to true.
Basically, I am trying to validate the text in the textbox and either enable or disable a button based on the validation status.
Here's my code:
<asp:Panel ID="panelAccessControl" runat="server" Visible="false">
<asp:Panel ID="panelAddMileageRate" runat="server" BorderWidth="2" >
<h2>Add Mileage Rate</h2>
<asp:ScriptManager ID="scriptManagerMileageRate" runat="server" />
<asp:UpdatePanel ID="updatePanelAddMileageRate" runat="server">
<ContentTemplate>
<p>
Purpose:
<asp:DropDownList ID="ddlAddPurpose" runat="server"
AutoPostBack="true" Width="200px"></asp:DropDownList>
<br />
Country:
<asp:DropDownList ID="ddlAddCountry" runat="server"
AutoPostBack="true" Width="200px" >
</asp:DropDownList>
<br />
Effective Date:
<asp:Calendar ID="calAddEffectiveDate" runat="server">
</asp:Calendar>
<br />
Mileage Rate:
<asp:TextBox ID="txtAddMileageRate" runat="server"
AutoPostBack="true" Width="200px"
CausesValidation="true"
ontextchanged="txtAddMileageRate_TextChanged">
</asp:TextBox>
<asp:RegularExpressionValidator
ID="validatorAddMileageRate"
ControlToValidate="txtAddMileageRate" runat="server"
SetFocusOnError="true"
ErrorMessage="Only Numbers allowed"
ValidationExpression="^\d{1,20}(\.\d{0,4})?$">
</asp:RegularExpressionValidator>
</p>
</ContentTemplate>
</asp:UpdatePanel>
<p>
<asp:Button ID="buttonAddSecurityGroup" runat="server"
Text="Submit" onclick="buttonAddSecurityGroup_Click" />
</p>
</asp:Panel>
<asp:Label ID="lblStatus" runat="server" Text=""></asp:Label>
</asp:Panel>
The text box in question is txtAddMileageRate.
Set the EventName property for your txtAddMileageRate AsyncPostBackTrigger to TextChanged.
Add following codes inside your update panel and outside of ContentTemplate
<Triggers>
<asp:AsyncPostBackTrigger ControlID="txtAddMileageRate"
EventName="TextChanged" />
</Triggers>
Other sugguestion:
Have you tried looking at the AutoComplete (http://www.asp.net/ajax/ajaxcontroltoolkit/samples/autocomplete/autocomplete) control that is part of the AjaxControlToolKit? Its behaves the same way you want your solution to behave.
I have created a listbox which is populated from a db. Using modal popup and panels, this listbox appears when the select user button is clicked. When a specific user is selected from this list and the add user button is clicked, I would like to populate the labels with the specific user name and userId. I cant seem to get the labels populated. It works when i dont use modal popup. Any ideas???
my code:
<asp:Label ID="UserId" runat="server"></asp:Label>
<asp:Label ID="UserName" runat="server" Font-Bold="true" ForeColor="#97b23c" Font-Size="14px"></asp:Label>
<br />
<asp:Button ID="SelectUserBtn" runat="server" Text="Select User" />
</asp:Panel>
</td>
<td>
<asp:Panel ID="Pnl" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<h4>List Of Available Users</h4>
<asp:ListBox ID="SourceList" runat="server" DataSourceID="SqlDataSource1"
DataTextField="FullName" DataValueField="UserId" Height="160" Width="200"></asp:ListBox><br />
<asp:Button ID="OKBtn" runat="server" Text="Add User" OnClick="OkBtn_Click" />
<asp:Button ID="CancelBtn" runat="server" Text="Cancel" /><br />
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:dmsConStr %>"
SelectCommand="SELECT [UserId], [FullName] FROM [UserProfiles]">
</asp:SqlDataSource>
</asp:Panel>
<asp:ModalPopupExtender ID="MPEUserList" runat="server" TargetControlID="SelectUserBtn" PopupControlID="Pnl" OkControlID="OKBtn" BackgroundCssClass="ModalBackground" DropShadow="true" CancelControlID="CancelBtn">
</asp:ModalPopupExtender>
my code behind:
protected void OkBtn_Click(object sender, EventArgs e)
{
UserId.Text = SourceList.SelectedItem.Value;
UserName.Text = SourceList.SelectedItem.Text;
}
Actually the ModalPopupExtender is preventing the form from postback. Just don't include OkControlID property and it should work well.
<asp:ModalPopupExtender runat="server"
ID="MPEUserList"
TargetControlID="SelectUserBtn"
PopupControlID="Pnl"
BackgroundCssClass="ModalBackground"
DropShadow="true"
CancelControlID="CancelBtn">
</asp:ModalPopupExtender>
I am creating a website and am facing the following problem. I have 2 ListViews.
The first ListView is inside a user control called Sidebar.ascx:
<asp:ListView ID="sidebarListView" runat="server" DataKeyNames="Id" DataSourceID="SqlDataSourceSidebar">
<ItemTemplate>
<div class="sidebarItem" runat="server">
<div>
<asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' />
</div>
</div>
</ItemTemplate>
<LayoutTemplate>
<div class="sidebarMain">
<asp:PlaceHolder runat="server" ID="itemPlaceHolder" />
</div>
</LayoutTemplate>
</asp:ListView>
<asp:SqlDataSource ID="SqlDataSourceSidebar" runat="server" ConnectionString="<%$ ConnectionStrings:TudengiDBConnectionString %>" SelectCommand="SELECT [Id], [Name] FROM [Faculties] ORDER BY [Name]"></asp:SqlDataSource>
It has to display only the name.
The second listview is inside my Default.aspx
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:ListView ID="RecentItemsListView" runat="server" DataSourceID="SqlDataSource1"
GroupItemCount="3">
<LayoutTemplate>
<div class="recentItemsMain">
<asp:PlaceHolder runat="server" ID="groupPlaceHolder" />
</div>
<asp:DataPager ClientIDMode="Static" ID="DataPager1" runat="server" PageSize="9">
<Fields>
<asp:NumericPagerField />
</Fields>
</asp:DataPager>
</LayoutTemplate>
<GroupTemplate>
<div class="recentItems">
<asp:PlaceHolder runat="server" ID="itemPlaceHolder" />
</div>
</GroupTemplate>
<ItemTemplate>
<div class="recentItem" runat="server">
<div>
<asp:Image ID="PictureThumb" runat="server" ImageUrl='<%#CreateThumbnail((string)Eval("Picture"),130,130) %>' />
</div>
<asp:Label ID="AuthorLabel" runat="server" Text='<%# Eval("Author") %>' />
<div>
<asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' />
</div>
</div>
</ItemTemplate>
<GroupSeparatorTemplate>
<div class="groupSeparator">
</div>
</GroupSeparatorTemplate>
</asp:ListView>
</ContentTemplate>
</asp:UpdatePanel>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TudengiDBConnectionString %>" SelectCommand="SELECT [Id], [Name], [Faculty_Id], [User_Id], [Author], [Picture], [Location] FROM [Books] ORDER BY [DateAdded] DESC">
What I need is for the ListView in Default.aspx to display the data without a WHERE clause, but when an item is clicked in the Sidebar user control I need to update the Default.aspx ListView to display only the data where the [Faculty_Id] = the ID of the ListView item in the user control.
How can I get the database ID of the ListView object when I can only display the NAME field? Do I have to display the ID as well and then hide the column from users?
What is the correct way to solve a situation like this?
Thanks for helping
<asp:ListView ID="sidebarListView" runat="server" DataKeyNames="Id" DataSourceID="SqlDataSourceSidebar" OnItemCommand="sidebarListView_ItemCommand">
<ItemTemplate>
<div class="sidebarItem" runat="server">
<div>
<asp:LinkButton ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' CommandName="Select" CommandArgument='<%# Eval("Id") %>' />
</div>
</div>
</ItemTemplate>
This is what I ended up with.
Add a hidden-field to your item-template to hold the database ID.
<ItemTemplate>
<asp:HiddenField ID="hdnFacultyID" runat="server" Value='<%# Eval("FacultyID") %>' />
<div class="recentItem" runat="server">
...
</div>
</ItemTemplate>
In the appropriate ListView handlers, you can access the database ID something like this.
((HiddenField)e.item.FindControl("hdnFacultyID")).Value
What you can do is to add an attribute to the NameLabel control.
Call it for example myID:
<asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' myID='<%# Eval("ID") %>'/>
then access that attribute from your code to get your ID:
string ID = NameLabel.Attributes["myID"];
I need to add a calendar control with its associated buttons in asp.net with C#.
I have the code as below.
<asp:TextBox ID="txtDateFrom" CssClass="text-small" runat="server"
BorderWidth="1px" ToolTip="Click to choose date"></asp:TextBox>
<asp:Label ID="lblFromError" CssClass="Error" runat="server"
Text="*" Visible="False"></asp:Label>
<asp:Label ID="lblTo" runat="server" Text="To" ForeColor="Black"></asp:Label>
<asp:CalendarExtender ID="txtDateFrom_CalendarExtender" runat="server"
TargetControlID="txtDateFrom"
Format="yyyy-MM-dd" TodaysDateFormat="yyyy d, MMMM">
</asp:CalendarExtender>
You will need to add an ImageButton and set the CalendarExtender's PopupButtonID property to the ID of the ImageButton.
This is from the AjaxControlToolkit's sample web site:
<ajaxToolkit:ToolkitScriptManager runat="Server" ID="ScriptManager1" />
<b>Calendar with an associated button:</b><br />
<asp:TextBox runat="server" ID="Date5" />
<asp:ImageButton runat="Server" ID="Image1"
ImageUrl="~/images/Calendar_scheduleHS.png"
AlternateText="Click to show calendar" /><br />
<ajaxToolkit:CalendarExtender ID="calendarButtonExtender" runat="server"
TargetControlID="Date5" PopupButtonID="Image1" />
you can use the JQuery plugin for Calendar. Check this topic
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#datepicker").datepicker();
});
</script>
<div type="text" id="datepicker"></div>
Do like this
1. Add a ToolkitScriptManager
2. Add a TextBox Control
3. Add a CalendarExtender
Here is the complete code :
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:TextBox ID="txtStartDate" runat="server"></asp:TextBox>
<asp:CalendarExtender
ID="CalendarExtender1"
TargetControlID="txtStartDate"
runat="server" />