jQuery随ASP.NET MVC和Visual Studio一起提供

最新推荐文章于 2024-07-08 21:32:26 发布

cunfuxiao7305

最新推荐文章于 2024-07-08 21:32:26 发布

阅读量151

点赞数

文章标签：数据库 java javascript html python ViewUI

原文链接：https://www.hanselman.com/blog/jquery-to-ship-with-aspnet-mvc-and-visual-studio

版权

I've done a series of four podcasts dedicated to JavaScript over the last month. Why? Because of this rockin' sweet announcement:

在过去的一个月中，我已经完成了四个专门针对JavaScript的播客。为什么？由于这个激动人心的公告：

Microsoft is going to make jQuery part of the official dev platform. JQuery will come with Visual Studio in the long term, and in the short term it'll ship with ASP.NET MVC. We'll also ship a version includes Intellisense in Visual Studio.

微软将使jQuery成为官方开发平台的一部分。 从长远来看，JQuery将随Visual Studio一起提供，而从短期来看，它将随ASP.NET MVC一起提供。 我们还将在Visual Studio中发布包含Intellisense的版本。

The Announcement Blog Posts

公告博客文章

This is cool because we're using jQuery just as it is. It's Open Source, and we'll use it and ship it via its MIT license, unchanged. If there's changes we want, we'll submit a patch just like anyone else. JQuery will also have full support from PSS (Product Support Services) like any other Microsoft product, starting later this year. Folks have said Microsoft would never include Open Source in the platform, I'm hoping this move is representative of a bright future.

这很酷，因为我们照原样使用jQuery。它是开源的，我们将使用它并通过其MIT许可证将其发送，而不会发生变化。如果我们需要更改，我们将像其他任何人一样提交补丁。从今年晚些时候开始，JQuery还将像其他任何Microsoft产品一样获得PSS (产品支持服务)的全面支持。人们说微软永远不会在平台中包含开源，我希望这一举动代表着光明的未来。

jQuery智能感知 (jQuery Intellisense )

Visual Studio 2008 has very nice JavaScript intellisense support that can be made richer by the inclusion of comments for methods in 3rd party libraries. Today you can search the web and find intellisense-enabled jQuery files hacked together by the community, but we intend to offer official support for intellisense in jQuery soon.

Visual Studio 2008具有很好的JavaScript智能感知支持，可以通过在第三方库中包含方法注释来变得更加丰富。今天，您可以在网上搜索并找到由社区共同入侵的具有智能感知功能的jQuery文件，但是我们打算尽快为jQuery中的智能感知功能提供官方支持。

JQuery is really complimentary to MS-Ajax. For example, we had been talking about writing CSS-Selector support, but figured, jQuery does it really well, why not just use it?

jQuery确实是对MS-Ajax的补充。例如，我们之前一直在谈论编写CSS-Selector支持，但是想通了，jQuery确实做得很好，为什么不仅仅使用它呢？

JavaScript库与他人一起玩得很好 (JavaScript Libraries Play Well With Others)

I wanted to put together a little demo application that used jQuery to spice up a talk I've given on ADO.NET Data Services. The app would retrieve some data from a Bikes database, and would have some radio buttons to change the color queried.

我想放一个小样的演示应用程序，它使用jQuery来增强我在ADO.NET数据服务上的演讲。该应用程序将从Bikes数据库中检索一些数据，并具有一些单选按钮以更改查询的颜色。

The whole application is a single static page. There's no code-behind and the only server-side work is the data retrieval from SQL. However, the concepts could be applied to ASP.NET WebForms or ASP.NE T MVC.

整个应用程序是一个静态页面。没有代码隐藏，唯一的服务器端工作是从SQL检索数据。但是，这些概念可以应用于ASP.NET WebForms或ASP.NE T MVC。

Here's a one page app using:

这是一个使用以下内容的单页应用程序：

