We Keep Coding

Prevent Form Resubmit

I've been looking for this answer for a couple weeks now but many other questions/answers don't fit my project or simply don't work.
Let me explain my project.
It is a simple View Page which on page load it would set the Text to different fields throughout the page. On the bottom I have a container with buttons which control which div is displayed in the container. On each click of the button, I run some code to set data sources to grid views or fill fields with text. I noticed when I click F5 to refresh the page I get that pesky "form resubmission" popup which will cause the last button click such as appending a note to a listview to be duplicated.
Here is some code to understand what I am doing
HTML(Not complete, just necessary to understand my question)
<td style="vertical-align: top;" class="Flow-Sub-Menu">
<asp:Button ID="Button_Sub_Menu_Financial" runat="server" Text="Financial Info" OnClick="Button_Sub_Menu_Financial_Click" />
<asp:Button ID="Button_Sub_Menu_Indemnitors" runat="server" Text="Indemnitors" OnClick="Button_Sub_Menu_Indemnitors_Click" />
<asp:Button ID="Button_Sub_Menu_Court" runat="server" Text="Court Info" OnClick="Button_Sub_Menu_Court_Click" />
<asp:Button ID="Button_Sub_Menu_Forfeiture" runat="server" Text="Forfeiture Info" OnClick="Button_Sub_Menu_Forfeiture_Click" />
<asp:Button ID="Button_Sub_Menu_Collaterals" runat="server" Text="Collaterals" OnClick="Button_Sub_Menu_Collaterals_Click" />
<asp:Button ID="Button_Sub_Menu_Notes" runat="server" Text="Notes" OnClick="Button_Sub_Menu_Notes_Click" />
<asp:Button ID="Button_Sub_Menu_Documents" runat="server" Text="Documents" OnClick="Button_Sub_Menu_Documents_Click" />
</td>
<div id="Div_Sub_Menu_Notes" runat="server" visible="false">
<div class="row">
<div class="col-xs-4" style="min-width: 550px;">
<div class="Flow-Box">
<div class="Flow-Box-Content" style="height: 440px; overflow-y: scroll;">
<asp:ListView ID="LV_Notes" runat="server" ItemPlaceholderID="ItemPlaceHolder" DataKeyNames="Bond_Note_ID" OnPagePropertiesChanging="LV_Notes_PagePropertiesChanging" OnItemCommand="LV_Notes_ItemCommand">
<LayoutTemplate>
<table style="width: 500px; background-color: white;">
<tr id="ItemPlaceHolder" runat="server"></tr>
<tr>
<td colspan="2">
<asp:DataPager ID="DataPager_Notes" runat="server" PagedControlID="LV_Notes" PageSize="3">
<Fields>
<asp:NextPreviousPagerField ButtonType="Link" ShowFirstPageButton="false" ShowPreviousPageButton="true"
ShowNextPageButton="false" />
<asp:NumericPagerField ButtonType="Link" />
<asp:NextPreviousPagerField ButtonType="Link" ShowNextPageButton="true" ShowLastPageButton="false" ShowPreviousPageButton="false" />
</Fields>
</asp:DataPager>
</td>
</tr>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td colspan="2" style="padding-left: 10px; padding-right: 10px;">
<div style="border: 2px solid grey; height: 75px; padding: 5px;">
<%# Eval("Note") %>
</div>
</td>
</tr>
<tr>
<td style="padding-left: 10px;" <%# (Eval("Document_ID").ToString() != "" ? "" : "hidden=\"hidden\"") %>>
<label>Document Attached : <%# Eval("Document_Title").ToString() %></label>
</td>
<td style="text-align: right; padding-right: 10px;" <%# (Eval("Document_ID").ToString() != "" ? "" : "hidden=\"hidden\"") %>>
<asp:Button ID="Button_View_Document" runat="server" Text="View/Download Document" CommandName="View_Document" CommandArgument='<%#Eval("Document_ID")%>' />
</td>
</tr>
<tr>
<td style="text-align: left; padding-left: 10px;">
<div>
<%# Convert.ToDateTime(Eval("Created_DateTime")).ToShortDateString() + " " + Convert.ToDateTime(Eval("Created_DateTime")).ToShortTimeString() %>
</div>
</td>
<td style="text-align: right; padding-right: 10px;">
<div>
<%# Eval("Full_Name") %>
</div>
</td>
</tr>
<tr>
<td colspan="2" style="height: 20px; border-top: 4px solid #009900;"></td>
</tr>
</ItemTemplate>
</asp:ListView>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4" style="min-width: 500px;">
<div class="Flow-Box">
<div class="Flow-Box-Label">
New Note
</div>
<div class="Flow-Box-Content">
<table class="Flow-Box-Table">
<tr>
<td>
<textarea id="TextArea_New_Note" runat="server" style="width: 400px; height: 150px;"></textarea>
</td>
</tr>
<tr>
<td>
<asp:Button ID="Button_Append_New_Note" runat="server" OnClick="Button_Append_New_Note_Click" Text="Append Note" />
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
C# Codebehind
protected void Button_Sub_Menu_Notes_Click(object sender, EventArgs e)
{
resetSubMenuButtons();
Button_Sub_Menu_Notes.BackColor = System.Drawing.Color.Orange;
Div_Sub_Menu_Notes.Visible = true;
string bondID = Request.QueryString["BondID"];
bindNotes(bondID);
}
protected void bindNotes(string bondID)
{
DataTable dt = Common_Functions.GetData("SELECT * FROM View_Bond_Notes_With_Name WHERE Bond_ID='" + bondID + "' ORDER BY Created_DateTime DESC");
LV_Notes.DataSource = dt;
LV_Notes.DataBind();
}
protected void LV_Notes_PagePropertiesChanging(object sender, PagePropertiesChangingEventArgs e)
{
(LV_Notes.FindControl("DataPager_Notes") as DataPager).SetPageProperties(e.StartRowIndex, e.MaximumRows, false);
string bondID = Request.QueryString["BondID"];
bindNotes(bondID);
}
protected void LV_Notes_ItemCommand(object sender, ListViewCommandEventArgs e)
{
if (String.Equals(e.CommandName, "View_Document"))
{
ListViewDataItem dataItem = (ListViewDataItem)e.Item;
string documentID = e.CommandArgument.ToString();
Session["BondDocumentID"] = documentID;
Page.ClientScript.RegisterStartupScript(GetType(), "openDocument", "window.open('/FileServing/Bond_Document_Server.aspx');", true);
}
}
protected void Button_Append_New_Note_Click(object sender, EventArgs e)
{
string bondID = Request.QueryString["BondID"];
string UserID = Request.Cookies["UserID"].Value;
string newNote = TextArea_New_Note.Value;
if (String.IsNullOrWhiteSpace(newNote))
{
return;
}
cmd = new SqlCommand("INSERT INTO Bond_Notes " +
"(Bond_ID, Created_DateTime, Created_By, Note) " +
"VALUES " +
"(#Bond_ID, #Created_DateTime, #Created_By, #Note)", conn);
cmd.Parameters.AddWithValue("#Bond_ID", bondID);
cmd.Parameters.AddWithValue("#Created_DateTime", DateTime.Now);
cmd.Parameters.AddWithValue("#Created_By", UserID);
cmd.Parameters.AddWithValue("#Note", (String.IsNullOrWhiteSpace(newNote) ? (object)DBNull.Value : newNote));
conn.Open();
cmd.ExecuteNonQuery();
conn.Close();
TextArea_New_Note.Value = "";
bindNotes(bondID);
}
So when the user clicks "Button_Append_New_Note", the code will fire to run the sqlcommand and then refreshes the ListView by calling the "bindNotes(bondID)". If the user clicks F5 or hits refresh for whatever reason, they are resubmitting that form and add duplicates. I've read many solutions to redirect to the same page, this will not work in my case since the div would be hidden again and I would prefer the Notes div to stay visible so the user can see their new note in the listview. I also prefer not to have an sql check to look for a duplicate and prevent an insert since I may want the user to insert duplicates if they chose to at another time, but the user would manually type in the duplicate.
Any recommendations or suggestions on how to avoid the form resubmission?
Also please no criticizing on the code, I am looking for answers, not a lecture on why its bad to build an SQL sentence with inline string addition. I will correct and optimize these faults eventually.
If you found my solution elsewhere, please ensure it would work in my case cause I have found my same question many times, but not with my scenario.
Thanks in advance.

