javascript - AJAX 调用为空

Question

我在 View 中有一个 AJAX 调用，它很难从数据库中提取数据来填充下拉列表。 DB 已填充。在浏览器控制台内，我可以看到它已找到正确的 ID，但我收到以下错误:

"Failed to load resource: the server responded with a status of 500 (Internal Server Error)"

单击此链接将导致服务器错误:

"The parameters dictionary contains a null entry for parameter 'serviceId' of non-nullable type 'System.Int32' for method 'System.Web.Mvc.JsonResult GetServiceDetails(Int32)' in 'YardLad.Controllers.ServiceController'. An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter. Parameter name: parameters"

这是我到目前为止的代码:

AJAX 调用:

function GetServices() {
        $.ajax({
            type: "GET",
            url: "/Service/GetServices",
            data: { serviceAreaId: $('#ServiceAreaId').val() },
            datatype: 'JSONP',
            async: true
        })
        .done(function (services) {
            $('#ServiceId').empty(); //commenting this line gets the field to never populate with nulls, leaving the 
                                     //"loading services..." there permanently, also brings up the request a contractor button.
            $.each(services, function (i, service) { //the i is the index being passed to it... service is the value
                $("#ServiceId").append(
                    $('<option/>')
                    .attr('value', this.ServiceId)
                    .text(this.Name)
                );
            });

            GetServiceDescription();
        });
    }

Controller :

//
    // GET: Service/GetServices/

    public JsonResult GetServices(int serviceAreaId)
    {
        // selected service area
        var selectedServiceArea = db.ServiceAreas.Where(sa => sa.ServiceAreaId == serviceAreaId).SingleOrDefault();
        var currentDate = DateTime.Now.AddHours(2);

        // list of contractors that are listed (and not expired) and have at least one contractor service added
        var contractors = db.Contractors.Where(c => c.IsActive == true).Where(c => c.ExpiresOn.Value >= currentDate).Where(c => c.ContractorServices.Count >= 1).ToList();
        HashSet<int> contractorIds = new HashSet<int>(contractors.Select(x => x.ContractorId));

        // filter list of contractors to include only those who offer services in the selected service area
        var primary = db.Contractors.ToList().FindAll(x => contractorIds.Contains(x.ContractorId))
            .Where(c => c.ServiceAreaId == serviceAreaId).Distinct().ToList();

        var secondary = db.ContractorServiceAreas.ToList().FindAll(x => contractorIds.Contains(x.ContractorId))
            .Where(csa => csa.ServiceAreaId == serviceAreaId).Select(x => x.Contractor).Distinct().ToList();

        foreach (var contractor in secondary)
        {
            if (primary.Contains(contractor) == false)
            {
                primary.Add(contractor);
            }
        }

        // only return services in the selected service area that contractors have added
        HashSet<int> filteredContractorIds = new HashSet<int>(primary.Select(x => x.ContractorId));

        var services = db.ContractorServices.ToList().FindAll(x => filteredContractorIds.Contains(x.ContractorId))
            .Select(x => x.Service).Distinct().OrderBy(s => s.ServiceCategory.Name).ThenBy(s => s.Name)
            .Select(x => new {
                ServiceId = x.ServiceId,
                Name = x.Name
            });

        return this.Json(services, JsonRequestBehavior.AllowGet);
    }

    //
    // GET: Service/GetServiceDetails/1

    public JsonResult GetServiceDetails(int serviceId)
    {
        var details = db.Services.Where(s => s.ServiceId == serviceId)
            .Select(x => new
            {
                Description = x.Description,
                BasePrice = x.BasePrice
            });

        return this.Json(details, JsonRequestBehavior.AllowGet);
    }

.cshtml

@using (Html.BeginForm("RequestService", "Service", FormMethod.Post))
{
<div class="two-third" style="margin-right: 0;">
    <div id="requestService" style="overflow: auto">
        <h2>Request a Service</h2>
        @Html.ValidationSummary(true)

        <div class="display-label">Select a State</div>
        <div class="editor-field">
            <select id="StateId" name="StateId">
                <option value="0">loading states...</option>
            </select>
        </div>

        <div class="display-label">Select a Service Area</div>
        <div class="editor-field">
            <select id="ServiceAreaId" name="ServiceAreaId">
                <option value="0">loading service areas...</option>
            </select>
        </div>

        <div class="display-label">Select a Service</div>
        <div class="editor-field">
            <select id="ServiceId" name="ServiceId">
                <option value="0">loading services...</option>
            </select>
        </div>

        <div class="selectedService" style="display: none;">
            <div class="display-label">Service Description</div>
            <div class="editor-field" id="ServiceDescription"></div>
            <div class="serviceOptions" id="ServiceOptions"></div>
            <div style="text-align: right;">
                <input type="submit" id="SubmitRequest" value="Select a Contractor" />
            </div>
        </div>
    </div>
</div>

<div class="one-third" style="float: right; margin-top: 0;">
    <div id="summary">
        <h3>Yard Lad Service Estimate</h3>
        <p>This is an initial Yard Lad estimate. The end total may be higher or lower based upon the contractor you choose, 
        as well as the contractors on-site assessment. Payment adjustments are easy to make on site or online after the 
        service has been completed.</p>
        <div style="font-weight: bold;">Subtotal: $<span class="subtotal">0.00</span></div>
    </div>
</div>

<input type="hidden" class="stateId" name="StateId" value="0" />
<input type="hidden" class="serviceAreaId" name="ServiceAreaId" value="0" />
<input type="hidden" class="serviceId" name="ServiceId" value="0" />

更改 Ajax 调用“url”后，服务器错误略有变化。我提供了下面的更新图片: Server Error Image

Answer 1

当您的服务器收到 HTTP Get 请求时，它期望 url 内的查询字符串中有一个 Id(例如 Service/GetServices/1)，该 ID 位于请求 header 中。您的 Id 实际上位于请求正文中，而不是位于 url 中。这就是您的服务器代码提示的原因。要实现此功能，您可以将 JavaScript 代码更改为

function GetServices() {
        $.ajax({
            type: "GET",
            url: "/Service/GetServices/?serviceId=" + $('#ServiceAreaId').val(), 
            dataType: "jsonp",    
            async: true
        })
        .done(function (services) {
            $('#ServiceId').empty(); //commenting this line gets the field to never populate with nulls, leaving the 
                                 //"loading services..." there permanently, also brings up the request a contractor button.
            $.each(services, function (i, service) { //the i is the index being passed to it... service is the value
            $("#ServiceId").append(
                $('<option/>')
                .attr('value', this.ServiceId)
                .text(this.Name)
            );
        });

        GetServiceDescription();
    });
}