ADO.NET Data Services and it's JavaScript Client Library
ADO.NET数据服务及其JavaScript客户端库
ASP.NET AJAX
ASP.NET AJAX
ASP.NET AJAX Client Templating (Preview)
ASP.NET AJAX客户端模板(预览)
jQuery 1.2.6
jQuery 1.2.6

It looks like this:

看起来像这样：

Here's what's going on underneath. First, I'm retrieving data from SQL Server and I need it in JSON format. I'm using the AJAX Client Library for ADO.NET Data Services to make a REST (GET) query to the back-end. To start with I'll just get the data...I include "datatable.js" as a client-side script and use Sys.Data.DataService() to make an async query. In JavaScript you can tell it's a Microsoft type if it's got "Sys." front of it. All the client support for ADO.NET Data Services is in datatable.js.

这是下面发生的事情。首先，我要从SQL Server检索数据，并且需要JSON格式的数据。我正在使用ADO.NET数据服务的AJAX客户端库对后端进行REST(GET)查询。首先，我将获取数据...我将“ datatable.js”作为客户端脚本并使用Sys.Data.DataService()进行异步查询。在JavaScript中，如果它带有“ Sys”，则可以说它是Microsoft类型。它的前面。 ADO.NET数据服务的所有客户端支持都在datatable.js中。

I'll be getting back dynamically created JSON objects that look just like my server-side data. In the query I'm asking for the top 5 results given a color.

我将返回动态创建的JSON对象，这些对象看起来就像服务器端数据一样。在查询中，我要求给定颜色的前5个结果。

BTW, the first line of LoadBikes() is a little JavaScript syntax that says "if q isn't there, then make a q that equals "Red."

顺便说一句，LoadBikes()的第一行是一些JavaScript语法，它表示“如果q不存在，则使aq等于“红色”。

<script type="text/javascript" src="Scripts/DataService.js"></script>    
<script type="text/javascript">
    var bikes;

    Sys.Application.add_init(function() {
        LoadBikes();
    });
    
    function LoadBikes(q) {
            q = q || "Red";
            var svc = new Sys.Data.DataService("bikes.svc");
            svc.query("/Products?$filter=Color eq '" + q + " '&$top=5", OnProductsLoaded);
        }
...

When I get back the results from the asynchronous query call, I could use string concatenation with the ASP.NET AJAX Sys.StringBuilder type to build HTML on the fly like this:

当我从异步查询调用中获取结果时，可以将字符串连接与ASP.NET AJAX Sys.StringBuilder类型一起使用，以动态构建HTML，如下所示：

var html = new Sys.StringBuilder("<ul>");
for (var i = 0; i < result.length; i++){
    html.append("<li><div class=\"bikerow\">");
    html.append("<img src=\"bikes.svc/Products(" + result[i].ProductID + ")/Photo/$value\">" + result[i].Name + " " + result[i].ListPrice);
    html.append("</div></li>");
}
html.append("</ul>");
$get("tbl").innerHTML = html.toString();

There's MANY ways to get the exact same results in JavaScript when you introduce different libraries. There's tradeoff's between size, speed, maintainability, and your happiness. It's nice to pick and choose.

引入不同的库时，有很多方法可以在JavaScript中获得完全相同的结果。在大小，速度，可维护性和您的幸福之间需要权衡。很好选择。

Rather than using StringBuilder, I'll use the new (preview) ASP.NET AJAX 4.0 Client Template stuff from BLR, Dave Reed, Boris Rivers-Moore and Nghi Nguyen. This is more declarative and easy to maintain way to accomplish the same thing.

我将使用来自BLR ， Dave Reed ，Boris Rivers-Moore和Nghi Nguyen的新(预览版) ASP.NET AJAX 4.0客户端模板，而不是使用StringBuilder。这是更具声明性和易于维护的方式来完成同一件事。

<div id="bikes" class="sys-template">
 <ul>
  <li>
   <div class="bikerow">
    <img sys:src="{{'bikes.svc/Products(' + ProductID + ')/Photo/$value'}}"/>
        {{Name + ' ' + ListPrice}}
   </div>
  </li>
 </ul>
</div>

