I want to apply paging using datalist with out page refresh in asp.net
My Code Structure is below.
<asp:UpdateProgress ID="updProgress" AssociatedUpdatePanelID="UpdatePanel1" runat="server">
<ProgressTemplate>
<div id="something">
<img alt="progress" src="loader.gif" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
Paging Items
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="dlPagingg" EventName="ItemCommand" />
</Triggers>
</asp:UpdatePanel>
<asp:DataList ID="DataListProducts" runat="server" OnItemDataBound="DataListProducts_ItemDataBound">
<ItemStyle CssClass="listing-pro-img-main" VerticalAlign="Top" />
<ItemTemplate>
Product List Here
</ItemTemplate>
</asp:DataList>
Issue: When user click on page number in paging list, paging change with appropriate page number , but products in datalist product not refresh.
i have also debug that all code file getting product and assign to datasource property of DataListProducts like,
DataListProducts.DataSource = {New Product List}
DataListProducts.DataBind();
Can you please advise me where issue is?
You can use Jquery DataTable
To wrap your table on the client side and then get the option to page, sort and filter you columns.
No refresh, no postback and no url changes.
Related
I have web page which is ContentPage of MasterPages and it has 2 ListBoxes with many items inside.
The code for the 1st Listbox is
<div id="electrics" class="panel-collapse collapse">
<div class="panel-body">
<asp:UpdatePanel ID="UpdatePanel7" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:ListBox ID="ListBox5" runat="server" CssClass="form-control" Font-Size="12pt" AutoPostBack="True" OnSelectedIndexChanged="ListBox5_SelectedIndexChanged"></asp:ListBox>
<asp:UpdateProgress ID="UpdateProgress3" runat="server" AssociatedUpdatePanelID="UpdatePanel7">
<ProgressTemplate>
<asp:Image ID="Image1112" runat="server" ImageUrl="images/ajax.gif" />
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ListBox5" />
</Triggers>
</asp:UpdatePanel>
</div>
</div>
The code for the second is the same only change the ID.
When i click the listbox the code open a webpage with parameters from the selected listbox.
The page shows OK and the parameters are showing correct.
When I press back and select the second Listbox, it fires again the first listbox so the new webpage shows the same parameters from the first listbox.
This is the problem, the second listbox is not firing, its only fires the first clicked.
I have to reload the page to be able to click the second listbox.
I have following code:
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSave" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Button ID="btnSave" runat="server" Text="Submit"/>
<asp:Panel ID="pnlMyView" runat="server">
<asp:GridView Control here...
</Panel>
<asp:Panel ID="pnlInfo" runat="server" Visible="False">
<div>
Some information...
</div>
</Panel>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
Update in progress...
</ProgressTemplate>
</asp:UpdateProgress>
<script language="javascript" type="text/javascript">
$(window).load(function() {
$("input:submit[id$='btnSave']").click(function() {
//jQuery code to validate gridview enteries...
})
});
</script>
Steps:
1.Refresh the page Or load page first time and clicked on Submit button to validate the entries in GridView
2.Validation done properly and save changes to database.
3.Made some changes in gridview entries and clicked on Submit button
4.Validation didn't take place and save the entries(i.e. wrong entries) in database.
5.Refresh the page i.e. pressing F5 Now everything working fine.
How to resolve issue at step 4.
-----------------PS----------------
Actually I have two panel pnlMyView and pnlInfo.So on page load I only make visible to pnlMyView and other is invisible.
Once if i move to pnlInfo and come to back on pnlMyView and submit Nothing validation take place.
Thanks
The problem is that your HTML gets reloaded and thus the event handler on the button gets lost.
You could try the following code which assures you that the handler stays in place:
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div id="root">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSave" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Button ID="btnSave" runat="server" Text="Submit"/>
<asp:Panel ID="pnlMyView" runat="server">
<asp:GridView Control here...
</Panel>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
Update in progress...
</ProgressTemplate>
</asp:UpdateProgress>
</div>
<script language="javascript" type="text/javascript">
$(window).load(function() {
$("input:submit[id$='btnSave']").on("click", ".root", function() {
//jQuery code to validate gridview enteries...
})
});
</script>
What this does is register the handler differently. You need to wrap the UpdatePanel inside a div with class root. Then you register the handler like this:
$("input:submit[id$='btnSave']").on("click", ".root", function() {});
This tells jQuery to registere a handler on an element called root, but only execute it when the input:submit... is executed.
Since the div is not removed, it will still detect the handler even after you have replaced the HTML.
These types of events are called delegated events. You can read a more thorough explanation in the jQuery documentation: http://api.jquery.com/on/
Better use OnClientClick property of Button control:
<asp:Button ID="btnSave" runat="server" Text="Submit" OnClientClick="return validate()" />
function validate(){
//jQuery code to validate gridview enteries...
//if validation isn't succeeded return false, otherwise return true
}
Hey friends I got the solution.I used live event and now everything is working fine.
$("input:submit[id$='btnSave']").live("click", function(event) {
Thanks a all for your response
I want to reload the image on a button click without refreshing the page. For now, the image is changing when i click on "Refresh Image" link button. But the PAGE REFRESHES..
Code :
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:TextBox ID="txtCaptchaInput" BorderStyle="Solid" Style="vertical-align: top" runat="server" Width="106px" BorderWidth="1px"></asp:TextBox>
<asp:Image ID="img_captcha" runat="server" Height="32px" ImageUrl="~/captchaJPEG.aspx" Width="108px" />
<asp:LinkButton ID="captcha_refresh" runat="server">Refresh Image</asp:LinkButton>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="captcha_refresh" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
What am i doing wrong with this code ? I am using asncpostbacktrigger and assigning a control id and event name to it. Which to my knowledge is a correct approach. Please advice.
Remove Triggers from UpdatePanel1, Add Click event handler to captcha_refresh Link button. Inside that event call UpdatePanel1.Update();
i'm kinda new in web programming,
i'm trying to design a search page.
i want to creating few radio buttons where each click on a radio button will show a div
contains the related search div's.
and from there to do the query to the database(not related to the post)
how can i do that ?
tried to search for it , and didn't get good answer.
i want that the change of the page will be in server side and not the client side.
p.s.
i have been working with ajax control kit so far..
thanks for the help.
You just need an UpdatePanel, radio buttons and a MultiView control.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div>
<asp:RadioButton ...
<asp:RadioButton ...
</div>
<asp:MultiView ID="mvAll" runat="server" ActiveViewIndex="-1">
<asp:View ID="vwFirst" runat="server">
</asp:View>
<asp:View ID="vwSecond" runat="server">
</asp:View>
...
</asp:MultiView>
</ContentTemplate>
</asp:UpdatePanel>
When the selected radio button changed you just set the View related to be active,
mvAll.SetActiveView(ViewIDYouNeed);
You can accomplish this with Panels and an Update Panel.
<asp:RadioButton ID="rdo1" AutoPostBack="true" GroupName="radios" runat="server" OnCheckedChanged="ShowDivs" />
<asp:RadioButton ID="rdo2" AutoPostBack="true" GroupName="radio2" runat="server" OnCheckedChanged="ShowDivs" />
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnl1" runat="server" Visible="false"></asp:Panel>
<asp:Panel ID="pnl2" runat="server" Visible="false"></asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="rdo1" />
<asp:AsyncPostBackTrigger ControlID="rdo2" />
</Triggers>
</asp:UpdatePanel>
You would then handle setting the Visible property of the panels in your ShowDivs method in your code behind.
Or, you could use jquery/javascript to accomplish this.
<input type="radio" onClick="ShowDiv(1)" />
function ShowDiv(id) {
HideDivs();
$(id).show('slow');
}
My issues here is that this does not compile. I get "A control with ID 'LinkButtonRemove' could not be found for the trigger in UpdatePanel 'UpdatePanelFiles'."
What I am trying to do is have two buttons in the item template. One that updates just the ITEM and one that updates the entire DataList. "LinkButtonRemove" is what I want to update the entire datalist. Any ideas on why this isnt working? Or how to do what I want to do?
THE SHORT VERSION:
UPDATEPANEL1
-DATALIST
--ITEM
---UPDATEPANEL2
----CONTROLS
I want one control to update the item updatepanel only and the other to update the entire datalist.
<asp:UpdatePanel ID="UpdatePanelFiles" runat="server" ChildrenAsTriggers="False" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="LinkButtonRemove" />
</Triggers>
<ContentTemplate>
<asp:DataList ID="DataListFiles" class="MediaManagerDataList" runat="server" ItemStyle-BackColor="#ffffff" AlternatingItemStyle-BackColor="#E7F4FF" OnItemCommand="DataListFiles_ItemCommand">
<ItemTemplate>
<asp:UpdatePanel ID="UpdatePanelItem" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div class="item">
<asp:LinkButton ID="LinkButtonRemove" CommandName="remove" runat="server">Remove</asp:LinkButton>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
</asp:DataList>
</ContentTemplate>
</asp:UpdatePanel>
The updatepanel can't see the button, but it can see the list. You can skip the trigger part and just call updatepanel.update() in your codebehind when you handle the click event.
You can do this by putting the DataList's Id instead of the linkbutton