Question

我正在尝试在我的MVC3应用程序中实现相同的树幻灯片，我不完全确定我做得对：

索引页：

<script type="text/javascript">
    $(document).ready(function () {
        $('#slider a').click(function () {
            history.pushState({ path: this.path }, '', this.href);
            $.get(this.href, function (data) {
                $('#slider').slideTo(data);
            });
            return false;
        });
    });
</script>

@{Html.RenderAction("MainTableTracker", "Release", new { releaseId = Model });}

MainTableTracker局部视图：

<script type="text/javascript">
    $(document).ready(function () {
        $('#slider a').click(function () {
            history.pushState({ path: this.path }, '', this.href);
            $.get(this.href, function (data) {
                $('#slider').slideTo(data);
            });
            return false;
        });
    });
</script>

<div id="slider">
    @Html.RouteLink(Model.Brand.Name, "Brand", new { BrandId = Model.Brand.Id }) /
    <ul>
        <li><a href="#">Overview</a></li>
        @foreach(var model in Model.ModelExts)
        {
            <li>@Html.RouteLink(model.Model.Name, new { modelId = model.Model.Id })</li>
        }
    </ul>
</div>

VersionTable局部视图：

<script type="text/javascript">
    $(document).ready(function () {
        $('#slider a').click(function () {
            history.pushState({ path: this.path }, '', this.href);
            $.get(this.href, function (data) {
                $('#slider').slideTo(data);
            });
            return false;
        });
    });
</script>


<div id="slider">
    @Html.RouteLink(Model.Brand.Name, "Brand", new { BrandId = Model.Brand.Id }) / @Html.RouteLink(Model.Name, "Model", new { modelId = Model.Id }) /
    <ul>
        <li><a href="#">Overview</a></li>
        @foreach(var model in Model.Brand.Model)
        {
            <li>@Html.RouteLink(model.Name, new { modelId = model.Id })</li>
        }
    </ul>

    <div class="versionWraper">
        @foreach(var version in Model.Version)
        {
            <div>
                @version.Name
            </div>
        }
    </div>
</div>

这很有效，但是我很确定我做错了，我猜我不应该每次都有3个不同的视图复制父视图的代码。

我想知道我是否应该只有一个viewmodel和一个动作，让视图决定每次显示什么？但我真的很高兴只使用一个动作来显示不同类型的数据（发布，品牌和功能）。

此外，布局有：

 $(window).bind('popstate', function (e) {
        $.get(e.originalEvent.state.path, function (data) {
            $('#slider').slideTo(data);
        });
    });

这样做有效，但是当我回到品牌级别时，它会重新加载我的所有脚本（因为它是默认的View不是Partial）。

有没有更好的方法来实现这个？

由于

Answer 1

在设计这样的东西时，我建议你不要按ID定位对象。它会让你处于一个奇怪的情况，比如你正面临的那种情况，在那里你要保证在脚本触发之前该项目在页面上以及那种事情 - 在处理部分加载等时这可能是固有的问题。 / p>

相反，请考虑这种方法：

<style>
    .slider { /* Styles here */ }
    .slider > ul { /* Styles here */ }
    .slider > ul > li { /* Styles here */ }
    .slider > .versionWrapper { /* Styles here */ }
    .slider > .versionWrapper > .versionName { /* Styles here */ }
</style>

<div class="slider">
    @Html.RouteLink(Model.Brand.Name, "Brand", new { BrandId = Model.Brand.Id })
    / @Html.RouteLink(Model.Name, "Model", new { modelId = Model.Id }) /
    <ul>
     <li><a href="#">Overview</a></li>

    @foreach(var model in Model.Brand.Model) {
     <li>@Html.RouteLink(model.Name, new { modelId = model.Id })</li>
    }

    </ul>
    <div class="versionWrapper">

    @foreach(var version in Model.Version) {
     <div class="versionName">@version.Name</div>
    }

    </div>
</div>

<script type="text/javascript" language="javascript">
$(document).ready(function () {
    $('.slider > ul > li > a').live('click', function (ev) {
        ev.preventDefault();
        ev.stopPropagation();

        var $a = $(ev.target);
        var $slider = $a.closest('.slider');

        history.pushState({ path: $a.path }, '', $a.href);
        $.get($a.href, function (data) {
            $slider.slideTo(data);
        });
    });
});
</script>

此时，您实际上是针对您放在页面上的任何滑块，无论它包含在哪个部分 - 并且最后的少量jQuery逻辑可以轻松放入站点范围或页面 - 广泛的JS文件，与输出HTML的特定实现分离。

接下来，只需为您所处的模式创建一个切换。我喜欢使用ViewData["SettingName"]执行此操作，但这只是我。

如果要显示“MainTable”样式视图，请设置如下内容：

ViewData["Mode"] = "Default";

如果要显示“版本”样式视图，请设置：

ViewData["Mode"] = "Version";

然后将您的部分改为渲染为：

<div class="slider">
@{
    bool versionMode = (ViewData["Mode"] as String == "Version");

    string breadCrumb = Html.RouteLink(
        Model.Brand.Name, 
        "Brand", 
        new { BrandId = Model.Brand.Id }
    ).ToString();

    if (versionMode) {
        breadCrumb = String.Format("{0} / {1}", 
            breadCrumb, 
            Html.RouteLink(
                Model.Name, 
                "Model", 
                new { modelId = Model.Id }
            ).ToString()
        );
    }
}

    @breadCrumb /
    <ul>
        <li><a href="#">Overview</a></li>
@{
    if (versionMode)
        foreach(var model in Model.ModelExts) {

        <li>@Html.RouteLink(model.Model.Name, new { modelId = model.Model.Id })</li>

        }
    } else {

        @foreach(var model in Model.Brand.Model) {
            <li>@Html.RouteLink(model.Name, new { modelId = model.Id })</li>
        }

    }
}
    </ul>

@{
    if (versionMode) {

    <div class="versionWrapper">
        @foreach(var version in Model.Version) {
        <div>@version.Name</div>
        }
    </div>

    }
}

</div>

MVC3上的GitHub Tree Slider实现

1 个答案: