Ext.NET 部分视图未显示

Question

我有一个显示一系列选项卡的应用程序。其中一个选项卡有一个面板，我想将其分解为部分视图。我的主视图如下所示：

@model MyModel
@{
    var x = Html.X();
}

@(x.Panel()
    .Layout(LayoutType.Fit)
    .Items(i =>
    {
        i.Add(new GridPanel
        {
            Region = Region.West,
            Layout = LayoutType.Fit.ToString(),
            Loader = x.ComponentLoader()
                .Url(Url.Action("ListSubData", "My"))
                .Mode(LoadMode.Script)
                .Params(new { id = Model.Id })
        });
    }))

我的子视图如下所示：

@model int
@{
    var x = Html.X();
}

@(x.Store(
    x.Store()
        .ID("MyDataStore")
        .AutoLoad(true)
        .Proxy(
            x.AjaxProxy()
                .Url(Url.Action("GetData", "My", new { id = Model }))
                .Reader(x.JsonReader().RootProperty("data")))
        .Model(
            x.Model()
                .Fields(
                    x.ModelField()
                        .Name("Description")
                        .Type(ModelFieldType.String),
                    x.ModelField()
                        .Name("Category")
                        .Type(ModelFieldType.String),
                    x.ModelField()
                        .Name("Id")
                        .Type(ModelFieldType.Int)))))

@(x.GridPanel()
    .ID("MyPanel")
    .StoreID("MyDataStore")
    .ColumnModel(
        x.Column()
            .DataIndex("Description")
            .Text("Name"),
        x.Column()
            .DataIndex("Category")
            .Text("Category")))

我的控制器看起来像这样：

public class MyController : Controller
{
    private readonly IStoreModelFactory _myStoreModelFactory;

    public DashboardController(IStoreModelFactory factory)
    {
        _myStoreModelFactory= factory;
    }

    public ActionResult Index(MyStoreModel model)
    {
        var viewModel = new MyViewModel
        {
            Name = model.Name,
            Id = model.Id
        };

        return View(viewModel);
    }

    public Ext.Net.MVC.PartialViewResult ListSubData(int id)
    {
        return new Ext.Net.MVC.PartialViewResult
        {
            RenderMode = RenderMode.AddTo,
            Model = id,
            ContainerId = string.Format("ListSubData_{0}", id),
            WrapByScriptTag = false
        };
    }

    public StoreResult GetData(int id)
    {
        var models = _myStoreModelFactory.GetStoreResults(id);
        return new StoreResult(models);
    }

我正在按照示例 here 进行操作，但我不确定自己是否做对了。看起来他们正在将组件直接插入他们创建的面板并将其插入 Items 集合，而我正在创建 GridPanel 并插入另一个 GridPanel 但我是不确定如何在这种情况下正确执行此操作。我应该怎么做？

Answer 1

你这里有两个问题。首先是这一行：

ContainerId = string.Format("ListSubData_{0}", id)

您的页面上需要具有此 ID 的元素，以便您可以将内容呈现到其中。所以基本上，您需要将此方法更改为：

public Ext.Net.MVC.PartialViewResult ListSubData(int id)
{
    return new Ext.Net.MVC.PartialViewResult
    {
        RenderMode = RenderMode.AddTo,
        Model = id,
        ContainerId = "MyContainerId",
        WrapByScriptTag = false
    };
}

然后将您的主视图更改为：

@(x.Panel()
    .ID("MyContainerId")
    .Layout(LayoutType.Fit)
    .Items(i =>
    <!-- rest of the code -->

第二个问题是在局部视图上存储。而不是使用 .StoreID("MyDataStore") 你必须像这样将它移动到你的网格面板中：

@(x.GridPanel()
    .ID("MyPanel")
    .Store(
        x.Store()
            .ID("MyDataStore")
            .AutoLoad(true)
            <!-- rest of the code -->

Ext.NET 部分视图未显示

Ext.NET Partial view is not showing

c#

asp.net-mvc

ext.net