将 Parent ViewData 发送到 javascript 中呈现的 Partial

Question

我正在使用 asp .net core 3，我通过 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++;
                            });
}

我在父级上有多个 ViewData 属性已通过数据库上下文填充控制器，如果我添加带有标签的 partialview，部分识别父级 ViewData，但是当我通过 javascript 添加它们时，它们不会，我应该再次填写它们并多次访问数据库。

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);
        }

如何将父视图数据发送到部分？

Answer 1

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.

之所以可以使用partialview标签一次获取ViewData，是因为partialview标签是在视图加载的时候同时进行的，而且只加载一次。

但是当你使用ajax获取partialview时，程序会在这里进入另外一个action是DisplayFarBill，这会将之前存储的ViewData值消失。

如果不想在DisplayFarBill动作中再次获取数据，可以使用TempData存储。

需要注意的是TempData存储模型需要序列化成json字符串进行传输，记得在partial中加上TempData.Keep()查看以保留数据以供下次使用。

TempData和ViewData的具体区别可以参考：TempData vs ViewData

以下是我使用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 局部视图：

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

测试结果如下：

将 Parent ViewData 发送到 javascript 中呈现的 Partial

Send Parent ViewData to Partial that is rendered in javascript

asp.net-mvc-partialview

asp.net-core