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.
Related
I have a model which is a list of objects which I am rendering out to a page inside a form.
The user selects the objects with the checkbox, hits submit, the model is posted back and I perform some processing on the selected items.
#using (Html.BeginForm("Method", "Controller"))
{
<table id="mytable">
<tr>
<th>Some Properties</td>
<th>Selected</td>
</tr>
#foreach (var item in Model)
<tr>
#Html.HiddenFor(m => item.Id)
<td>#item.Id</td>
<td>#Html.CheckBoxFor(m => item.Selected)</td>
</tr>
</table>
<input id="btnGo" type="submit" name="submitButton" value="Go"/>
}
(That is basically it. I don't actually think the above works - I had to seperate it out so the 'foreach' part is in a partial view - but I'm sure you get the idea).
Usually there aren't many rows, but sometimes there can be a lot.
When it does get very high (2000 plus), even if the user only ticks 1 box, it can take up to 10 minutes to post back the entire model, when 99.9% of it is not needed.
How would I go about only submitting the relevent (checked) items from the model?
The only way I could get it to work only submitting the checked items was with some javascript to force it into the url.
$(document).ready(function () {
$('#btnGo').click(function () {
var idArray = new Array();
$("#mytable input:checkbox:checked").each(function () {
idArray.push(this.id);
});
window.location = "/My.Web.Page/Controller/Method?selectedIds=" + idArray;
});
});
But I don't like it because i'm having to hardcode the url, and the user can just hit 'refresh' on the browser to then basically reprocess everything.
Well, using only html you can't do partial postbacks. If you need to be able to post back only some data, you should use Ajax.
Btw, 10min processing on 2000 items? What are you doing with the data?!
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.
I have a list of button which has to display the number of comments as the value of the button. But when I click the button I want to send/pass the comment Id to the method that is submitted. Is there a way to achieve this kind of thing?
Edited:
What I did was, In the table That I have list of buttons
#foreach(var s in Model.List)
{
<tr>
<td style="text-align:left;">#s.ID</td>
<td style="text-align:center;">#s.CD</td>
<td style="text-align:center;">#s.DE</td>
<td style="text-align:center;">
<input class="xxxxx" style="text-align:center;" type="submit" name="count" value ="#s.k" />
<input type="hidden" name="SupportID" value="#s.ID" />
</td>
</tr>
}
This is passing the S.ID to the controller method, But it is not intuitive and I feel that is not the best method to do it.
Do you need to pass anything else apart from the ID ?
If not then you can just use a simple anchor and set the URL to be something like
href="/Page/Method/#s.ID"
and create the method that accepts the ID.
Alternatively you can use jQuery to do an AJAX call to the method, you will then have access to any attributes on the button element to then use in the AJAX Call.
Is there a "best" (or preferred) way to pass information from an HTML table in an ASP.Net MVC view to a controller? I am working with MVC2, and if I stick with using the Context objects (mainly Request.Form[::variables::], I'm at a loss as to how to retrieve information presented in the view using the table/table cell structure. The table I am working with has a check box corresponding to each row of data, and I want to make the data from "checked" rows available to the controller. The following quick fixes come to mind:
1) Since the table in question has a check box, and HTML elements of type "input" have the "id" attribute, the data values could be stored in some kind of concatenated string in the "id" attribute for the check box.
2) Similar to the above misuse of the check box "id" attribute, the data values could be stored in the "text" attribute for a text (textbox) input element.
...but that all seems really klugey, even if it does work. I am relatively new to the field of web programming/development (although not new to programming), so if anyone can suggest alternate methods and/or technologies (I'm open to trying stuff via JavaScript, etc) I would appreciate it. I would appreciate even just links to relevant tutorials (or, related StackOverflow posts I may have missed). :-p
If you have a form like this:
<form action="." method="POST">
<table>
<tbody>
<tr>
<td>
<input type="checkbox" name="checkedValues" value="1" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkedValues" value="2" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkedValues" value="3" />
</td>
</tr>
</tbody>
</table>
</form>
That will map to this parameter in your controller action when a post occurs, where the values of the checked boxes are stored in the checkedValues array:
public ActionResult MyAction(int[] checkedValues)
{
}
The values of the check boxes can be strings as well, if that's preferred.
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");