使用 jQuery 和 XML 的 ASP.NET MVC3 幻灯片控件
5.00/5 (7投票s)
关于如何使用 jQuery 和 XML 创建 ASP.NET MVC3 幻灯片用户控件/部分视图的文章
目录
引言
在本教程中，我将与大家分享使用 ASP.NET MVC 3 重新创建使用 jQuery 和 XML 的 ASP.NET 幻灯片控件的步骤。其功能仍然与之前使用 ASP.NET、来自Dynamic Drive 的带导航控件的 jQuery 幻灯片以及带 XML 的 jQuery 幻灯片创建的幻灯片相同。此版本还允许我们在页面上拥有该控件的多个实例，自定义宽度和高度，选择隐藏或显示导航控件，指定 XML 文件源以及每个实例的其他设置。我整理了一份分步教程，说明我是如何实现这一点的。
图 1
入门
- 下载 简单控件图库 v1.3
- 最新的 jQuery 库
图 2 显示了项目结构。欢迎下载演示项目。以下是项目简介。
- Slideshow 类/模块位于 Models 文件夹中
- Slideshow 部分视图/用户控件位于 Shared 文件夹中
- 与图像信息相关的 XML 文件位于 xml 文件夹中
- simplegallery.js 文件位于 Scripts 文件夹中
- 关于如何从 ASPX 和 Razor 视图引擎、区域以及带或不带母版页调用部分视图/用户控件的示例
图 2
模型
YsaSSModel 类包含幻灯片属性，而辅助类 YsaSSHelper 用于生成幻灯片 Div、JavaScript 和 ID。在 ASP.NET 中，每次我们在页面上放置用户控件时，它都会自动包含一个唯一标识控件的 ID 属性。另一方面，在 ASP.NET MVC 中，我找不到除了手动为用户控件分配完整 ID 之外如何做到这一点的方法。可能有一种方法可以实现，但目前我们保持简单。WrapperID 方法负责为每个用户控件/部分视图返回唯一的 ID。ID 属性的值是静态文本 "ysaSlideShowDiv" 和一个数字的组合。如果我们在页面上包含多个用户控件，它们的 ID 将类似于 ysaSlideShowDiv1、ysaSlideShowDiv2… ysaSlideShowDivN。由于 WrapperID 是由静态方法生成的，您会注意到每次我们刷新页面时它都会递增。不用担心，因为这不会破坏任何东西。
列表 1
private string _wrapperID = YsaSSHelper.GetNextId();
public string WrapperID
{
get
{
return "ysaSlideShowDiv" + _wrapperID;
}
}
以下是与幻灯片控件关联的可用属性和方法的列表。
- CreateDiv – 为幻灯片控件创建占位符
- CreateScript – 生成动态 jQuery 脚本
- XMLSource – 获取或设置 XML 文件的路径
- XPath - 设置 XML 文档中的元素和属性以进行导航。
- Width – 获取或设置幻灯片的宽度
- Height – 获取或设置幻灯片的高度
- AutoPlay [true, false] true = 自动启动幻灯片，无需按播放按钮，反之亦然。
- ShowNavigation[true, false] true = 显示导航控件，或 false = 隐藏导航控件。
- Delay_btw_slide - 获取或设置每张图像幻灯片之间的延迟。
- FadeDuration - 获取或设置每张幻灯片之间的淡入淡出持续时间。
- Cycles_before_stopping - 获取或设置停止旋转之前的旋转次数。如果我们设置为 99，它将旋转 99 次然后停止，直到我们再次点击播放按钮。
- BtnPrevious, BtnNext, BtnPlay, BtnPause - 分别获取或设置上一张、下一张、播放和暂停按钮的图像。这些属性接受按钮图像的相对 URL 或绝对 URL 路径。如果您使用相对 URL，请确保将图像文件夹放置在应用程序的根目录中。
YsaSSModel 类还包含一个构造函数，其中包含在声明中指定的默认值。这将允许我们使用可选和命名参数来实例化对象。请参阅列表 2。
列表 2
public YsaSSModel(string xpath = "site", string xmlSource = "/YSASS/sites.xml",
int width = 728, int height = 95,
bool autoPlay = true, bool showNavigation = true,
int delay_btw_slide = 10000, int fadeDuration = 2000,
int cycles_before_stopping = 99,
string btnPreviousImagePath = "/Content/ysaSS-images/previous.gif",
string btnNextImagePath = "/Content/ysaSS-images/next.gif",
string btnPlayImagePath = "/Content/ysaSS-images/play.gif",
string btnPauseImagePath = "/Content/ysaSS-images/pause.gif")
{
XPath = xpath;
XMLSource = xmlSource;
Width = width;
Height = height;
AutoPlay = autoPlay;
ShowNavigation = showNavigation;
Delay_btw_slide = delay_btw_slide;
FadeDuration = fadeDuration;
Cycles_before_stopping = cycles_before_stopping;
BtnPreviousImagePath = btnPreviousImagePath;
BtnNextImagePath = btnNextImagePath;
BtnPlayImagePath = btnPlayImagePath;
BtnPauseImagePath = btnPauseImagePath;
SSContainer = YsaSSHelper.CreateDiv(WrapperID);
SSScript = YsaSSHelper.CreateScript(WrapperID, xmlSource, xpath, width, height, btnPreviousImagePath,
btnPlayImagePath, btnNextImagePath, btnPauseImagePath, showNavigation, autoPlay,
delay_btw_slide, cycles_before_stopping, fadeDuration);
}
}
部分视图/用户控件
用户控件页面中有三行。第一行是 @model 指令，用于引用 YsaSSModel。第二行的目的是渲染幻灯片容器，最后一行是渲染 JavaScript。
列表 3
@model MvcSlideShow.Models.YsaSSModel @Html.Raw(@Model.SSContainer) @Html.Raw(@Model.SSScript)
控制器 (Controller)
控制器非常简单。请参阅列表 3 获取示例。
列表 4
public ActionResult Example1() { return View(); }
public ActionResult Example2() { return View(); }
public ActionResult Example3() { return View(); }
…
视图
在使用用户控件之前，我们首先需要使用 @using 关键字导入 MvcSlideShow.Models 命名空间。然后使用 Html.Partial 辅助方法内联渲染名为 "YsaUserControls/_YsaSS" 的部分视图。我们无需指定完整路径，因为辅助方法会自动假定部分视图位于 \Views\Shared\ 文件夹中。示例 1 演示了如何通过将 xmlSource、width、height 和 showNavigation 命名参数传递给模型来调用用户控件。请记住，参数的默认值已在构造函数中指定。因此，参数是可选的，如果未指定，将使用默认值。最后但同样重要的是，在视图的末尾包含 simplegallery.js JavaScript。另外，请确保页面/母版页上包含 jQuery 库。
示例 1
@using MvcSlideShow.Models
@Html.Partial("YsaUserControls/_YsaSS", new YsaSSModel(xmlSource: "/xml/sites.xml", width: 728,
height:90, showNavigation: false))
<script src="@Url.Content("~/Scripts/simplegallery.js")" type="text/javascript"></script>
更多示例
@Html.Partial("YsaUserControls/_YsaSS", new YsaSSModel(xpath: "cat",
xmlSource: "/xml/Cats.xml", width: 448,
height:600))
@Html.Partial("YsaUserControls/_YsaSS", new YsaSSModel(xmlSource: "/xml/500x281.xml",
width: 500, height:281, xpath: "site500x281",
btnPauseImagePath:"/Content/YsaSS-images/pause2.png",
btnNextImagePath: "/Content/YsaSS-images/forward.png",
btnPlayImagePath: "/Content/YsaSS-images/play2.png",
btnPreviousImagePath: "/Content/YsaSS-images/backward.png"
))
看点
这里值得一提的是如何根据请求 URL 将请求路由到相应的区域/结构，并在应用程序中使用相同的控制器名称。所附示例包含一个名为 "Photo" 的区域和一个 Home 控制器。在运行时，我们将看到错误 "找到了多个与控制器名称 'Home' 匹配的类型..."。嗯，这是合理的，因为我们在 Photo 区域和根级别都有一个名为 "Home" 的控制器。要解决这个问题，请在 Global.asax 文件中为路由添加一个包含控制器命名空间的约束。请参阅列表 5。
列表 5
routes.MapRoute(
"Default", // Route name
"{controller}/{action}/{id}", // URL with parameters
new { controller = "Home", action = "Index", id = UrlParameter.Optional },
new string[] { "MvcSlideShow.Controllers" }
);
列表 6 显示了如果我们将约束包含在 PhotoAreaRegistration 中，路由将是什么样子。
列表 6
context.MapRoute(
"myarea_default",
"Photo/{controller}/{action}/{id}",
new { action = "Index", controller = "Home", id = UrlParameter.Optional },
new[] { "MvcSlideShow.Areas.Photo.Controllers" }
);
在 Photo 区域有一个名为 "Random" 的控制器和一个名为 "Index" 的视图。如果使用列表 7 中的代码，我们将收到错误 "未找到视图 'Index' 或其母版，或者没有视图引擎支持搜索位置..."。发生这种情况是因为路由正在根级别寻找 "Random" 控制器。此错误的解决方法是在 ActionLink 方法中指定区域。请参阅列表 8。
列表 7
@Html.ActionLink("Example 4: Auto Play = false", "Index", "Random")
列表 8
@Html.ActionLink("Example 4: Auto Play = false",
"Index", "Random", new { area = "Photo" }, null)
结论
我建议下载演示并进行探索，以便充分理解其概念，因为我可能在本文中遗漏了一些重要信息。我希望这些信息对您有用，并能使您的编程工作更轻松。如果您发现任何错误或不同意内容，或者想帮助改进本文，请给我留言，我将与您一起纠正。如果您想帮助改进本文，请给我发送电子邮件。
历史
2012 年 9 月 4 日 – 首次发布 (v01.00.00)
2012 年 9 月 12 日 – 添加了使用 ASP.NET MVC2 的演示项目 (v01.01.00)
资源
http://www.primaryobjects.com/CMS/Article129.aspx
http://msdn.microsoft.com/en-us/library/ee461420%28VS.100%29.aspx#registering_area_routes
http://msdn.microsoft.com/en-us/library/cc668201%28v=vs.100%29.aspx
演示
http://mvc.ysatech.com/jQuery_XML_SlideShow