65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 jQuery 和 MVC 加载纯 HTML 片段

李松博士
starIconstarIconstarIconstarIconstarIcon

5.00/5 (7投票s)

2010年12月3日

CPOL

5分钟阅读

viewsIcon

69513

downloadIcon

515

本文介绍了一种使用 jQuery 和 MVC 从 Web 服务器加载干净的 HTML 片段的简单方法。

引言

本文介绍了一种使用 jQuery 和 MVC 从 Web 服务器加载干净的 HTML 片段的简单方法。

背景

"jQuery" 的一个强大功能是从服务器加载一些 HTML 片段并将它们插入到网页中。但是大多数创建 HTML 内容的方法都是为了创建 HTML 页面，这些页面很可能包含 HTML 标签，如 "<body>" 和 "<head>"。如果你查看我之前的文章 "五种不同的 jQuery AJAX 调用方式的工作示例"，你可能会注意到，为了生成干净的 HTML 片段，我编写了一些相当“丑陋”的代码，并使用 "HttpResponse.OutputStream()" 将 HTML 内容发送到 Web 浏览器。实际上，当使用 "MVC" "ViewUserControl" 时，这是一项更简单的任务。本文将使用一个简单的示例向你展示如何生成干净的 HTML 片段以及如何将它们加载到网页中。

SolutionExplorer.JPG

附件的 Visual Studio 解决方案有一个简单的“MVC 2”Web 应用程序“jQueryPartialView”，它包含以下主要组件

  • "ApplicationModel.cs" 实现了应用程序的数据模型。
  • "HomeController.cs" 实现了 "MVC" 应用程序的 "控制器"。
  • "Index.aspx" 是应用程序的主网页。
  • "LoadStudents.ascx" 是 "MVC" "ViewUserControl"，它生成 HTML 片段，这些片段将由 "Index.aspx" 中实现的 "javascript" 代码加载。

Visual Studio 解决方案是在 Visual Studio 2010 中创建的，"jQuery" 版本是 "1.4.4"。在本文中，我将首先介绍数据模型和 "MVC" "控制器"。然后我将向你展示 "LoadStudents.ascx" 是如何实现的。之后，我将讨论 HTML 片段是如何加载到 "Index.aspx" 页面中的。让我们首先看一下数据模型。

数据模型

此应用程序中的数据模型在 "ApplicationModel.cs" 文件中实现

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
 
namespace jQueryPartialView.Models
{
    public class Student
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public int Score { get; set; }
        public DateTime GraduationTime { get; set; }
    }
}

这可能是任何应用程序最简单的数据模型。它只有一个类 "Student"。此类将由 "LoadStudents.ascx" 用于生成包含 "Student" 对象 "List" 信息的干净 HTTP "table" HTTP 片段。

MVC 控制器

"MVC" "控制器" 在 "HomeController.cs" 文件中实现

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using jQueryPartialView.Models;
 
namespace jQueryPartialView.Controllers
{
    [HandleError]
    public class HomeController : Controller
    {
        [AcceptVerbs(HttpVerbs.Get)]
        public ActionResult Index()
        {
            return View();
        }
 
        [AcceptVerbs(HttpVerbs.Get)]
        public ActionResult LoadStudents(int NoOfStudents)
        {
            List<Student> Students = new List<Student>();
 
            Random rd = new Random();
            for (int i = 1; i <= NoOfStudents; i++)
            {
                Student student = new Student();
                student.ID = i;
                student.Name = "Name No." + i.ToString();
                student.Score = Convert.ToInt16(60 + rd.NextDouble() * 40);
                student.GraduationTime = DateTime.Now;
 
                Students.Add(student);
            }
 
            return View(Students);
        }
    }
}

在此控制器中，实现了两个 "ActionResult" 方法

  • "Index" 方法加载应用程序的主网页 "视图" "Index.aspx"
  • "LoadStudents" 方法加载 "ViewUserControl" "LoadStudents.ascx"。此方法接受输入参数 "NoOfStudents" 并创建随机生成的 "Student" 对象 "List"。此 "List" 作为视图模型传递给 "LoadStudents.ascx"。

"ViewUserControl" "LoadStudents.ascx"

"ViewUserControl" "LoadStudents.ascx" 用于在此应用程序中生成干净的 HTML 片段

<%@ Control Language="C#"
Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<Student>>" %>
<table cellspacing="0px" cellpadding="4px">
    <tr>
        <th>ID</th><th>Name</th><th>Score</th><th>GraduationTime</th>
    </tr>
<% foreach (var item in Model) { %>
    <tr>
        <td><%: item.ID %></td>
        <td><%: item.Name %></td>
        <td><%: item.Score %></td>
        <td><%: item.GraduationTime.ToShortDateString() %></td>
    </tr>
<% } %>
</table>

如果你将这个 "ViewUserControl" 与 "五种不同的 jQuery AJAX 调用方式的工作示例" 中用于生成 HTML 片段的“丑陋”代码进行比较，你会对其简洁性感到惊讶。这是一个“强类型”的 "ViewUserControl"。它接受一个 "Student" 对象 "List" 并遍历它以生成 HTML "table" 的 HTML 片段。此处生成的 HTML 片段将由 "Index.aspx" 页面中的 "javascript" 代码加载。

