子对象在Ajax Post之后返​​回Null

Question

I am submitting some info using an Ajax post which is supposed to refresh a partial view. The info gets sent to the database however on return of the partial view, the Fees.Feetype data can't be rendered as it is null.

On manual refresh, the Fees.FeeType is rendered with no problem.

How do I get the FeeType to be included in the partial view after the ajax post?

Models

    public class Members
    {
        public virtual ICollection<Fees> Fees { get; set; }
    }
    public class Fees
    {
            public int FeeTypesId { get; set; }
            public virtual FeeTypes FeeType { get; set; }
            public virtual Members Members { get; set; }
    }
    public class FeeTypes
    {
        public int Id { get; set; }
        public string FeeTypeName { get; set; }
    }

Ajax Post

            var token = $('[name=__RequestVerificationToken]').val();
            var postData = {
                __RequestVerificationToken: token,
                FeeOccurence: feeOccField.val(),
                FeeAmount: amountField.val(),
                FeeStatus: statusField.val(),
                FeeTypesId: typeField.val(),
                FeeDate: dateField.val(),
                MemberNo: memberNo
            };
            $.ajax({
                url: '/Members/AddFees',
                type: 'POST',
                data: postData,
                success: function (members) {
                    alert(result);
                    $("#details").html(members);
                },
                error: function (result) {
                    alert(result);
                },
                traditional: true

Controller

        public ActionResult AddFees (Fees fees)
        {
            if (ModelState.IsValid)
            {

                db.Fees.Add(fees);

                db.SaveChanges();

                Members members = new Members();
                members = db.Members.Find(fees.MemberNo);

                return PartialView("~/Views/Members/_MemberDetails.cshtml", members);
            }
        }

Views

@model AccPortal.Models.Members
    <div class="col-md-7 md-fees" id ="details">
        @Html.Partial("_MemberDetails", Model)
    </div>
    //This is the partial view.    
        @model AccPortal.Models.Members
            @foreach (var item in Model.Fees)
            {
//The error happens on this line but all other Fees properties are rendered without issue.
                <td class="md-fee-value"data-type="status">@item.FeeType.FeeTypeName</td>
            }

Answer 1

These are the things you need to change in your code,

First, return a partial view with model from your Action method like this,

return PartialView("_MemberDetails", members);

Datatype should be html in your ajax method. So add this bellow line inside ajax method. You can add this line after this line data: postData,

dataType: "html",

Now in your ajax success method, change like this,

success: function (members) {
             //alert(result);  what is result here, that you have written
             $("#details").html(''); //first make it blank then render
             $("#details").html(members);
            },

In your partial view, you need to check whether FeeType is there or not before render the value,

@model AccPortal.Models.Members
@foreach (var item in Model.Fees)
 {  
  if(item.FeeType != null)
   <td class="md-fee-value"data-type="status">@item.FeeType.FeeTypeName</td>
  else
   <td class="md-fee-value"data-type="status"></td> //You can write NA here
 }

Answer 2

The issue with the null type was lazy loading in the end.

I had to requery the db after I had saved the changes and include Fees.FeeTypes to return the correctly populated model.

        members = db.Members.Find(fees.MemberNo);
        members.Fees = db.Fees.Include(x => x.FeeType).Where(x => x.Members.MemberNo.Equals(x.MemberNo)).ToList();

Answer 3

you need to check for null values before populating in the list to avoid null exception

 @model AccPortal.Models.Members
            @foreach (var item in Model.Fees)
            {
              if(item.FeeType != null)
                <td class="md-fee-value"data-type="status">@item.FeeType.FeeTypeName</td>
            }

because some data might be missing which is causing problem so with if condition it will populated only that data which is not null