在 MVC 2 中使用 JQuery 的部分渲染控件

• 下载源文件 - 509.13 KB

引言

在本文中，我将展示一个 Web 自定义控件，该控件允许在 MVC 2 Web 应用程序中使用异步回发（通过 JQuery）来实现局部渲染。

我不会解释该控件的“核心”，因为它只是我之前在另一篇文章中展示过的控件的 MVC 版本。如果您想了解有关引擎的更多信息，可以在“使用 JQuery 的局部渲染控件”中找到很好的解释（可以在我的文章部分找到）。即使该控件是 ASP.NET 版本，其“核心”概念也与此处展示的非常接近。

Using the Code

该控件的目标是帮助开发人员实现局部渲染，而无需处理 JQuery 和复杂的客户端模板。让我们举个例子来更好地理解如何使用它。

首先，我们需要创建一个 MVC 2 Web 应用程序。只需打开 Visual Studio 2010 --> 新建项目 --> MVC 2 应用程序。

现在，我们需要通过单击它并选择“选择项”来将 `JqueryControl` 添加到工具箱。
单击“浏览”并从 `JQueryControlMVC2.zip\JqueryController\bin\Debug` 中选择“JqueryController.dll”。

现在在视图下打开 `index.aspx`，然后将 `JqueryControl` 拖放到页面上。这将是我们要刷新（局部渲染）的页面部分的容器。
此时，我们需要创建一个表示页面该部分的模板。要完成此操作，只需通过单击“添加新项”并选择 `ViewUserControl` MVC 2 来将 `UserViewControl` 添加到页面。

这将是我们想要刷新的页面部分。在此示例中，我们将显示当前时间。当用户单击按钮时，我们希望使用局部渲染刷新时间。这只是一个示例，旨在关注 JQuery 控件的功能，但您可以在更复杂的上下文中使用此方法。我们必须做的最后一项任务是创建将检索我们想在视图中显示信息的模型。在此示例中，模型只是一个具有返回当前时间属性的类。

 public class TimeModel
    {
        public string time
        {
            get { return DateTime.Now.ToShortDateString(); }
        }
    }
}

此时，我们需要将该用户控件添加到 `JqueryController` 中。这将是我们想要刷新的页面部分。无论接口有多复杂，都没关系。我们可以使用完全相同的方法。我们需要做的最后一件事是添加将引发回发的 Web 控件。将一个 HTML 按钮添加到页面。
此时，页面源代码应如下所示：

我们需要做的最后一件事是在按钮的单击事件中添加一些 JavaScript 代码。如您所见，我们将调用一个名为“`JqueryPost`”的“特殊” JavaScript 函数。该函数必须将我们要调用的操作作为第一个参数。我们还可以根据需要在控制器端传递任何我们想要的参数。现在，让我们专注于控制器，看看使用此 Web 控件实现局部渲染有多么容易。为了使 Web 控件正常工作，控制器必须继承自 `MvcControllerBase`。当用户单击按钮时，将调用 `homeController`。控制器从 `MVCControllerBase` 继承了一个名为“`PostParameter`”的属性，该属性包含我们随请求一起发送的所有参数，以及“`IsPartialRendering`”，这是一个布尔属性，用于了解回发是否由 `JqueryPost` 函数引发。此时，在控制器中，我们可以通过检查请求中发送的参数来了解我们需要做什么。在此示例中，我们只检查参数“`action=refreshTime`”。在这种情况下，我们创建一个模型实例，然后只需调用“`RefreshJQueryPanel`”来刷新客户端上的页面部分。

  [HandleError]
    public class HomeController : MvcControllerBase
    {
        private const string UserControlPath="~/Views/UserControl/ViewUserControl1.ascx";
        public ActionResult Index()
        {
            ViewData["Message"] = "Welcome to ASP.NET MVC!";            
            return View();            
        }
        [HttpPost]
        public ActionResult Index(string x)
        {            
            if (this.IsPartialRendering && this.PostParameter.ContainsKey("action"))
            {
                switch (this.PostParameter["action"])
                { 
                    case "refreshTime":
                        TimeModel t = new TimeModel();
                        return this.RefreshJQueryPanel("JqueryController1", 
			UserControlPath, t, "CallBack", "parameterToReturn");
                        break;
                 //any other action
                }       
            }
            return View();
        }

如您所见，“`RefreshJQueryPanel`”是一个通用函数，控制器也继承自 `MVCControllerBase`。它接收 `JqueryControl` 的 ID、`userViewControl` 的路径以及要传递给视图用户控件的模型作为输入。该函数是通用的，也可以获取模型的类型，以便更轻松地将其绑定到 `userViewControl`（使用强类型模型）。在此示例中，我们使用该方法的重载，该重载还接受我们要在客户端上调用的 JavaScript 回调函数的名称以及要传递给该函数的任何参数。在此示例中，客户端刷新后，它会在客户端上调用 JavaScript 函数“Call Back”，并传递字符串参数“`parameterToReturn`”。在此示例中，此函数仅显示一个消息框，但在实际环境中，我们可能需要一些返回的参数来重新初始化界面，或者出于任何其他需要。

关注点

该控件的范围只是帮助开发人员实现 JQuery 局部渲染，而无需处理 JQuery，并且使用 Web 控件方法使此任务更容易完成。大多数文章都展示了一种方法，其中 JQuery 用于进行调用并返回 JSON。之后，通常会在该 JSON 和界面之间进行某种绑定。这种绑定可以使用不同的方式实现，例如纯 JavaScript、JQuery 或任何第三方库来简化此任务。通过我展示的方法，这会更容易，因为页面上使用的用户控件与用作局部渲染模板的用户控件相同，因此我们无需花费时间在客户端重新实现绑定逻辑。