Send Parent ViewData to Partial that is rendered in javascript

Question

I am using asp .net core 3, I add some multiple partial via javascript

function AddBill(type)
        { tag = "....."; // some div and a tags
                $.get('/Glasses/DisplayFarBill?index=' + farIndex,
                            function (partial) {
                                $('#FarSightedBillsSection').append(tag);
                                $('#farSighted' + farIndex).append(partial);
                                $('#farSighted' + farIndex).collapse('show');
                                farIndex++;
                            });
}

I have multiple ViewData property on parent that has filled in controller via db context, if I add partialview with tag, partials recognize parent ViewData, but when I add them via javascript, they don't and I should again fill them in action and access to db multi times.

public ActionResult DisplayFarBill(int index)
        {
            ViewData["Index"] = index;

            //ViewData["LenseCover"] = new SelectList(_context.LenseCover, "Id", "Name");
            //ViewData["FrameBrand"] = new SelectList(_context.FrameBrand, "Id", "Name");
            //ViewData["FrameModel"] = new SelectList(_context.FrameModel, "Id", "Name");
            //ViewData["LenseBrand"] = new SelectList(_context.LenseBrand, "Id", "Name");

            BillFarSighted billFarSighted = new BillFarSighted
            {
                PackFactor = 1,
                LenseCoverId = 2
            };
            return PartialView("BillFarSighted", billFarSighted);
        }

how can I send Parent ViewData to partial?

score 1 · Accepted Answer · answered Sep 11 '20 at 08:04

I have multiple ViewData property on parent that has filled in controller via db context, if I add partialview with tag, partials recognize parent ViewData, but when I add them via javascript, they don't and I should again fill them in action and access to db multi times.

The reason why you can use the partialview tag to get ViewData at once is because the partialview tag is carried out at the same time when the view is loaded, and it is only loaded once.

But when you use ajax to get the partialview, the program will enter another action here is DisplayFarBill, which will make the previously stored ViewData value disappear.

If you don't want to get the data again in the DisplayFarBill action, you can use TempData to store it.

It should be noted that the TempData storage model needs to be serialized into a json string for transmission, and remember to add TempData.Keep() in partial view to keep data for next using.

For the specific difference between TempData and ViewData, please refer to: TempData vs ViewData

The following is the example where I use TempData:

 public IActionResult Index()
    {
        var data=  new SelectList(_context.LenseCover, "Id", "Name");
        TempData["LenseCover"] = JsonConvert.SerializeObject(data); 
        return View(); 
    }
    public ActionResult DisplayFarBill(int index)
    {
        ViewData["Index"] = index; 
        BillFarSighted billFarSighted = new BillFarSighted
        {
            PackFactor = 1,
            LenseCoverId = 2
        };
        return PartialView("BillFarSighted", billFarSighted);
    }

BillFarSighted partial view:

  @using Newtonsoft.Json;
    @model BillFarSighted
    
    @Html.DropDownList("LenseCover", JsonConvert.DeserializeObject<List<SelectListItem>>(TempData["LenseCover"].ToString()).ToList())
    @{TempData.Keep();}

Here is the test result:

Send Parent ViewData to Partial that is rendered in javascript

1 Answers1