在 ASP.NET Razor 页面 Jquery Ajax 功能不起作用

Question

我有一个两个onchange 函数用于一个名为创建交付请求的页面。一种是当接收者的dropdownlist 改变时，它应该显示所选接收者的电话号码和地址。另一种是当delivery item的dropdownlist发生变化时，需要设置数量的max属性。 这两个的url都链接到razor页面中自定义的OnGet方法。

但是，通常上面的Onget 方法会被命中，而下面的则不会。并且上面的OnGet方法也不能得到传递ID的干粮，里面是null。而且这两个jQuery ajax 函数根本不起作用。我完全是初学者。希望有人可以帮助我。提前致谢。

在create.cshtml中：

<div class="mb-3">
    Receiver Name
    <select id="receiver" asp-for="Delivery.ReceiverID" asp-items="Model.ReceiverList" class="form-control">
        <option>--Select the Receiever--</option>
    </select>
</div>
<div class="mb-3">
    Receiver Phone
    <span id="receiverphone" class="form-control">----</span>
</div>
<div class="mb-3">
    Receiver Address
    <div id="receiveradrs1" class="form-control">----</div>
    <div id="receiveradrs2" class="form-control">----</div>
</div>
<div class="mb-3">
    Delivery Item
    <select id="deliveryitem" asp-for="DeliveryItem.DryFoodID" asp-items="Model.DeliveryItemList" class="form-control">
        <option>--Select Delivery Item--</option>
    </select>
</div>
<div class="mb-3">
    Quantity
    <input id="quantity" asp-for="DeliveryItem.Quantity" min="1" class="form-control" />
</div>

在create.csthml.cs中，这里有两个自定义的OnGet方法：

public async Task<IActionResult> OnGetSetMaxQuantity(int id)
{
    List<DryFoodDonation> dfdlist = await _db.DryFoodDonation.ToListAsync();
    var dryfood = dfdlist.Where(d => d.Id == id).FirstOrDefault();
    Debug.WriteLine(dryfood.DryFoodName + " " + dryfood.DryFoodRemainQuantity);
    return new JsonResult(dryfood.DryFoodRemainQuantity);
}

public async Task<IActionResult> OnGetGetPhoneAdrs(int id)
{
    List<User> receiverlist = await _db.User.Where(u => u.UserType.TypeID == 3).ToListAsync();
    var selectreceiver = receiverlist.Where(d => d.UserID == id).FirstOrDefault();
    Debug.WriteLine(selectreceiver.UserName + " " + selectreceiver.UserPhone);
    return new JsonResult(selectreceiver);
}

JavaScript 文件中的 jQuery AJAX 函数：

$(document).ready(function () {
    $("#receiver").change(function () {
        alert('Yes receiver here changed.');
        var item = $(this).val();
        $.ajax({
            type: 'GET',
            url: 'Create/?handler=GetPhoneAdrs',
            beforeSend: function (xhr) {
                xhr.setRequestHeader("XSRF-TOKEN",
                    $('input:hidden[name="__RequestVerificationToken"]').val());
            },
            data: {
                'id': item
            },
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function (data) {
                $('#receiverphone').html(data.UserPhone);
                $('#receiveradrs1').html(data.UserAdrs1);
                $('#receiveradrs2').html(data.UserAdrs2);
            }
        });
    });

    $("#deliveryitem").change(function () {
        alert('Yes item here changed.');
        var item = $(this).val();
        $.ajax({
            type: 'GET',
            url: 'Create/?handler=SetMaxQuantity',
            beforeSend: function (xhr) {
                xhr.setRequestHeader("XSRF-TOKEN",
                    $('input:hidden[name="__RequestVerificationToken"]').val());
            },
            data: {
                "id": item
            },
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function (data) {
                $("#quantity").attr({
                    "min": 1,
                    "max": data
                });
            }
        });
    });
});

请帮我解决这个问题。我无法在几周内解决这个问题。谢谢！

Answer 1

// cshtml.cs 

const sendMe = async function (someData) {
    $.ajax({
        type: 'POST',
        dataType: 'json',
        url: '/ControllerName/MethodNameInController',
        data: { someData: someData },
        success: function (response) {
            if (response != null && response.statusCode == 200) {
                ..
            } else {
                ..
            }
        }
    });
}


//Controller
[HttpPost("MethodNameInController")]
public IActionResult MethodNameInController([FromForm] string someData) {
..
}