0

在我的主视图中，我有一个空的占位符 div，我在用户点击时填充了一个内部视图。我希望能够在我的主视图中拥有相同内部视图的多个副本，每个内部视图都有不同的数据。

主视图有自己的模型和控制器，内部视图有自己的模型和控制器。在主视图中选择项目时，内部视图会填充与选择相关的数据。我根据所选项目的 id 从 Web 服务获取这些数据，因此在此之前我无法用数据填充内部视图的模型。

由于多个视图 div 不能都具有相同的 ID，因此我不能使用@Ajax.ActionLinkwith 之类的东西UpdateTargetId。相反，我声明了它<div class='placeholderDiv' title='@[some_unique_id]'>，我可以在主视图中使用以下内容成功绘制多个 div：

$.ajax(
{
    type: 'POST',
    data: { 'id': id },
    dataType: 'html',
    url: '/MyController/MyMethod',
    success: function (result) {
        $(".placeholderDiv[title=" + id + "]").html(result);
    }
});

现在，我希望用户能够在内部视图中更新模型。我可以在内部视图的控制器中执行此操作，但无法显示更改。我应该如何placeholderDiv从内部视图访问带有主视图中的类的 div？

4

1 回答 1

1

这听起来像是将您的“内部视图”“外包”到客户端模板的好选择。这样，您可以在某处定义一个标准模板（可能在您的主视图中？），您所做的就是从您的服务中获取您的模型，将其绑定到您的模板副本，然后将其渲染到页面上.

我现在正在看的一个很棒的模板库是DustJS。使用它，我可以像这样定义一个模板（请注意，这只能在您的页面中定义一次）：

<div id="{id}">
    <h1>{name}</h1>
    {?accounts}
    <ul>
        {#accounts}
        <li>Account Number : {accountNumber}</li>
        {/accounts}
    </ul>
    {:else}
    <p class="error">No accounts for this user.</p>
    {/accounts}
</div>

...然后绑定一个模型，如下所示（可以由您的服务返回）：

{ 
    id : '123456',
    name : 'TheBeatlemaniac',
    accounts : [
        { accountNumber : 'FOO1234' },
        { accountNumber : 'BAR1234' },
        { accountNumber : 'FOB1234' }
    ]
}

...这将自动呈现标记，如下所示：

<div id="123456">
    <h1>TheBeatlemaniac</h1>
    <ul>
        <li>Account Number : FOO1234</li>
        <li>Account Number : BAR1234</li>
        <li>Account Number : FOB1234</li>
    <ul>
</div>

...最后，您可以随意将其粘贴到您的主视图容器上。

肯定有其他方法可以做你想做的事，但我推荐这个的理由是它（通常）对你的带宽更轻，因为你必须返回的只是（例如）与你的模型相对应的 JSON 数据. 如果您从该服务请求数据，并且它返回固定的 HTML 标记并仅进行关键更改，那么冗余很快就会增加。您让服务器端代码释放一些所谓的必要处理，因此这可能是一件好事。

于 2013-06-10T23:54:49.580 回答