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.
$.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);
}
});