locked
Ajax POST with ASP.NET Razor RRS feed

  • Question

  • User-344042812 posted

    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);
            }
        });
    
    Thursday, December 24, 2020 10:07 PM

All replies

  • User-1330468790 posted

    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

    • 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

     

    It would be clearer to refer to below links:

     

    Hope this helps.

    Best regards,

    Sean

    Friday, December 25, 2020 2:20 AM
  • User-344042812 posted

    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) {  
            }
        });
    })

    Friday, December 25, 2020 4:42 PM
  • User-1330468790 posted

    Hi aasonu, 

     

    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

    Monday, December 28, 2020 11:36 AM