应用程序的主网页 "Index.aspx"

应用程序的主网页是 "Index.aspx"。"LoadStudents.ascx" 生成的 HTML 片段通过 "javascript" 使用 "jQuery" 加载到此页面。

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Load clean html fragment</title>
    <link rel="stylesheet"
        href="<%: Url.Content("~/Content/Styles/Site.css") %>"
        type="text/css" />
    <link rel="stylesheet"
        href="<%: Url.Content("~/Content/Styles/TableStyle.css") %>"
        type="text/css" />
 
    <script src='<%: Url.Content("~/Content/Scripts/jquery-1.4.4.min.js") %>'
        type="text/javascript">
    </script>
</head>
<body>
    <div id="MainContainer">
        <div id="InputTrigger">
            <span>Please select the number of the students to retrieve</span>
            <span>
                <select id="selNoOfStudents">
                    <option>***</option>
                    <option>1</option>
                    <option>5</option>
                    <option>10</option>
                    <option>20</option>
                    <option>100</option>
                </select>
            </span>
            <img id="imgGetStudents"
                src="<%: Url.Content("~/Content/Images/arrow.png") %>"
                    alt="" />
        </div>
        <div id="HTMLContent"></div>
    </div>
</body>
</html>
 
<script type="text/javascript">
    var aquireStudentsURL = '<%: Url.Action("LoadStudents", "Home") %>';
    var ajaxLoadImgURL = '<%: Url.Content("~/Content/Images/ajax-load.gif") %>';
    $(document).ready(function () {
        var $MainContent = $("#HTMLContent");
        var $selNumberOfStudents = $("#selNoOfStudents");
        var ajaxLoadImg = "<img src='" + ajaxLoadImgURL + "' alt='Loading ...'/>";
 
        $("#imgGetStudents").click(function (e) {
            e.preventDefault();
            var numberOfStudents = $selNumberOfStudents.val();
            if (numberOfStudents == "***") {
                alert("Please select the number of the students to retrieve");
                return;
            }
 
            var resourceURL = aquireStudentsURL + "?NoOfStudents=" + numberOfStudents;
            $MainContent.html(ajaxLoadImg);
            $.ajax({
                cache: false,
                type: "GET",
                async: false,
                url: resourceURL,
                dataType: "text/html",
                success: function (htmlFragment) {
                    $MainContent.html(htmlFragment);
                },
                error: function (xhr) {
                    alert(xhr.responseText);
                }
            });
        });
 
        $selNumberOfStudents.change(function () {
            $MainContent.html("");
        });
    });
</script>

此网页是一个简单的 "视图" 页面。主要 HTML 组件如下

  • "<select>" 控件 "selNoOfStudents" 允许用户选择从 "ViewUserControl" "LoadStudents.ascx" 检索的学生数量。
  • "<img>" 控件 "imgGetStudents" 显示图片 "arrow.png"。此图片是一个绿色箭头，在此应用程序中用作“按钮”。单击此图片将触发一个 "ajax" 调用，根据 "selNoOfStudents" 下拉框中的学生数量加载从 "LoadStudents.ascx" 生成的 HTML 片段。
  • 如果 "ajax" 调用成功，则接收到的 HTML 片段将插入到 "<div>" "HTMLContent" 中。

"Index.aspx" 的 "javascript" 部分也非常简单。在 "$(document).load()" 事件中，注册了 "<img>" "imgGetStudents" 的点击事件。当 "imgGetStudents" 被点击时，JavaScript 代码首先从 "<select>" 控件 "selNoOfStudents" 获取要检索的学生数量，然后向服务器发出 "ajax" 调用。收到 HTML 片段后，"<div>" "HTMLContent" 中的内容将更新以显示收到的学生信息。

运行应用程序

现在我们完成了这个简单的 "MVC" Web 应用程序，我们准备好进行测试运行。当此 Web 应用程序首次加载时，"Index.aspx" 会显示在 Web 浏览器中。我们可以看到 "<div>" "HTMLContent" 指定的屏幕区域是空的。

RunApplicationStart.JPG

选择要检索的学生数量并单击箭头图像，将触发 "ajax" 调用以从 "ViewUserControl" "LoadStudents.ascx" 加载 HTML 片段。下图显示了收到 100 名学生时的屏幕

RunApplicationLoad.JPG

我使用 "Fiddler" 查看了网络流量。"LoadStudents.ascx" 生成的 HTML 片段确实是干净的。以下是 "Fiddler" 在加载单个学生时捕获的 HTTP 内容

RunApplicationFiddler.JPG

关注点

  • 本文介绍了一种使用 "jQuery " 和 "MVC" 从 Web 服务器加载干净 HTML 片段的简单方法。
  • 生成 HTML 片段的方法有很多，本文中使用的方法应该是最“简单”的方法之一。
  • 我希望你喜欢我的帖子，也希望这篇文章能或多或少地帮助你。

历史

  • 这是本文的第一个修订版。
© . All rights reserved.