How do I duplicate a block of html at the click of a button (for example, add a new row to a non-ASP table)?
My first thought was to use an ASP Repeater. However Repeaters are designed to be databound. While there are some workarounds to using a Repeater to repeat code that isn't databound, this seems like the wrong way to go about it.
ASP.NET has to have a recommended way to do this. I don't think one has to resort to AJAX for this (cue the laser-focus of your responses to be on AJAX...).
I made a JSFiddle to visualize the problem, although I'm not necessarily asking for a JS solution:
example html:
<table>
<thead>
<th>Col1</th>
<th>Col2</th>
</thead>
<tbody>
<tr>
<td><input type="text" value=""></td>
<td><button>Button</button></td>
</tr>
</tbody>
</table>
<button>Add Row</button>
You can duplicate the row by clicking the button. For this you need to assign Id to Row, and then get this row by Id in Javascript function being called in onclick attribute of button. after getting this you can append the html of this row to lastly added row in table. In this way you can add multiple rows by multiple clicks of button. Hopefully this will help you!
Related
The form:
#Html.ActionLink("View Daily Details", "ViewDaily")
<div class="ca-form-layout">
<table class="ca-index-table" style="margin:10px auto">
<tr class="ca-header-row">
<th class="ca-header-cell" style="width:60px"></th>
<th class="ca-header-cell" style="width:140px">Date</th>
<th class="ca-header-cell" style="width:140px">Payment Total</th>
</tr>
#foreach (var gr in groups)
{
<tr class="ca-table-row">
<td class="ca-table-cell" align="center">#Html.RadioButton("payDate", gr.Key.ToShortDateString())</td>
<td class="ca-table-cell" align="center">#Html.FormatValue(gr.Key, "{0:MM/dd/yyyy}")</td>
<td class="ca-table-cell" align="center">#Html.FormatValue(gr.Sum(p => p.PaymentAmount), "{0:C}")</td>
</tr>
}
</table>
</div>
</div>
From my controller, how do I get the value from the payDate radioButton? I was trying to use FormCollection["payDate"] but wasn't getting any value to come through that way. I know there must be some easy answer, but I can't find it anywhere.
Note: If I replace the radioButton with this:
#Html.ActionLink("View Daily Details", "ViewDaily", new { prmDate = gr.Key })
... the page works perfectly fine so there is nothing wrong with any of the values, routing or controller ... I just can't get that value to pass without specifying it directly in the ActionLink. There are 3 other buttons that all need to work off the RadioButton so I can't simply just replace it with a single button.
Thanks
There's no actual form here, so there's nothing sending that value to the server.
To create a form with form elements (such as a radio button), you'd wrap it in something like this:
#using (Html.BeginForm("ViewDaily", "SomeControllerName"))
{
<!--- Your HTML goes here, including form elements --->
}
Included within that form scope would generally be a submit button, something like:
#using (Html.BeginForm("ViewDaily", "SomeControllerName"))
{
<!--- Your HTML goes here, including form elements --->
<input type="submit" value="View Daily Details" />
}
Which of course you could style to look like whatever you want. If you really want the "submit" to be a link then you'd need to write some JavaScript to turn that request (which is otherwise a GET) into a form POST. But just using a submit button would be considerably easier.
This would wrap your form in the requisite <form> tag so that the browser knows to send the key/value pairs to the server.
I am working on a Visual Web Part for a SharePoint 2013 site that is a "scoreboard" for people to track progress on a project. Basically what I have is a lot of textboxes that users will enter values in. I want the values to stay in the textbox until someone changes it.
<tr>
<td> </td>
<td>A-Crew</td>
<td>B-Crew</td>
<td>C-Crew</td>
<td>D-Crew</td>
</tr>
<tr>
<td>Daily</td>
<td>
<input id="msaCrewDaily" type="text" />
</td>
<td>
<input id="msbCrewDaily" type="text" />
</td>
<td>
<input id="mscCrewDaily" type="text" />
</td>
<td>
<input id="msdCrewDaily" type="text" />
</td>
</tr>
A few things I have tried are using PHP inside the input tag to save the value but it doesn't keep it after closing and re-opening the page with webpart on it. I've thought about using local storage but i'm not sure if that will work.
My Question
Is there a way to keep the the input even if the page is closed? If not would it be better to set up a list as a Data Source? Is the something I could do in C# to keep the values?
Other Information
This is a temporary solution until a database is set up then the values will come from there. However its going to take some time to set that up. Also as of now all my code is HTML and CSS. Any help or ideas are very much appreciated and thank you in advanced!!!
So my understanding is each user opens the page and edits the value right? Then why not create a simple list with the required columns you create one item with default 0 values/or whatever you want. And send the display Item form url to all the users. Whoever wants to edit, will just click on edit and save the form. You can in fact just add this on the page enabling the inline editing and share the page with others.
You can use local storage "jStorage" write a javascript which will be called onkey of textbox and store value on local storage and call it on page load. Just check on page load if local storage contains any value if yes then set the textbox with that value
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.
I'm currently trying out the jqGrid plug-in. Everything is working well expect for sorting on a specific column.
I have an existing table that I'm trying to apply the plug-in to.
<script type="text/javascript">
$(document).ready(function () {
tableToGrid("#myTable", {})
});
</script>
<table id="myTable">
<thead>
<tr>
<th>
Web Site
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Hello
</td>
</tr>
<tr>
<td>
Bob
</td>
</tr>
<tr>
<td>
Loblaws
</td>
</tr>
<tr>
<td>
Wahoo
</td>
</tr>
</tbody>
</table>
When I sort the column, the order comes up as
Hello, Loblaws, Wahoo, Bob
instead of
Bob, Hello, Loblaws, Wahoo
It looks like it is sorting the href tag and not the content.
Very similar to this problem (just a different plug-in) - Table sorter issue with content
The reason why you have so strange sorting oder is that in the way how you use jqGrid currently you create the grid having one column with string data. The string data will be:
"\n Hello\n "
"\n Bob\n "
"\n Loblaws\n "
"\n Wahoo\n "
How you can see the string which contain "Bob" substring has "4094" before. So the string will be the last string in the sort order.
You can improve the situation using the second options parameter of tableToGrid, but the best way would be to make clear separation of the information about the text displayed in the column (like "Bob", "Hello") and so on from the url data. Then the sorting on the columns will be exactly like you want. So it is better don't use tableToGrid function for your data and create jqGrid in the direct way.
Because I don't know from which source you get the information about the url for the texts it is difficult to give you some recommendation for the best implementation. You can find examples how to construct links in the jqGrid here and here. I think that you can easy modify the examples for your purpose.
You can go for custom formatter custom_formatter.It will help you in case of sorting on basis of href content as in jqgrid ,i feel it is not possible.
Alternative, you can pass one more column containing href content and sort the href column based on this,though it's not preferred.
tableToGrid doest not sort your table, it only turns your table into grid.
For client side sorting, this may help you.
jqGrid sorting on client side
I have an asp.net page where I have the below markup. Basically this markup is generated from codebehind by reading records from a table and looping through them. For each record in table, there will be a div block.
Basically this form is to read/show settings for a user. The settings entries are stored in a table.
<div id='divContainer' runat='server'>
<div id='div1' runat='server'>
<table>
<tr>
<th>Name</th>
<td><input type='text' id='txtName1' value='something' /></td>
</tr>
</table>
</div>
<div id='div2' runat='server'>
<table>
<tr>
<th>Domain name</th>
<td><input type='text' id='txtName2' value='something' /></td>
</tr>
</table>
</div>
<div id='div3' runat='server'>
<table>
<tr>
<th>URL</th>
<td><input type='text' id='txtName3' value='something' /></td>
</tr>
</table>
</div>
<div id='div4' runat='server'>
<table>
<tr>
<th>Some other value is enabled ?</th>
<td><input type='checkbox' id='chk4' /></td>
</tr>
</table>
</div>
</div>
The id's of each input element will be unique. Now in codebehind I want to read the values of each input element to save the changes user made. How can I read the elements here? Since the mark up is generated in codebehind as a string and appended the the INNER HTML of the external div, I can't read values like we do for a control which we drag and drop in the IDE.
If these are being sent back to the page in a standard HTTP POST then you can read the values in the Request.Form NameValueCollection.
Essentially, all of the server controls that become form elements get translated into standard HTML form elements just as you have there, albeit with more markup generated by .NET to help it identify them. Then it automatically maps their values back to the server controls for you on the postback, but the values themselves are still just in a standard HTTP POST, which you can access manually.
(This is also a common method used when posting a form from one ASP .NET application to another.)
If you want to grab your values for the generated controls you have to do 2 things.
Generate the input controls with a runat='server' tag for each control (otherwise they will not be included in the Request.Forms collection.) This is probably the step your missing.
<input type='text' id='txtName1' runat='server' value='something' />
Grab your values from the Request.Form collection on postback
string txtValue1 = Request.Form["txtName1"];
It really should be that easy. I tested this against your code using a DIV as the container and a simple javascript to inject the control string into the innerHTML. If your getting any issues you may have to debug and see if the dynamic control ID has changed due to inserting them into naming container or something.
So the brunt of the story is that when you dynamically add a control after Page_Init then POSTBACK values can not be inserted back into those controls.
CF: http://www.15seconds.com/issue/020102.htm and http://msdn.microsoft.com/en-us/library/ms178472.aspx
Some of the other answers here suggest "oh, add a runat=server to the control" but when you create it in the codebehind, and not in the Page_Init, then that makes ZERO difference.
Let me know if that's not how you're creating the controls or if that's not how you're using them and I'll revise this answer on more details. It really all boils down to how you're trying to access the values.
Generally, you'd place those input controls you're creating dynamically (in this case, a TextBox) inside something like a panel control (the container). Then after the user has posted their data, you'd loop that container panel.Controls collection and retrieve each TextBox text.
Be aware that some caveats apply when working with dynamically created controls because ASP is of stateless nature.
This page shows how to implement this:
Adding Dynamic Rows in ASP.Net GridView Control with TextBoxes
I didn't test it but I can suggest that:
Add your dynamic controls with runat="server" tag inside another controls with runat="server"(such as panel control). Then you can access them like this:
Textbox t = (Textbox)panel1.controls.findControl("dynamicControlId");