I have an asp.net web form with a repeater. In this repeater is multiple controls and I affect to these controls javascript functions with the ItemCreated event. I made this with this kind of code:
btnBareme.OnClientClick = string.Format("ChangeBareme('{0}','{1}',this); return false", item.Num_dossier, item.IdDemande);
The javascript function "changeBareme()" is defined in the header of the page. It is working fine but i need to update the repeater independently from the other elements of the page.
So I surround the repeater with a asp:UpdatePanel. Something like this:
<asp:UpdatePanel ID="UpdatePnl2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div>
<h1>Foo</h1>
</div>
<div>
<asp:Repeater runat="server" ID="rptFoo" OnItemCreated="rptFoo_ItemCreated" OnItemCommand="rpt_ItemCommand">
<HeaderTemplate>
<table id="TabRep" class="DataRepeater">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
</HeaderTemplate>
<ItemTemplate>
<tr>
SomeContent Here with controls
</tr>
</ItemTemplate>
<FooterTemplate>
</tbody>
</table>
</FooterTemplate>
</asp:Repeater>
<br/>
</div>
</ContentTemplate>
</asp:UpdatePanel>
And there.. It won't work. Controls of page outside the updatepanel lost theirs states and in debug mode, there is hundreds of "script blocks" generated..
My problem is that I don't really well understand how updatepanels are processing with javascript inside. So I need some advices from more experienced people. How can I make this updatepanel effective? What are thes hundreds of script blocks? I need to make the repeater more "Independent" from the rest of the page..
Thanks in advance.
these script block are here because you have a script block for each of you button
<input type="button" onclick="changebareme.."/>
It's not the update panel fault here.
A better approach would be to add a common css class to each of your button. Then with javascript select all of your button, and observe the click event on all of them.
Related
I have an Imageutton in asp.net. I want when I clicked on it, an event fire (that code of this event is written in c#).
asp code is:
<div align="right">
<table dir="rtl">
<tr>
<td>
<asp:ImageButton ID="imgScoreStar1" runat="server" ImageUrl="~/Images/ScoreStars/Star0_28px.png" OnClick="Star_Onclick" />
</td>
</tr>
</table>
</div>
and behind code is:
protected void Star_Onclick(object sender, ImageClickEventArgs e)
{
//do something
}
but ever fire click event (I tested it by breakpoint).
Another question: When I click on ImageButton, postback happens. how can I avoid this?
Thank.
Few things to check:
1. Check CausesValidation property. Test with making it false.
2. Use Page.RegisterRequiresRaiseEvent(ImageButton)
How to avoid postback.
Add ScriptManager. There must be only one ScriptManager in one page.
(If you are using Master page, add to master page and no need to add anymore in nested content page)
Add UpdatePanel and add your desired content including imagebutton to ContentTemplate of UpdatePanel.
in aspx
<asp:ScriptManager runat="server"></asp:ScriptManager>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<div align="right">
<table dir="rtl">
<tr>
<td>
<asp:ImageButton ID="imgScoreStar1" runat="server" ImageUrl="~/Images/ScoreStars/Star0_28px.png" OnClick="Star_Onclick" />
</td>
</tr>
</table>
</div>
</ContentTemplate>
</asp:UpdatePanel>
in cs
protected void Star_Onclick(object sender, ImageClickEventArgs e)
{
//do something
}
i checked its working you need to check property of that button try to add another button and change ID of button that will Ignore the property that are stopping click event
You can surround your Page load sequence like this...
if(!IsPostBack){
//PageLoad code
}
Then write code under the button click event.
The button click event should work
It worked for me!
I want to change the position of elements in ASP.NET User Control UI dynamically based on a condition. For eg:-
Here is the Normal layout of my User Control
Now I want to re position the Edit button as below based on a condition.
I can think of following approaches but not sure if they are good and best way to do this.
We can create a Button in the desired place of my user control and then Show that button based on this condition and hide the original button. So the user control will have Two buttons in the UI (one Inline and other in a new line). Based on my condition, I show or hide them respectively.
Create another User Control and use it.
But I guess for this small change its kind of overkill
Are there any best known methods/better solution out there to handle such kind than what I can think of
Any constructive input would help.
You can create two buttons, one button in the desired place of my user control and one in the target place. The first button will be displayed as block by default and the second button will be displayed as none by default. Depend on your condition you can change the class of the first button and second button to make the first one hidden and the second will be displayed as block. Here is an example :
In source :
<style>
.HideButton {
display: none;
}
.ShowButton {
display: block;
}
</style>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>
<td>
<asp:Button ID="Button1" runat="server" Text="Button" />
</td>
</tr>
<tr>
<td>
<asp:Button CssClass="HideButton" ID="Button2" runat="server" Text="Button />
</td>
<td"> </td>
</tr>
</table>
</div>
</form>
In code behind :
if (something)
{
Button1.CssClass = "HideButton";
Button2.CssClass = "ShowButton";
}
Another solution is to change the innerHTML of td tag as follow :
In source :
<form id="form1" runat="server">
<div>
<table>
<tr>
<td><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>
<td id="DesiredLocation" runat="server"><input type="button" value="button1" /></td>
</tr>
<tr>
<td id="TargetLocation" runat="server"></td>
<td"></td>
</tr>
</table>
</div>
</form>
And in aspx code :
if (something)
{
TargetLocation.InnerHtml = DesiredLocation.InnerHtml;
DesiredLocation.InnerHtml = "";
}
Hope this work.
I am using datatable JQuery plugin found on this site. http://datatables.net/
This is how I generated my table, which include three columns, checkbox column, program name and company name.
<script>
$(document).ready(function () {
var table = $('#tablePrograms').DataTable();
});
</script>
<div id="selectedProgramIds" runat="server"></div>
<asp:Repeater ID="RpPrograms" runat="server">
<HeaderTemplate>
<table id="tablePrograms" class="display">
<thead>
<tr>
<th></th>
<th>Program</th>
<th>Company Name</th>
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:checkbox runat="server" ID="cbxProgram"/>
<asp:HiddenField ID="hdnProgramID" runat="server" Value='<%# Eval("ProgramID")%>' />
</td>
<td><asp:label runat="server" id="ProgramName" Text='<%#Eval("Program")%>'></asp:label></td>
<td><%#Eval("CompanyName")%></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
My question is, now that this is a 10 pages table with pagination, what is the best way to save the data so that checkboxes selected on 10 different pages can all be saved. Currently, the DOM only shows the elements of the pages that I am on. For example, if I am on page 1, DOM doesn't display the elements on page 2-10. What is the best way to perform saving is this case? Does datatable plugin has some kind of build-in saving feature? Thanks for your help.
Found the answer on their website. http://datatables.net/release-datatables/examples/api/form.html
A handy jQuery serialize() function can be used to string together the data.
I am still rather new to ASP.NET, but I find myself stuck on a problem that shouldn't be too much of a problem..
Right now I have a page that holds this div:
<div id="EditSurveySetID" class="EditSurveySet" runat="server">
<div class="cell">
<div class="cell_title">Survey Set(s)</div>
<table id="surveySetTableData" runat="server" style="margin: 10px;">
<tbody>
<tr>
<td class="form_labelSurveySet" style="width: 330px;">
<input type="button" value="-"> Survey Set 1:
<input id="EditSurveySetTitle" runat="server" style="width: 200px;" value="Netherlands">
</td>
<td>
<asp:DropDownList ID="DDLSurveySetSurveys" runat="server">
</asp:DropDownList>
<asp:Button ID="addAdditionalDDLColumns" runat="server" Text="+" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
Which looks like this:
I want a user to press the + button (addAdditionalDDLColumns). Upon pressing that button, I want a new table row to appear with the same controls in it, so that on runtime, it would look like this at that point:
<div id="EditSurveySetID" class="EditSurveySet" runat="server">
<div class="cell">
<div class="cell_title">Survey Set(s)</div>
<table id="surveySetTableData" runat="server" style="margin: 10px;">
<tbody>
<tr>
<td class="form_labelSurveySet" style="width: 330px;">
<input type="button" value="-"> Survey Set 1:
<input id="EditSurveySetTitle" runat="server" style="width: 200px;" value="Netherlands">
</td>
<td>
<asp:DropDownList ID="DDLSurveySetSurveys" runat="server">
</asp:DropDownList>
<asp:Button ID="addAdditionalDDLColumns" runat="server" Text="+" />
</td>
</tr>
<tr>
<td class="form_labelSurveySet" style="width: 330px;">
<input type="button" value="-"> Survey Set 2:
<input id="Text1" runat="server" style="width: 200px;" value="Netherlands">
</td>
<td>
<asp:DropDownList ID="DropDownList1" runat="server">
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" Text="+" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
Or in image:
So the way I see, some new HTML code is generated on the + button click event, along with some controls (dropdownlist, another + button with the same functionality(?), possibly a textfield instead of input field).
Questions that come to mind right now:
How do I generate the HTML code that would create a new table row
How do I control where this generated HTML code is added (in this case, it should be under the existing
[Vague/Abstract question] Ultimately a user could possibly have 1 to infinite 'survey sets'. If a user were to have created 4 survey sets, he would eventually press a save button or something alike. Upon pressing this button I would save the 4 selectedvalues of the 4 dropdownlists belonging to the 4 survey sets. How would I call each individual dropdownlist in order to get the data? What I'm actually asking, I think, is whether it's possible to assign an ID programmatically upon the auto generated dropdownlist creation of my previous two questions.
How do I do this? Any advise and tips are very welcome!!
You could use and UpdatePanel and dynamically add new asp controls in the code-behind.
This could be expensive however, because it means your application would be going back to the server every time the user clicks the "Add" button, however I'm not sure how you'd achieve this strictly on the client-side. But there is nothing stopping you creating new controls on the fly on the server-side using asp.net.
If you want to surround the new controls with custom HTML, you could use a PlaceHolder component and replace it with raw text (your HTML) during the callback.
I would suggest you use a GridView.
It provides an option to add rows. It provides a Rows collections, so you can get the data bound to each row.
Here are some examples to get you started.
Dynamically creating, adding and maintaining controls would involve some effort. You would need a PlaceHolder and have to add controls to that. You would have to assign unique ids to each one of them, and use those to retrive the values. This must be done on each PostBack.
Try this when you don't feel you are rather new to asp.net.
protected void Button1_Click(object sender, EventArgs e)
{
HtmlTableRow tr = new HtmlTableRow();
HtmlTableCell td = new HtmlTableCell();
Button btn=new Button();
btn.Text="gdfgd"; /* here u can create ur contol and add it in cell*/
td.Controls.Add(btn); /*add controls to colum*/
tr.Cells.Add(td); /*add column to row*/
surveySetTableData.Rows.Add(tr); /*ad row to table*/
}
instead of using this i would also recommend u to use gridview like nunespaqscal bcz dataretrival become very easy....in gridview
I have the following table in an ascx user controll:
<tr runat="server" id="rowChangeSerNo">
<td colspan="2">
<table id="tblChangeSerNo" runat="server">
</table>
</td>
</tr>
<tr id="row" runat="server">
<td>
<asp:Button ID="btChangeSerNo" runat="server" Text="Update" OnClick="btChangeSerNo_onClick" />
</td>
</tr>
I create the tblChangeSerNo dynamically with text boxes prefilled with the current values in the db. The idea of the control is to allow the user to update the values of the DB with new values. The problem is that when the btChangeSerNo_onClick method is called:
The table is not rendered, since I do it on pre-render
Even if I rendered the table on Page_Load I could not access updated values of the user because they are lost.
How can I solve this problem?
The best practice way will be to use Grid control instead.
If you prefer to stick with your own code, follow those steps:
Store all the text boxes in global fields, e.g. public List<TextBox> m_tableTextboxes = new List<TextBox>(); and when creating add to that list.
Have the code creating the dynamic controls in the Page_Load but execute it only when not is PostBack: if (!Page.IsPostBack) { ... }
In the button click event, read the values from your global field.
Done something similar in the past, so the concept should work.