Hi everyone, how do I stop a page from reloading when a submit button in a form has been pressed. I have been unable to implement ajax successfully. In my OnPostList method, I use model binding to get the values of the user input.
This is my form:
<form id="bankDropdown" method="post">
<div><labelclass="ratings-text"for="bank">Select Bank:</label><selectname="BankOptions"class="form-control ratings-text"style="width:21%"id="bank">
@foreach (var bank in Model.BankLists)
{
<optionname="BankOptions"value="@bank.ShortName"id="selection">@bank.ShortName</option>
}
</select></div><br /><div><label>Enter Start Date:</label><inputtype="date"asp-for="DateSelect.DateMonthYear1"class="DateMonthYear"name="DateMonthYear1"><idata-toggle="tooltip"title="Set to first day of the month for optimal results"class="far fa-question-circle"></i></div><br /><div><label>Enter End Date:</label><inputtype="date"asp-for="DateSelect.DateMonthYear"class="DateMonthYear"name="DateMonthYear"required><idata-toggle="tooltip"title="Set to last or current day of the month for optimal results"class="far fa-question-circle"></i></div><br /><div><inputclass="ratings-button"type="submit" asp-page-handler="List" value="Submit"/></div></form>
This is the page model and it's OnPost method.
public IActionResult OnPostList(string DateMonthYear, string DateMonthYear1, string BankOptions)
{
CurrentDate = string.Format(DateMonthYear);
SelectBank = BankOptions;
BankLists = ModelService.RunBankList();
TotalBankCollections = ModelService.RunTotalBankCollection1(DateMonthYear);
TotalTransactionCounts = ModelService.RunTotalTransactionCount1(DateMonthYear1, DateMonthYear);
long floatTotalCount = 0;
int intVolumeCount = 0;
string stringTotalVolume = "";
//get individual bank monthly collections
foreach (var collection in TotalBankCollections)
{
if (BankOptions == collection.ShortName)
{
string myBank = collection.TotalCollection;
BankCollection = Convert.ToDecimal(myBank).ToString("#,###,###.##");
}
}
//get total collections from all the banks
foreach (var collection in TotalBankCollections)
{
floatTotalCount += (long)Convert.ToDouble(collection.TotalCollection);
string stringTotalCount = Convert.ToDecimal(floatTotalCount).ToString("#,###,###.##");
TotalCollectionCount = stringTotalCount;
}
//get individual monthly volume collections
foreach (var collection in TotalTransactionCounts)
{
if (BankOptions == collection.ShortName)
{
string myBank = collection.TotalCount;
MonthlyVolumeCount = Convert.ToDecimal(myBank).ToString("#,##0");
}
}
//get total transactions of all banks
foreach (var collection in TotalTransactionCounts)
{
intVolumeCount += int.Parse(collection.TotalCount);
stringTotalVolume = intVolumeCount.ToString("#,##0");
TotalVolumeCount = stringTotalVolume;
}
return Page();
}
So far this is the ajax function I have been able to come up with.
If you don't want to use default form submission, you could use 'event.preventDefault()' either on button click event handler or form submit event handler.
I can see that you have included jQuery lib in your project so that I will provide you with a workaround with jQuery.
Basic steps
assign a class or id to the button/form so that you could select the element and assign it with an event handler.
in the event handler function, you could assign it with a parameter, e.g. 'e' which is a
event object which will be passed to event handlers.
then you could use this event object to prevent submission calling '.preventDefault()' function
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
Thanks for the article links, they were really helpful. I was able to stop the form from submitting, however it runs just once before it reloads again. Why is this?.
This is my ajax code:
$("#bankDropdown").on('submit', function (e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "/Identity/Account/Ratings",
data: $("#bankDropdown").serialize(),
success: function (data) {
}
});
})
If you want to solve the problem inside your codes, you might need to provide us with more details like:
Where do you put the js codes ('onsubmit' event handler binding fucntion)
?
Is there any error message in developer tools (Press F12 in browser when you do debugging)
Do you use 'success' callback function to reload/replace the page or use 'window.location.reload()'?
The related properies in the page model would be useful to build the codes as well as data models.
What we are trying to do is to narrow down the possible causes of the problem and find out the reason.
Thank you for understanding.
Best regards,
Sean
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
None
0 Points
2 Posts
Ajax POST with ASP.NET Razor
Dec 24, 2020 10:07 PM|aasonu|LINK
Hi everyone, how do I stop a page from reloading when a submit button in a form has been pressed. I have been unable to implement ajax successfully. In my OnPostList method, I use model binding to get the values of the user input.
This is my form:
<form id="bankDropdown" method="post"> <div> <label class="ratings-text" for="bank">Select Bank:</label> <select name="BankOptions" class="form-control ratings-text" style="width:21%" id="bank"> @foreach (var bank in Model.BankLists) { <option name="BankOptions" value="@bank.ShortName" id="selection">@bank.ShortName</option> } </select> </div> <br /> <div> <label>Enter Start Date:</label> <input type="date" asp-for="DateSelect.DateMonthYear1" class="DateMonthYear" name="DateMonthYear1"> <i data-toggle="tooltip" title="Set to first day of the month for optimal results" class="far fa-question-circle"></i> </div> <br /> <div> <label>Enter End Date:</label> <input type="date" asp-for="DateSelect.DateMonthYear" class="DateMonthYear" name="DateMonthYear" required> <i data-toggle="tooltip" title="Set to last or current day of the month for optimal results" class="far fa-question-circle"></i> </div> <br /> <div> <input class="ratings-button" type="submit" asp-page-handler="List" value="Submit"/> </div> </form>This is the page model and it's OnPost method.
public IActionResult OnPostList(string DateMonthYear, string DateMonthYear1, string BankOptions) { CurrentDate = string.Format(DateMonthYear); SelectBank = BankOptions; BankLists = ModelService.RunBankList(); TotalBankCollections = ModelService.RunTotalBankCollection1(DateMonthYear); TotalTransactionCounts = ModelService.RunTotalTransactionCount1(DateMonthYear1, DateMonthYear); long floatTotalCount = 0; int intVolumeCount = 0; string stringTotalVolume = ""; //get individual bank monthly collections foreach (var collection in TotalBankCollections) { if (BankOptions == collection.ShortName) { string myBank = collection.TotalCollection; BankCollection = Convert.ToDecimal(myBank).ToString("#,###,###.##"); } } //get total collections from all the banks foreach (var collection in TotalBankCollections) { floatTotalCount += (long)Convert.ToDouble(collection.TotalCollection); string stringTotalCount = Convert.ToDecimal(floatTotalCount).ToString("#,###,###.##"); TotalCollectionCount = stringTotalCount; } //get individual monthly volume collections foreach (var collection in TotalTransactionCounts) { if (BankOptions == collection.ShortName) { string myBank = collection.TotalCount; MonthlyVolumeCount = Convert.ToDecimal(myBank).ToString("#,##0"); } } //get total transactions of all banks foreach (var collection in TotalTransactionCounts) { intVolumeCount += int.Parse(collection.TotalCount); stringTotalVolume = intVolumeCount.ToString("#,##0"); TotalVolumeCount = stringTotalVolume; } return Page(); }
So far this is the ajax function I have been able to come up with.
$.ajax({ type: "POST", url: "/Identity/Account/Ratings?handler=List", contentType: 'application/json; charset=utf-8', dataType: "json", success: function (response) { alert(response); }, failure: function (response) { alert(response); } });Contributor
2600 Points
785 Posts
Re: Ajax POST with ASP.NET Razor
Dec 25, 2020 02:20 AM|Sean Fang|LINK
Hi aasonu,
If you don't want to use default form submission, you could use 'event.preventDefault()' either on button click event handler or form submit event handler.
I can see that you have included jQuery lib in your project so that I will provide you with a workaround with jQuery.
Basic steps
eventobject which will be passed to event handlers.It would be clearer to refer to below links:
Hope this helps.
Best regards,
Sean
None
0 Points
2 Posts
Re: Ajax POST with ASP.NET Razor
Dec 25, 2020 04:42 PM|aasonu|LINK
Hi Sean,
Thanks for the article links, they were really helpful. I was able to stop the form from submitting, however it runs just once before it reloads again. Why is this?.
This is my ajax code:
$("#bankDropdown").on('submit', function (e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "/Identity/Account/Ratings",
data: $("#bankDropdown").serialize(),
success: function (data) {
}
});
})
Contributor
2600 Points
785 Posts
Re: Ajax POST with ASP.NET Razor
Dec 28, 2020 11:36 AM|Sean Fang|LINK
Hi aasonu,
If you want to solve the problem inside your codes, you might need to provide us with more details like:
What we are trying to do is to narrow down the possible causes of the problem and find out the reason.
Thank you for understanding.
Best regards,
Sean