As you probably know, ASP.NET Web Forms send POST requests back to the server and then re-render the Page in the same request. This is why we see the form re-submission message when we click "reload".
To avoid this issue, we should employ the post-then-redirect pattern used by many web applications. Here's a quick overview:
A user clicks a button which submits the form as a POST request.
The server receives the request and saves the data.
The server issues a redirect response along with any needed state.
The browser receives the redirect and loads the appropriate page by sending a GET request.
Because we redirect the browser to a new (or the same) location, this clears the POST data from the previous request so we can hit "reload" without re-submitting the same data again. The URL that we redirect to should contain only the data needed for the server to interpret what to display on the page. This pattern provides a durable way to maintain state between requests in HTTP.
To apply this to the Web Form in the question, we need to change some assumptions about how the page loads. Instead of binding the notes to the page after running each POST action, we'll redirect the user first, and then bind the notes:
protected void Button_Append_New_Note_Click(object sender, EventArgs e)
{
string bondID = Request.QueryString["BondID"];
// Save the new note...
Response.Redirect("http://example.com/Page.aspx?BondID=" + bondID);
}
Then, when the browser loads the redirect:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
bindNotes(Request.QueryString["BondID"]);
}
}
We'll need to change each of the post-back methods to use this pattern. Some of the methods may need to add additional parameters to the redirect URL that the page reads to configure the display.