This is a declaration of what I want the table to look like with {{ binding expressions }} in curly braces. The img src= is an ADO.NET Data Services HREF to a product image in the database like "/bikes.svc/Products(740)/Photo/$value" that returns an image directly.

这是我希望表格用大括号{{绑定表达式}}看起来像的声明。 img src =是指向数据库中产品图像(例如“ /bikes.svc/Products(740)/Photo/$value”)的ADO.NET数据服务HREF，可直接返回图像。

I'll add ASP.NET AJAX's JavaScript library along with the Preview Templates script from CodePlex:

我将添加ASP.NET AJAXJavaScript库以及CodePlex中的“预览模板”脚本：

<script type="text/javascript" src="Scripts/MicrosoftAjax.debug.js"></script>
<script type="text/javascript" src="Scripts/MicrosoftAjaxTemplates.debug.js"></script>

Then, when things are initialized, I'll $get() that template and make a Sys.UI.DataView and store it in a variable called "bikes" and when asynchronous call returns, I'll take the array of data from result and apply it to the DataView.

然后，在初始化事物时，我将获得该模板的$ get()并创建一个Sys.UI.DataView并将其存储在一个名为“ bikes”的变量中，当异步调用返回时，我将从结果中获取数据数组并将其应用于DataView。

<script type="text/javascript">
     var bikes;
     Sys.Application.add_init(function() {
         bikes = $create(Sys.UI.DataView, {}, {}, {}, $get("bikes"));
         LoadBikes();
     });
