且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

执行ajax调用时序列化类型的对象时检测到循环引用

更新时间:2021-10-11 10:22:26

据我所知,要解决此问题,您可以执行以下步骤:

As far as I can see from your problem, to fix it you can do following steps:

1-查看

添加部分视图(_Detail.cshtml)

您需要一个像_Detail这样的partial view,其中包括这样的table:

You need a partial view like _Detail that includes your table like this:

@model PersonnelDetailsVm  

<table class="table table-bordered">
    <thead>
        <tr>
            <th></th>
            @foreach (var date in Model.CurrentWeekDates)
            {
                <th class="text-center">@date.ToString("ddd") <br /> @date.ToShortDateString()</th>
            }
                <th class="text-center table-success">Total For Week</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var weighLocation in Model.WeighLocations)
        {
            <tr class="text-center">
                <td class="table-dark">@weighLocation.Weigh_Location</td>
                @foreach (var date in Model.CurrentWeekDates)
                {
                    if (Model.WeighAssociations.Any(x => x.tbl_TEUForm.EventDate == date && x.WeighLocationId == weighLocation.ID))
                    {
                        <td>@Model.WeighAssociations.Single(x => x.tbl_TEUForm.EventDate == date && x.WeighLocationId == weighLocation.ID).OccurenceCount</td>
                    }
                    else
                    {
                        <td>0</td>
                    }

                }
                <td class="table-success font-weight-bold">@Model.WeighAssociations.Where(x => x.WeighLocationId == weighLocation.ID).Sum(x => x.OccurenceCount)</td>
            </tr>
        }
    </tbody>
</table>

2-控制器

返回部分视图

您应该在控制器中填充模型并将其传递到局部视图.

You should fill the model in your controller and pass it to the partial view.

public ActionResult Details(string id, string detailsDate)
{
    if (id == null)
    {
        return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
    }

    tblPersonnel tblPersonnel = db.tblPersonnels.Find(id);

    if (tblPersonnel == null)
    {
        return HttpNotFound();
    }

    Mapper.Initialize(config => config.CreateMap<tblPersonnel, PersonnelDetailsVm>());
    PersonnelDetailsVm person = Mapper.Map<tblPersonnel, PersonnelDetailsVm>(tblPersonnel);

    var employeeData = EmployeeData.GetEmployee(person.IBM);

    person.UserName =
        $"{ConvertRankAbbr.Conversion(employeeData.Rank_Position)} {employeeData.FirstName} {employeeData.LastName}";

    if (string.IsNullOrWhiteSpace(detailsDate))
    {
        var startOfWeek = DateTime.Today.AddDays((int)CultureInfo.CurrentCulture.DateTimeFormat.FirstDayOfWeek -
                                                 (int)DateTime.Today.DayOfWeek);
        person.CurrentWeekDates = Enumerable.Range(0, 7).Select(i => startOfWeek.AddDays(i)).ToList();
        var teuFormIds = db.tbl_TEUForm
            .Where(x => person.CurrentWeekDates.Contains(x.EventDate) && x.PersonnelIBM == person.IBM).Select(t => t.Id).ToList();

        person.WeighAssociations = db.tbl_WeighAssc.Where(x => teuFormIds.Contains(x.TEUId)).ToList();
        person.ArrestAssociations = db.tbl_TEUArrestAssc.Where(x => teuFormIds.Contains(x.TEUId)).ToList();
        person.InspectionAssociations =
            db.tblTEUInspectionAsscs.Where(x => teuFormIds.Contains(x.TEUId)).ToList();


        // return View(person); 



    }
    else
    {
        var paramDate = DateTime.ParseExact(detailsDate, "MM/dd/yyyy", CultureInfo.CurrentCulture);

        var startOfWeek = paramDate.AddDays((int)CultureInfo.CurrentCulture.DateTimeFormat.FirstDayOfWeek -
                                                 (int)paramDate.DayOfWeek);
        person.CurrentWeekDates = Enumerable.Range(0, 7).Select(i => startOfWeek.AddDays(i)).ToList();
        var teuFormIds = db.tbl_TEUForm
            .Where(x => person.CurrentWeekDates.Contains(x.EventDate) && x.PersonnelIBM == person.IBM).Select(t => t.Id).ToList();

        person.WeighAssociations = db.tbl_WeighAssc.Where(x => teuFormIds.Contains(x.TEUId)).ToList();
        person.ArrestAssociations = db.tbl_TEUArrestAssc.Where(x => teuFormIds.Contains(x.TEUId)).ToList();
        person.InspectionAssociations =
            db.tblTEUInspectionAsscs.Where(x => teuFormIds.Contains(x.TEUId)).ToList();

        // return Json(person, JsonRequestBehavior.AllowGet);
    }

    // return PartialView with the person model
    return PartialView("_Detail", person);

}

如上面的代码所示,您应该在代码中注释两行:

As you can see in the above code, you should comment the two lines in your code:

// return View(person); 
// return Json(person, JsonRequestBehavior.AllowGet);

3- Ajax通话

获取局部视图并填写表单

您在ajax调用中没有任何更改,您可以这样做:

You don't any changes in ajax call and you can do it like this:

$("#Details-Date-Btn").click(function() {
    $.ajax({
        url: infoGetUrl,
        method: "POST",
        data: $("form").serialize(),
        success: function(response) {
            console.log("success");
            $("body").html(response);
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log(jqXHR);
        }
    });
});

response以这种方式是来自局部视图的html,并且包含您设计时的所有类.

response in this way is a html that comes from partial view and it has all classes as you designed it.