空引用异常，在选项卡之间切换

Question

In my controller, I have something like this:

 [OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
    public ActionResult Index()
    {

    int treatmentId = (int)UserSession.GetValue(StateNameEnum.ID, "TreatmentID");

    List<int> Ids = db.frames.Where(f => f.PlanId == treatmentId).Select(f => f.Id).ToList();
        int Id = Ids[0];

    PlanViewModel vm = new PlanViewModel();  

    case_info info = db.info.Where(r => r.Id == Id && r.LocationId ==     (int)LocationEnum.Proximal).Select(r => r).First();

    if (info.IsReference == 1)
    {
        vm.ReferenceId = ReferenceTypeEnum.Proximal.ToString();
    }
    else
    {
        vm.ReferenceId = ReferenceTypeEnum.Distal.ToString();
    }
    return PartialView(vm);

    }

and in my view I have this code:

@if (Model.ReferenceId == "Proximal") //Getting Null Reference Exception here
{
    <span class="circle Plan-circle" style="background-color: rgb(255,0,0)"></span>
}
else if (Model.ReferenceId == "Distal")
{
    <span class="circle Plan-circle" style="background-color: rgb(0,0,255)"></span>
} 

In my view, that's the kind of logic I want to use to check if the ReferenceId is set to a specific string or not and change the view based on that value from the model.

However, I noticed while the above works sometimes, I noticed I get a null exception when switching between tabs. I wonder why my model is null and if it makes sense how I'm grabbing the logic from the controller?

Using what I have set up in the controller, how can I check for when the model is set to a specific value in the view?

EDIT:

Js file that's called when switching tabs:

  ToggleTabSwitch: function (data) {

            var tabSelector = $('#tab-selector'); // any id you input in the first div
            tabSelector.on('click', '.newUI-left-selector', function () {
                $(this).removeClass('-newUI-left-selector');
                $(this).addClass('newUI-toggled-left-selector');

                //left selector toggled.
                $.ajax({
                    url: BrowserSide.Url.getFullUrl("DeformityPlanning/LoadDPPartialView"),
                    type: 'GET',
                    cache: false,
                    success: function (result) {
                        $('#selector-render').html(result);

                        BrowserSide.Plan.enableButtons();

                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        BrowserSide.AjaxLog.HandleAjaxCallFail(XMLHttpRequest, textStatus, errorThrown, "ajax error in Plan.js Load DP_form view", "");
                    }
                });

                var rightToggedSelector = $('.newUI-toggled-right-selector');
                if (rightToggedSelector.length > 0) {
                    rightToggedSelector.removeClass('newUI-toggled-right-selector');
                    rightToggedSelector.addClass('newUI-right-selector');
                }
            });

            tabSelector.on('click', '.newUI-right-selector', function () {
                $(this).removeClass('newUI-right-selector');
                $(this).addClass('newUI-toggled-right-selector');

                // right selector toggled

                $.ajax({
                    url: BrowserSide.Url.getFullUrl("DeformityPlanning/LoadAPPartialView"),
                    type: 'GET',
                    cache: false,
                    success: function (result) {
                        $('#selector-render').html(result);
                        btnList = $("button[data-val-btnName]");
                        BrowserSide.Plan.enableButtons();

                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        BrowserSide.AjaxLog.HandleAjaxCallFail(XMLHttpRequest, textStatus, errorThrown, "ajax error in Plan.js Load DP_formtwo view", "");
                    }
                });

                var rightToggedSelector = $('.newUI-toggled-left-selector');
                if (rightToggedSelector.length > 0) {
                    rightToggedSelector.removeClass('newUI-toggled-left-selector');
                    rightToggedSelector.addClass('newUI-left-selector');
                }
            });
        }

How I return the partial views in controller:

    [OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
    public ActionResult LoadDPPartialView()
    {
        return PartialView("DP_form");
    }

    [OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
    public ActionResult LoadAPPartialView()
    {
        List<PlanViewModel.PlanViewParam> newItem = new List<PlanViewModel.PlanViewParam>();

        return PartialView("DP_formtwo");
    }

EDIT #2:

Attempt to fixing the problem:

private void GetReferenceId()
    {

        int treatmentId = (int)UserSession.GetValue(StateNameEnum.ID, "TreatmentID");

        PlanViewModel vm = new PlanViewModel();

        List<int> Ids = db.frames.Where(f => f.PlanId == treatmentId).Select(f => f.Id).ToList();
        int Id = Ids[0];

         case_info info = db.info.Where(r => r.Id == Id && r.LocationId == (int)LocationEnum.Proximal).Select(r => r).First();

        if (info.IsReference == 1)
        {
            vm.ReferenceId = ReferenceTypeEnum.Proximal.ToString();
        }
        else
        {
            vm.ReferenceId = ReferenceTypeEnum.Distal.ToString();
        }
    }

    public ActionResult LoadDPPartialView()
    {
            GetReferenceId();
            return PartialView("DP_form");
    }

Answer 1

The logic you show for your Razor/CSHTML seems fine. It's very specialized to display/presentation since it's just choosing a color, so IMO it's appropriate in the view. Nothing that I would call business logic.

Although it could be made more DRY with a helper function of something like ReferenceTypeToRgbColor and use that in the style or even better emit a class and put your style in CSS. I'd also probably suggest using an enum or constants instead of string "Proximal", but that's another story.

@function string CircleTypeToCssClass(string circleType)
{ 
    if (circleType == "Proximal")
    {
        return "proximal-circle";
    }
    else if (circleType == "Distal")
    {
         return "distal-circle";
    } 
    else 
       return "";
}

<span class="circle Plan-circle @(CircleTypeToCssClass(Model.ReferenceId))"></span>

Answer 2

Are sure that your exception comes from the Razor view and not from the controller?

case_info info = db.info.Where(r => r.Id == Id && r.LocationId ==     (int)LocationEnum.Proximal).Select(r => r).First();

.First() will throw an exception, if the resultset is empty. Try using .FirstOrDefault() instead