使用JQuery Tabs的MVC编辑器

Question

我正在尝试创建一个使用标签的editortemplate（它需要可重复并存在于标签内容中，这意味着编辑器正在创建嵌套标签）。这是我到目前为止所拥有的。 编辑器外部的选项卡工作得很好。很长一段时间我一直在努力，但我无法理解。

我在使用和不使用@section scripts {}

时尝试过此操作

无效的editortemplate

@model WebCommerceCsv.Models.SupportingModels.CompositeModels.PageEntry
<div class="BlockContainer">
    @Html.ValidationSummary(true)

    <div class="PrimaryContainer">
        <fieldset>
            <legend>
                @{
                    if (Model.PageWideEntryModel != null && Model.PageWideEntryModel.Title != null) {
                        @:@Model.PageWideEntryModel.Title.Value
                        } else {
                        <text>Unnamed Page</text>
                    }
                }
            </legend>

            @Html.HiddenFor(model => model.pageImpl)
            <div id=@("tabs" + Model.pageImpl.Id) class="tabs">
                <ul class="tab-links">
                    <li><a href=@("#tab1" + Model.pageImpl.Id)>Page Wide</a></li>
                    <li><a href=@("#tab2" + Model.pageImpl.Id)>Ribbons</a></li>
                    <li><a href=@("#tab3" + Model.pageImpl.Id)>Sales Racks</a></li>
                    <li><a href=@("#tab4" + Model.pageImpl.Id)>Spinners</a></li>
                    <li><a href=@("#tab5" + Model.pageImpl.Id)>HTML</a></li>
                </ul>

                <div id=@("tab1" + Model.pageImpl.Id) class="tab">
                    @{
                        if (Model.PageWideEntryModel != null) {
                            @Html.EditorFor(model => model.PageWideEntryModel)
                        }
                    }
                </div>

                <div id=@("tab2" + Model.pageImpl.Id) class="tab">
                    Ribbons are here and this is a lot of text to make sure I can see it because I'm so awesome because lot's of text blah blah
                    @{
                        if (Model.RibbonEntryModel != null) {
                            for (int i = 0; i < Model.RibbonEntryModel.Count; i++) {
                                Html.EditorFor(model => model.RibbonEntryModel[i]);
                            }
                        }
                    }
                </div>

                <div id=@("tab3" + Model.pageImpl.Id) class="tab">
                    @{
                        if (Model.SalesRackEntryModel != null) {
                            for (int i = 0; i < Model.SalesRackEntryModel.Count; i++) {
                                Html.EditorFor(model => model.SalesRackEntryModel[i]);
                            }
                        }
                    }
                </div>

                <div id=@("tab4" + Model.pageImpl.Id) class="tab">
                    @{
                        if (Model.SpinnerEntryModel != null) {
                            for (int i = 0; i < Model.SpinnerEntryModel.Count; i++) {
                                Html.EditorFor(model => model.SpinnerEntryModel[i]);
                            }
                        }
                    }
                </div>

                <div id=@("tab5" + Model.pageImpl.Id) class="tab">
                    jfkjfsdajfkldsjkfljdskajfkldsjafkl;jdisjafosdjfkljdsiofjklsdjfoidsj;ajfdklsjfosjfkldsjiofjdsfjdsoijfsdljfidsjfilsdifdsljfilds
                    @{
                        if (Model.HtmlEntryModel != null) {
                            for (int i = 0; i < Model.HtmlEntryModel.Count; i++) {
                                Html.EditorFor(model => model.HtmlEntryModel[i]);
                            }
                        }
                    }
                </div>
            </div>
        </fieldset>
    </div>
</div>

@section scripts {
    <script type="text/javascript">
        $(function () {
            $(@("#tabs" + Model.pageImpl.Id)).tabs();
        });
    </script>
}

正在调用它的主页

@model WebCommerceCsv.Models.SupportingModels.CompositeModels.SiteEntry

@{
    ViewBag.Title = "Edit";
}

<h2 class="NameHeader">@ViewBag.Header</h2>

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)

    @Html.HiddenFor(model => model.siteImpl)

    <div id="tabs" class="tabs">
        <ul class="tab-links">
            <li><a href="#tab1">Add Page</a></li>
            <li><a href="#tab2">Site Wide</a></li>
            <li><a href="#tab3">Social Media</a></li>
            <li><a href="#tab4">Categories</a></li>
            @for (int i = 0; i < Model.Pages.Count; i++) {
                <li><a href=@("#tab" + (i + 5))>
                    @{
                        if (Model.Pages[i].PageWideEntryModel != null && Model.Pages[i].PageWideEntryModel.Title != null && !string.IsNullOrWhiteSpace(Model.Pages[i].PageWideEntryModel.Title.Value)) {
                            @:@Model.Pages[i].PageWideEntryModel.Title.Value
                        } else {
                            <text>Unnamed Page</text>
                        } 
                    }
                    </a></li>
            }
        </ul>

        <div id="tab1" class="tab">
            <div class="BlockContainer">
                <p class="LowerButton">
                    <button type="submit" name="AddExtraPage">Add Page</button>
                </p>
            </div>
        </div>

        <div id="tab2" class="tab">
            @Html.EditorFor(model => model.SiteWideEntryModel)
        </div>

        <div id="tab3" class="tab">
            @Html.EditorFor(model => model.SocialMediaEntryModel)
        </div>

        <div id="tab4" class="tab">
            @Html.EditorFor(model => model.CategoriesEntryModel)
        </div>

        @for (int i = 0; i < Model.Pages.Count; i++) {
            <div id="@("tab" + (i + 5))" class="tab">
                @Html.EditorFor(model => model.Pages[i])
            </div>
        }
    </div>

    <p class="LowerButton">
        <input name="save" type="submit" value="Save" />
    </p>
}

<p class="LowerButton">
    @Html.ActionLink("Back To Landing", "Index", "Home")
</p>