Ajax POST 和 ASP.NET 剃刀

Question

我正在开发一个 ASP.NET 核心 Razor 应用程序，我有一个正在发布的表单，但我不希望页面在提交时重新加载。我读到这可以通过使用 Ajax 来避免，但我不确定如何实现它。

这是我的表格：

<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" value="Submit"/>
    </div>
</form>

这是我的页面模型中的 POST 函数：

public IActionResult OnPost(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();
        }

这是我目前所拥有的，我以前从未使用过Ajax并且我有一个项目截止日期：

$.ajax({
        type: "POST",
        url: "/Identity/Account/Ratings",
        contentType: 'application/json; charset=utf-8',
        dataType: "json",
        success: function (response) {
            alert(response);
        },
        failure: function (response) {
            alert(response);
        }
    });

感谢您的帮助。

Answer 1

您可以通过

阻止表单提交

$('form').on('submit',function(e){
e.preventDefault();

////then ajax call

})

Answer 2

如果你想在 razor 页面中使用 ajax 和 post 方法，这里有一个演示： TestFormPost.cshtml（脚本）：

$("#bankDropdown").on('submit', function (e) {
            e.preventDefault();
            $.ajax({
                type: "POST",
                url: "",
                data: $("#bankDropdown").serialize(),
                headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
                success: function (data) {

                }
            });

        })

TestFormPost.cshtml.cs:

public class TestFormPostModel : PageModel
    {
        [BindProperty]
        public List<Bank> BankLists { get; set; }
        [BindProperty]
        public DateSelect DateSelect { get; set; }
        public IActionResult OnGet()
        {
            BankLists = new List<Bank> {
                new Bank{  ShortName="bank1"},
                new Bank{  ShortName="bank2"},
                new Bank{  ShortName="bank3"}
            };
            return Page();
        }
        public IActionResult OnPost(string DateMonthYear, string DateMonthYear1, string BankOptions) {
            return Page();
        }
    }
    public class Bank 
    {
        public string ShortName { get; set; }
    }
    public class DateSelect
    {
        public string DateMonthYear { get; set; }

        public string DateMonthYear1 { get; set; }
    }

结果：

Ajax POST 和 ASP.NET 剃刀

Ajax POST with ASP.NET Razor

javascript

ajax

asp.net-ajax

asp.net-core