This is quite easy and blocks the pop up asking for form resubmission on refresh once the form is submitted. Just place this line of javascript code at the footer of your file and see the magic.
<script>
if ( window.history.replaceState ) {
window.history.replaceState( null, null, window.location.href );
}
</script>

Angular JS, multiple insert error

I want to fetch data from SQL and display in HTML table using ng-repeat option then I need to edit some values in the table cell. My problem is that I only get initial values in the controller and the changes are not reflected in the controller. Here is my code:
app.controller('CRUD_EntryController', function ($scope, CRUD_InternalEntryService) {
GetStudentMarkDetails();
function GetStudentMarkDetails() {
var PromiseGetMarks = CRUD_InternalEntryService.GetMarkDetails();
PromiseGetMarks.then(function (res) {
$scope.MarkList = res.data;
})
}
$scope.mark = {};
$scope.save = function (MarkList) {
var index = 0;
$scope.MarkList.forEach(function (mark) {
console.log('rows #' + (index++) + ': ' + JSON.stringify(mark));
alert(mark.M1);
}
}
View:
<table class=" table table-condensed" id="myresul">
<tr>
<th>Slno</th>
<th>Name</th>
<th>RegNo</th>
<th>ClassNo</th>
<th>M1</th>
<th>M2</th>
<th>M3</th>
</tr>
<tbody data-ng-repeat="mark in MarkList" >
<tr>
<td class="col-md-1" >#{{$index+1}}</td>
<td class="col-md-2" ng-model="mark.Fname">{{mark.Fname}}</td>
<td class="col-md-2">{{mark.RegNo}}</td>
<td class="col-md-1">{{mark.ClassNo}}</td>
<td class="col-md-1"><input type="number" value="{{mark.M1}}" ng-model="M1" class="form-control" /></td>
<td class="col-md-1"><input type="number" value="{{mark.M2}}" ng-model="M2" class="form-control" /></td>
<td class="col-md-1"><input type="number" value="{{mark.M3}}" ng-model="M3" class="form-control" /></td>
</tr>
<button data-ng-click="save(MarkList)" class="btn btn-success">Save</button>
</tbody>
</table>

Don't think you need to define this: $scope.mark = {}; since mark is set in the scope of your ng-repeat. Remove it because this is somewhat confusing and might cause errors in the future.
Remove the value="{{mark.M1}}" and bind your model to ng-model="{{mark.M1}}". Asuming that you wand to bind to M1, M2 and M3 in your inputs.
Also see the angular docs for ngModel for more details and update your code accordingly.
By the way you don't have to pass MarkList as an argument for Save(..), you can do this:
<button data-ng-click="save()" class="btn btn-success">Save</button>, change the Save method signature to Save() and use $scope.MarkList instead of the argument MarkList.
Or change your method to only save the specific mark instead of the entire list every time.

textbox not displaying in code behind c# file

I have a sales simulator written in C#. I did not write this however I am currently modifying it to suit different requirements.
It basically displays a list of products from a database, and has a textbox for each product where you can enter in the quantity sold. The quantity sold is calculated based on it's price in the database.
Now it's all working fine, however there is one SMALL issue. When "Buy" is clicked, it returns me back to the list of products which IS correct, however the quantity I have entered for the previous product remains.
I would like to know how to restore the text boxes to their default value when the after the data is submitted to the database.
I always thought the way to do this would be in the .cs code behind file
txtQuantity.Text = "";
However, for some odd reason, txtQuantity will not show up.
Can anyone think of anything I am doing wrong? Here is a snippet of code from the aspx file.
<form id="form1" runat="server">
Date:
<asp:TextBox ID="txtDate" runat="server" />
Retailer:
<asp:DropDownList ID="dlStore" runat="server"
onselectedindexchanged="dlStore_SelectedIndexChanged" />
<asp:ListView ID="lbProducts" runat="server">
<LayoutTemplate>
<layouttemplate>
<table border="1" cellpadding="1" style="width:800px">
<tr style="background-color:#E5E5FE">
<th>ID</th>
<th>ProductCode</th>
<th>Product Title</th>
<th>RRP $</th>
<th>Quantity</th>
<th>Sale Price $</th>
</tr>
<tr id="itemPlaceholder" runat="server"></tr>
</table>
</layouttemplate>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td style="width: 50px;">
<%#Eval("ProductID") %>
</td>
<td>
<%#Eval("ProductCode") %>
</td>
<td>
<%#Eval("ProductTitle") %>
</td>
<td>
<%#Eval("USListPrice") %>
</td>
<td style="width: 50px;">
<asp:TextBox ID="txtQuantity" runat="server" Text="0" />
</td>
<td style="width: 50px;">
<asp:TextBox ID="txtSalePrice" runat="server" Text="0.00" />
</td>
</tr>
</ItemTemplate>
</asp:ListView>
<asp:Button ID="btnBuy" Text="Buy These Items" runat="server" OnClick="btnBuy_Click" />
<asp:Button ID="btnClear" Text="Clear Existing Sales" runat="server"
onclick="btnClear_Click" />
</form>
There's a lot going on in the code behind file and I wouldn't expect anyone to go through it, but how I collect the data from txtQuantity is done with the following line of code:
Int32 quantity = Int32.Parse(((TextBox)item.FindControl("txtQuantity")).Text);
So what I want to be able to do is set this textbox either to be empty, or back to zero.
Any help is appreciated, thanks.

Because that txtQuantity control is within a ListView, there could be any number of instances of that control generated. So you can't access all of them through a single variable.
You will need to look through all controls within that ListView (and several levels deep) to find all your txtQuantity controls.
The same of course for the txtSalePrice control.
EDIT
You could find those textboxes with code like (untested)
public IEnumerable<TextBox> FindTextBoxes(Control parent)
{
if (parent == null) yield break;
foreach (Control child in parent.Controls)
{
TextBox tb = child as TextBox;
if (tb != null)
yield return tb; // found one!
else
foreach(TextBox tb in FindTextBoxes(child))
yield return tb; // found it deeper
}
}
and call it like:
foreach(TextBox tb in FindTextBoxes(lbProducts)
{
if (tb.Name == "txtQuantity")
{
// found a quantity
}
else if (tb.Name == "txtSalePrice")
{
// found the salesprice
}
}

Validating a .NET 2.0 form with JQuery Validate() issues

I am trying to validate a form in .NET 2.0 using the JQuery Validate() plug-in and it’s not working. I know my Jquery code is working as I set up functions to clear the default text of a text field on focus() and that works as expected.
The form.validate() method never seems to get called as I have alert() calls in a custom validation method that work in a separate HTML test page but never fire when integrated into the .NET page.
Could this be because the whole page is treated like a form in .NET? If I want to override the default submit action and add some client side validation, how can I do this or can I only validate the form in the code behind? Thanks.
my script:
<script src="js/jquery.validate.min.js" type="text/javascript"></script>
<script src="js/additional-methods.js" type="text/javascript"></script>
<script src="js/jquery.maskedinput.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
jQuery.validator.addMethod("checkfields", function(value, element) {
if ($("#from_date").val() == "" && $("#to_date").val() == "" && $("#last_name").val() == "") {
return false;
}
}, "Please enter either a last name, from date or to date.");
$("input.from_date").mask("99/99/9999");
$("input.to_date").mask("99/99/9999");
$("#searchForm").validate({
errorElement: "span",
errorContainer: $("#error"),
errorPlacement: function(error, element) {
error.appendTo(document.getElementById("error"));
},
success: function(label) {
$("#searchForm").submit();
},
rules: {
last_name: "checkfields"
}
});
$("#from_date").focus(function() {
if ($("#from_date").val() == "mm/dd/yyyy") {
$("#from_date").val("");
}
});
$("#from_date").blur(function() {
if ($("#from_date").val() == "") {
$("#from_date").val("mm/dd/yyyy");
}
});
$("#to_date").focus(function() {
if ($("#to_date").val() == "mm/dd/yyyy") {
$("#to_date").val("");
}
});
$("#to_date").blur(function() {
if ($("#to_date").val() == "") {
$("#to_date").val("mm/dd/yyyy");
}
});
});
</script>
And the form:
<form action="search.spax" id="searchForm" name="searchForm" method="post">
<div id="error" style="display:none;">
<span></span>.<br clear="all"/>
</div>
<table width="520" border="0" cellspacing="0" cellpadding="0" class="obit_form">
<tr align="left">
<th><label for="last_name">Last Name</label></th>
<th></th>
<th><label for="from_date">From</label></th>
<th><label for="to_date">To</label></th>
<th></th>
</tr>
<tr align="left">
<td><input type="text" id="last_name" class="required date" name="last_name" value="" style="width:135px;" /></td>
<td>and/or</td>
<td><input type="text" id="from_date" class="required date" name="from_date" value="mm/dd/yyyy" style="width:75px;" /></td>
<td><input type="text" id="to_date" class="required date" name="to_date" value="mm/dd/yyyy" style="width:75px;" /></td>
<td><input type="submit alt="Search" title="Search" value="Search" name="submitButton" id="Submit2" /></td>
</tr>
</table>
</form>

You're doing something like this?
$(document).ready(function() {
$('#aspnetForm').validate({
rules: {
ctl00$chMain$tbLoginEmail: {
required: true,
email: true
},
...
I know hard-coding the id isn't ideal, but you get the picture.

How to get the Id of Checkbox which is inside a Repeater

I have a repeater inside which i put a Checkbox and above rapeater there is a HTML checkbox which is used to Check/Uncheck a Checkbox which is inside repeater using client side javascript.
Here is my Code:
JavaScript for Check/Uncheck:
<script type="text/javascript">
function selectAll() {
for (i = 0; i < document.all.length; i++) {
alert("Working");
if (document.all[i].type == 'checkbox') {
if (document.getElementById(cbSelectAll).Checked = true) {
//document.all[i].Checked = false;
} else {
document.all[i].Checked = true;
}
}
}
}
</script>
HTML Code for Repeater:
<div id="hdPropertyList" runat="server">
<table border="0" cellpadding="0" cellspacing="0" class="navigation" width="100%">
<tr>
<td>
<input type="checkbox" id="cbSelectAll" onchange="selectAll()" />
<asp:Button runat="server" ID="btnContactAll" Text="Contact All" />
</td>
<td id="tdOrderBy" runat="server">
</td>
<td>
<asp:Label ID="lblPage" runat="server" CssClass="pageList"></asp:Label>
</td>
</tr>
</table>
</div>
<div class="boxleft SearchFeaturedlist" style="display: none">
<h2>
Featured Properties</h2>
</div>
<asp:Repeater ID="rptPropertyList" runat="server" EnableViewState="false" OnItemDataBound="rptPropertyList_ItemDataBound"
OnLoad="rptPropertyList_Load">
<ItemTemplate>
<table id="propertyTable" runat="server" enableviewstate="false">
<tr id="tbrLabel" runat="server" enableviewstate="false">
<td id="tbcLabel" colspan="3" runat="server" enableviewstate="false">
</td>
</tr>
<tr id="tbrTitle" runat="server" enableviewstate="false">
<td id="tbcTitle" runat="server" enableviewstate="false">
<asp:CheckBox ID="ChkSelect" runat="server" /><span id="spnSelect" runat="server"></span>
</td>
</tr>
</table>
<div id="divAds" runat="server" visible="false" enableviewstate="false" style="width: 100%;
overflow: hidden">
</div>
</ItemTemplate>
</asp:Repeater>
Please help me in this regards.
Thanks in Advance.

The ID of the repeater will be available through it's ClientID property.
Really, you want to be asking whether you need this at all. Why not place the repeater inside a named div, and then simply find all input elements that have a type of checkbox that reside within it ( getElementsByTagName would help here ).
With a decent js addon library, like mootools or jQuery, you'll be able to use CSS selectors, which will make your task even easier.
Here's mootools example :-
function selectAllOrNone()
{
var myNewValue = $('selectall').innerText == "All" ? "None" : "All";
var myCheckers = $$('input[type=checkbox]');
$('selectall').innerText = myNewValue;
myCheckers.each(
function(e) {
e.checked = (myNewValue == "None");
}
);
}

I got the answer using Jquery. I used only the HTML checkbox to Check Uncheck all the checkbox on my Asp.net page.
<script type="text/javascript">
$(document).ready(function() {
$('td.title_listing :checkbox').change(function() {
$('#cbSelectAll').attr('checked', false);
});
});
function CotactSelected() {
var n = $("td.title_listing input:checked");
alert(n.length);
var s = "";
n.each(function() {
s += $(this).val() + ",";
});
window.location = "/D_ContactSeller.aspx?property=" + s;
alert(s);
}
Thanks to "Paul Alan Tylor" for your guidance.