...
     function OnUsersLoaded(result){
         bikes.set_data(result);  ...

Now, I'll start leaning heavily on the jQuery library to change the background colors of just the even-numbered items in my list. I'll also add 100ms animation that draws a border and increases the font size of the item the mouse is over. Notice the "chaining" of the functions as I modify the div. Each method returns the jQuery object so you can increase fluency with chaining as much as you like. I'll also use jQuery to easily setup a group of click events on the radio buttons.

现在，我将开始大量依靠jQuery库来更改列表中偶数编号项目的背景颜色。我还将添加100ms动画，该动画绘制边框并增加鼠标悬停在其上方的项目的字体大小。在修改div时，请注意函数的“链接”。每个方法都返回jQuery对象，因此您可以根据需要随意增加链接的流畅度。我还将使用jQuery在单选按钮上轻松设置一组单击事件。

The complete hacked-together code is this:

完整的hacked在一起的代码是这样的：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Friggin' Sweet</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="Scripts/MicrosoftAjax.debug.js"></script>
    <script type="text/javascript" src="Scripts/MicrosoftAjaxTemplates.debug.js"></script>
    <script type="text/javascript" src="Scripts/DataService.js"></script>
    <script type="text/javascript" src="Scripts/jquery-1.2.6-intellisense.js"></script>
    <script type="text/javascript" src="Scripts/DataService.js"></script>
    <script type="text/javascript">
        var bikes;
        Sys.Application.add_init(function() {
            bikes = $create(Sys.UI.DataView, {}, {}, {}, $get("bikes"));
            $(".colorfilter").click(function(e) {
                LoadBikes($(this).val());
            });
            LoadBikes();
        });

        function LoadBikes(q) {
            q = q || "Red";
            var svc = new Sys.Data.DataService("bikes.svc");
            svc.query("/Products?$filter=Color eq '" + q + " '&$top=5", OnProductsLoaded);
        }

        function OnProductsLoaded(result) {
            bikes.set_data(result);

            $("ul li:even").css("background-color", "lightyellow");
            $("ul li").css("width", "450px").css("font-size", "12px");

            $("div.bikerow").mouseover(function(e) {
                $(this).animate({
                    fontSize: "18px",
                    border: "2px solid black"
                }, 100);
            }).mouseout(function(e) {
                $(this).animate({
                    fontSize: "12px",
                    border: "0px"
                }, 100);
            });

        }
        Sys.Application.initialize();
    </script>
</head>
<body xmlns:sys="javascript:Sys">
    <form id="form1" runat="server">
    <input type="radio" class="colorfilter" name="color" value="Red" />Red
    <input type="radio" class="colorfilter" name="color" value="Silver" />Silver
    <input type="radio" class="colorfilter" name="color" value="White" />White
    <input type="radio" class="colorfilter" name="color" value="Multi" />Multi
    <input type="radio" class="colorfilter" name="color" value="Black" />Black
    <div>
        <div id="tbl">
        </div>
        <div id="bikes" class="sys-template">
            <ul>
                <li>
                    <div class="bikerow">
                        <img sys:src="{{'bikes.svc/Products(' + ProductID + ')/Photo/$value'}}" />
                        {{Name + ' ' + ListPrice}}
                    </div>
                </li>
            </ul>
        </div>
    </div>
    </form>
</body>
</html>

And it looks like this. Notice that I've got FireBug open and you can see three AJAX calls via ADO.NET Data Services with different queries. I'm hovering the mouse over the second bike, so its font is larger it has a border.

它看起来像这样。请注意，我已经打开了FireBug ，您可以通过ADO.NET数据服务看到带有不同查询的三个AJAX调用。我将鼠标悬停在第二辆自行车上，因此其字体较大，带有边框。

All of the scripts getting along happily. My code clearly sloppy, but this is a good example of how jQuery provides functionality that the Microsoft libraries don't. Things are better when the libraries are used together. JQuery complements ASP.NET, ASP.NET AJAX and ASP.NET MVC nicely and jQuery already has a large following within the .NET community. That's why we're going to ship, support and promote jQuery in ASP.NET, ASP.NET MVC and Visual Studio going forward.

所有脚本都愉快地相处。我的代码显然很草率，但这是jQuery如何提供Microsoft库所不提供的功能的一个很好的例子。当库一起使用时，情况会更好。 jQuery对ASP.NET，ASP.NET AJAX和ASP.NET MVC进行了很好的补充，而jQuery在.NET社区中已经拥有大量的追随者。因此，我们将继续在ASP.NET，ASP.NET MVC和Visual Studio中发布，支持和推广jQuery。

This was a simplistic example and I'm sure you've got better ideas, so I'd encourage you to go around the Net and get involved in the dynamic jQuery community. If you've used jQuery on an ASP.NET site, sound off in the comments.

这是一个简单的示例，我相信您有更好的主意，因此，我鼓励您使用Internet并加入动态jQuery社区。如果您在ASP.NET网站上使用了jQuery，请在注释中取消提示。

JQuery Resources

jQuery资源

jQuery - Download
jQuery-下载
- Plugins
  外挂程式
- jQuery UI
  jQuery UI
- About the jQuery Team and Contributors
  关于jQuery团队和贡献者
- John Resig's Blog
  John Resig的博客
jQuery - Download
jQuery-下载
The jQuery Blog
jQuery博客
jQuery's Extensive Documentation
jQuery的广泛文档

Hanselminutes JavaScript Podcast Series

Hanselminutes JavaScript播客系列

* Thanks to Pablo Castro for his Bike database and ongoing help. Big thanks to Scott Koon for helping me debug my demo at 2am this morning using CrossLoop while kindly not asking what I was working on. Also thanks indirectly to Rick Strahl for his excellent .NET (and often jQuery) blog.

*感谢Pablo Castro提供了他的Bike数据库和持续的帮助。 非常感谢Scott Koon在今天凌晨2点帮助我使用CrossLoop调试演示，同时又不问我在做什么。 也间接感谢Rick Strahl出色的.NET(通常是jQuery)博客。

翻译自: https://www.hanselman.com/blog/jquery-to-ship-with-aspnet-mvc-and-visual-studio

cunfuxiao7305

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery随ASP.NET MVC和Visual Studio一起提供

I've done a series of four podcasts dedicated to JavaScript over the last month. Why? Because of this rockin' sweet announcement: 在过去的一个月中，我已经完成了四个专门针对JavaScript的播客。为什么？由于这个激动人心的公告：Microsoft is g...
复制链接

扫一扫