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部分视图未显示

1 个答案: