How to retrieve data from fields inside the fancybox in code-behind - c#

Background
So I am building a dashboard. At some point the user presses an 'add widget' button. A fancybox loads the target div inside a fancybox. The code looks like this:
<script type="text/javascript">
$(document).ready(function (){
$("#various1").fancybox({
'titlePosition': 'inside',
'transitionIn': 'none',
'transitionOut': 'none',
'closeBtn': 'true'
});
});
</script>
<!-- Add Widget Button-->
<div class="cell_title_buttonAddWidget" style="right: 90px;">
<a id="various1" href="#AddWidget">Add New Widget</a>
</div>
The fancybox contains some textfields and dropdownlists. These dropdownlists are populated by database data. The user makes a selection (e.g. which type of chart he wants to see within the widget). Eventually the user selected all his choices and entered text in the textfields (e.g. Widget Title). User presses "save" button. The code for this looks like this (For the sake of simplicity, I've added only one field for the widget title):
<div style="display: none">
<div id="AddWidget" style="width:800px">
<div class="cell" style="margin: 0;">
<div class="cell_title">Add Widget</div>
<table style="margin: 10px;">
<tbody>
<tr>
<td class="form_label">Widget Title:</td>
<td>
<input id="AddWidgetTitle" runat="server" style="width: 250px;">
</td>
</tr>
<tr>
<td class="form_label"></td>
<td>
<input id="saveWidget" runat="server" type="button" value="Save" OnServerClick="saveWidget_Click">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
What I want to accomplish for now
Upon pressing the save button, I want the saveWidget_Click function to be fired, which it does. Then I want to put the value of AddWidgetTitle in a string (later into a database), by reading AddWidgetTitle.value.
The problem
Upon pressing the input button, I fire the saveWidget_Click function in my code-behind. However, before doing so, the page_load function is executed. At this point all the textfields and dropdownlist selected items are EMPTY. The textfields read "". I want to save the data within saveWidget_Click function by starting an INSERT query line into my database, but the data is empty.
Maybe I am approaching the 'pop up window with data inside of it' the wrong way. But I am hoping I am just missing something and the thing I want is possible using fancybox.
In conclusion
I can populate the textfields and dropdownlists within my fancybox with database data. However, I can't save the edited textfields and selected dropdownlist items within my database, because upon pressing a save button, the page reloads and all the entered data is gone.

Related

MVC Razor Need to find which radio option is selected

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.

How do I create new controls inserted into newly generated HTML on runtime?

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

Back Button Code not working

I am using the following code for a "Back" Button:
<INPUT type="button" value="Button" onclick="window.history.back(); return true;">
But, on the Previous page I have two div elements. When the page loads it will show div1. The next time, when the button of div1 is clicked, div2 will show. On div2 I have a "Next" button. which redirects to the other page. I want code for a "Back" button, which will show div2 when Back is clicked. Also, If I use history.back() it will show div1.
HTML code
List all your liabilities as calculated on the day the debt was forgiven to
the debt was forgiven prior
NEXT
<div id="d2">
<table cellspacing="3">
<tr>
<td colspan="2" class="styleh">
<p>
<b>Part II. List the fair market value (FMV) of all your assets, calculated as of the
day prior to the debt being forgiven - this would be the "sell today, cash value."</b></p>
</td>
</tr>
<tr>
<td>
</td>
<td>
<button id="btncalc" onclick="return btncalc_onclick()">
Calculate</button>
<button id="Button2" runat="server">
BACK</button>
</td>
</tr>
</table>
</div>
Thank you in advance
Try it :
<INPUT type="button" value="Button" onClick="history.go(-1);return true;">
OR
You can also try Asp.net Wizard Control for your scenerio.You can handle NextButtonClick
PreviousButtonClick events through this control.
change return true; to return false;
I think you will have to maintain some state to accomplish this functionality...I would suggets you to use cookie for this..set cookie when you click second div and go to the next page (you would find lot of ways of setting cookie through javascript, Here is example) and when you go back to first page check this cookie and explicitly show the second div and immedietly clear that cookie so that it won't persist...this is the one way which came instantly in my mind...
If you want to remember what state the previous page was in, you'll have to use some sort of storage.
The methods I'm most familiar with is the session variable, but using it will require you to do the coding in the codebehind of the aspx page.
protected void url_onClick (object sender, EventArgs e) {
Session["state"] = "div2";
Response.Redirect("url_of_new_page");
}
Of course you'll have to create your page based on the state during Page_Load.
If you want do to it purely in javascript, you'll have to use cookies, which I can't explain unfortunately, but here's a link to w3schools.

Reading dynamically generated HTML element value in codebehind in ASP.NET

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");

How do I acquire the value of a ASP label if it is nested? (client-side)

So there is a ASP checkboxlist that gets rendered to the table and in the code behind the checkboxes get bound with a label from a code table. I need to display a text box only if a certain checkbox is checked off.
<table id="chkSomeCheckbox">
<tbody>
<tr>
<td>
<input type="checkbox" id="chkSomeCheckbox_0">
<label for="chkSomeCheckbox_0">Acme</label>
</td>
<td>
<input type="checkbox" id="chkSomeCheckbox_1">
<label for="chkSomeCheckbox_1">Other</label>
</td>
</tr>
</tr>
</tbody>
</table>
The checkboxlist renders a table which the element retains the ID. I have tried to just get the value of the label when a checkbox is checked and then go from there to create my logic - but I can't seem to be able to grab the value of the label. I have tried the following different ways:
$("#<%chkSomeCheckbox.ClientID> input").next("label").val();
or
$("#<%chkSomeCheckbox.ClientID> input").next().val();
I am using the input selector because when I get this first part working, I will need to do some logic on it.
Any thoughts?
This is tagged as ASP.NET rather than ASP so I'm curious as to why you are not using ASP.NET controls. Also you have an extra </tr> tag in there.
You could do this:
<table id="chkSomeCheckbox">
<tr>
<td>
<asp:CheckBox ID="chkSomeCheckbox_0" runat="server"
Text="Acme" Checked="true" />
</td>
<td>
<asp:CheckBox ID="chkSomeCheckbox_1" runat="server"
Text="Other" Checked="false" />
</td>
</tr>
</table>
In the Page_Load event of the code behind you could then check the Checked property of the CheckBox and then decide to display the area that you held the Textbox in or just change the Visible property of the TextBox itself.
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
if (chkSomeCheckbox_0.Checked)
{
txtSomeTextbox.Visible = true;
}
}
}
Tried this?
$("#<%= chkSomeCheckbox.ClientID %> input").next("label").val();
In your code sample the ASP.NET inline statement is not closed (and also the "=" sign is missing).
Note: This will only work in the aspx/ascx file, not in a external JavaScript file.
If you can grab a handle on the label that you want, you can probably call the .text() method to get the text of the label. As such, I don't think that labels have a "value"
For example, if you wanted to append a textbox after the label based on which one was checked you could do this:
$("#chkSomeCheckbox > input").change(function(){
$label = $(this).next();
if($(this).attr("selected") == true)
{
//get label text
foo = $label.text();
//append textbox after the label, etc
$label.append(textbox);
}
});A

Categories