<input><\/code>, to customize its attributes based on your C# model, saving you from having to write boilerplate code. Tag Helpers can also be standalone elements and can be used to generate completely customized HTML.
\n\u6807\u8bb0\u5e2e\u52a9\u7a0b\u5e8f\u662f Razor \u8bed\u6cd5\u7684\u65b0\u589e\u529f\u80fd\uff0c\u7528\u4e8e\u81ea\u5b9a\u4e49\u6a21\u677f\u4e2d\u751f\u6210\u7684 HTML\u3002\u53ef\u4ee5\u5c06\u6807\u8bb0\u5e2e\u52a9\u7a0b\u5e8f\u6dfb\u52a0\u5230\u5176\u4ed6\u6807\u51c6\u7684 HTML \u5143\u7d20\uff08\u5982 <input><\/code>\uff09\u4ee5\u57fa\u4e8e C# \u6a21\u578b\u81ea\u5b9a\u4e49\u5176\u5c5e\u6027\uff0c\u4ece\u800c\u4f7f\u60a8\u4e0d\u5fc5\u7f16\u5199\u6837\u677f\u4ee3\u7801\u3002\u6807\u8bb0\u5e2e\u52a9\u7a0b\u5e8f\u4e5f\u53ef\u4ee5\u662f\u72ec\u7acb\u5143\u7d20\uff0c\u53ef\u7528\u4e8e\u751f\u6210\u5b8c\u5168\u81ea\u5b9a\u4e49\u7684 HTML\u3002<\/p>\nNOTE<\/b> Remember that Razor, and therefore Tag Helpers, are for server-side HTML rendering. You can\u2019t use Tag Helpers directly in frontend frameworks like Angular and React.
\n\u6ce8\u610f:\u8bf7\u8bb0\u4f4f\uff0cRazor \u4ee5\u53ca\u6807\u8bb0\u5e2e\u52a9\u7a0b\u5e8f\u7528\u4e8e\u670d\u52a1\u5668\u7aef HTML \u5448\u73b0\u3002\u4f60\u4e0d\u80fd\u76f4\u63a5\u5728 Angular \u548c React \u7b49\u524d\u7aef\u6846\u67b6\u4e2d\u4f7f\u7528 Tag Helpers\u3002<\/p>\n
If you\u2019ve used legacy (.NET Framework) ASP.NET before, Tag Helpers may sound reminiscent of HTML Helpers, which could also be used to generate HTML based on your C# classes. Tag Helpers are the logical successor to HTML Helpers, as they provide a more streamlined syntax than the previous, C#-focused helpers. HTML Helpers are still available in ASP.NET Core, so if you\u2019re converting some old templates to ASP.NET Core, you can still use them. But if you\u2019re writing new Razor templates, I recommend using only Tag Helpers, as they should cover everything you need. I don\u2019t cover HTML Helpers in this book.
\n\u5982\u679c\u60a8\u4ee5\u524d\u4f7f\u7528\u8fc7\u65e7\u7248 \uff08.NET Framework\uff09 ASP.NET\uff0c\u5219\u6807\u8bb0\u5e2e\u52a9\u7a0b\u5e8f\u542c\u8d77\u6765\u53ef\u80fd\u4f1a\u8ba9\u4eba\u60f3\u8d77 HTML \u5e2e\u52a9\u7a0b\u5e8f\uff0c\u540e\u8005\u4e5f\u53ef\u7528\u4e8e\u57fa\u4e8e C# \u7c7b\u751f\u6210 HTML\u3002\u6807\u8bb0\u5e2e\u52a9\u7a0b\u5e8f\u662f HTML \u5e2e\u52a9\u7a0b\u5e8f\u7684\u903b\u8f91\u7ee7\u627f\u7a0b\u5e8f\uff0c\u56e0\u4e3a\u5b83\u4eec\u63d0\u4f9b\u7684\u8bed\u6cd5\u6bd4\u4ee5\u524d\u4ee5 C# \u4e3a\u4e2d\u5fc3\u7684\u5e2e\u52a9\u7a0b\u5e8f\u66f4\u7b80\u5316\u3002HTML \u5e2e\u52a9\u7a0b\u5e8f\u5728 ASP.NET Core \u4e2d\u4ecd\u7136\u53ef\u7528\uff0c\u56e0\u6b64\uff0c\u5982\u679c\u8981\u5c06\u4e00\u4e9b\u65e7\u6a21\u677f\u8f6c\u6362\u4e3a ASP.NET Core\uff0c\u60a8\u4ecd\u7136\u53ef\u4ee5\u4f7f\u7528\u5b83\u4eec\u3002\u4f46\u662f\uff0c\u5982\u679c\u60a8\u6b63\u5728\u7f16\u5199\u65b0\u7684 Razor \u6a21\u677f\uff0c\u6211\u5efa\u8bae\u4ec5\u4f7f\u7528 Tag Helpers\uff0c\u56e0\u4e3a\u5b83\u4eec\u5e94\u8be5\u6db5\u76d6\u60a8\u9700\u8981\u7684\u6240\u6709\u5185\u5bb9\u3002\u5728\u672c\u4e66\u4e2d\uff0c\u6211\u4e0d\u6d89\u53ca HTML Helpers\u3002<\/p>\n
In this chapter you\u2019ll primarily learn how to use Tag Helpers when building forms. They simplify the process of generating correct element names and IDs so that model binding can occur seamlessly when the form is sent back to your application. To put them into context, you\u2019re going to carry on building the currency converter application that you\u2019ve seen in previous chapters. You\u2019ll add the ability to submit currency exchange requests to it, validate the data, and redisplay errors on the form using Tag Helpers to do the legwork for you, as shown in figure 18.1.
\n\u5728\u672c\u7ae0\u4e2d\uff0c\u60a8\u5c06\u4e3b\u8981\u5b66\u4e60\u5982\u4f55\u5728\u6784\u5efa\u8868\u5355\u65f6\u4f7f\u7528 Tag Helpers\u3002\u5b83\u4eec\u7b80\u5316\u4e86\u751f\u6210\u6b63\u786e\u5143\u7d20\u540d\u79f0\u548c ID \u7684\u8fc7\u7a0b\uff0c\u4ee5\u4fbf\u5728\u5c06\u8868\u5355\u53d1\u9001\u56de\u5e94\u7528\u7a0b\u5e8f\u65f6\u53ef\u4ee5\u65e0\u7f1d\u5730\u8fdb\u884c\u6a21\u578b\u7ed1\u5b9a\u3002\u4e3a\u4e86\u5c06\u5b83\u4eec\u653e\u5728\u4e0a\u4e0b\u6587\u4e2d\uff0c\u60a8\u5c06\u7ee7\u7eed\u6784\u5efa\u60a8\u5728\u524d\u51e0\u7ae0\u4e2d\u770b\u5230\u7684\u8d27\u5e01\u8f6c\u6362\u5668\u5e94\u7528\u7a0b\u5e8f\u3002\u60a8\u5c06\u6dfb\u52a0\u5411\u5176\u63d0\u4ea4\u8d27\u5e01\u5151\u6362\u8bf7\u6c42\u3001\u9a8c\u8bc1\u6570\u636e\u4ee5\u53ca\u4f7f\u7528 Tag Helpers \u5728\u8868\u5355\u4e0a\u91cd\u65b0\u663e\u793a\u9519\u8bef\u7684\u529f\u80fd\uff0c\u4ee5\u4e3a\u60a8\u5b8c\u6210\u8dd1\u817f\u5de5\u4f5c\uff0c\u5982\u56fe 18.1 \u6240\u793a\u3002<\/p>\n
![\"alt](\"\/images\/aspnetcoreinaction\/1801.png\")
<\/p>\n
Figure 18.1 The currency converter application forms, built using Tag Helpers. The labels, drop-down lists, input elements, and validation messages are all generated using Tag Helpers.
\n\u56fe 18.1 \u4f7f\u7528 Tag Helper \u6784\u5efa\u7684\u8d27\u5e01\u8f6c\u6362\u5668\u5e94\u7528\u7a0b\u5e8f\u8868\u5355\u3002\u6807\u7b7e\u3001\u4e0b\u62c9\u5217\u8868\u3001input \u5143\u7d20\u548c\u9a8c\u8bc1\u6d88\u606f\u90fd\u662f\u4f7f\u7528 Tag Helper \u751f\u6210\u7684\u3002<\/p>\n
As you develop the application, you\u2019ll meet the most common Tag Helpers you\u2019ll encounter when working with forms. You\u2019ll also see how you can use Tag Helpers to simplify other common tasks, such as generating links, conditionally displaying data in your application, and ensuring that users see the latest version of an image file when they refresh their browser.
\n\u5728\u5f00\u53d1\u5e94\u7528\u7a0b\u5e8f\u65f6\uff0c\u60a8\u5c06\u9047\u5230\u5728\u4f7f\u7528\u8868\u5355\u65f6\u9047\u5230\u7684\u6700\u5e38\u89c1\u7684\u6807\u8bb0\u5e2e\u52a9\u7a0b\u5e8f\u3002\u60a8\u8fd8\u5c06\u4e86\u89e3\u5982\u4f55\u4f7f\u7528\u6807\u8bb0\u5e2e\u52a9\u7a0b\u5e8f\u6765\u7b80\u5316\u5176\u4ed6\u5e38\u89c1\u4efb\u52a1\uff0c\u4f8b\u5982\u751f\u6210\u94fe\u63a5\u3001\u5728\u5e94\u7528\u7a0b\u5e8f\u4e2d\u6709\u6761\u4ef6\u5730\u663e\u793a\u6570\u636e\uff0c\u4ee5\u53ca\u786e\u4fdd\u7528\u6237\u5728\u5237\u65b0\u6d4f\u89c8\u5668\u65f6\u770b\u5230\u6700\u65b0\u7248\u672c\u7684\u56fe\u50cf\u6587\u4ef6\u3002<\/p>\n
To start, I\u2019ll talk a little about why you need Tag Helpers when Razor can already generate any HTML you like by combining C# and HTML in a file.
\n\u9996\u5148\uff0c\u6211\u5c06\u7b80\u8981\u4ecb\u7ecd\u4e00\u4e0b\u5f53 Razor \u5df2\u7ecf\u53ef\u4ee5\u901a\u8fc7\u5c06 C# \u548c HTML \u7ec4\u5408\u5230\u4e00\u4e2a\u6587\u4ef6\u4e2d\u6765\u751f\u6210\u60a8\u559c\u6b22\u7684\u4efb\u4f55 HTML \u65f6\uff0c\u4e3a\u4ec0\u4e48\u9700\u8981\u6807\u8bb0\u5e2e\u52a9\u7a0b\u5e8f\u3002<\/p>\n
18.1 Catering to editors with Tag Helpers<\/h2>\n
18.1 \u4f7f\u7528\u6807\u7b7e\u52a9\u624b\u8fce\u5408\u7f16\u8f91\u8005<\/p>\n
One of the common complaints about the mixture of C# and HTML in Razor templates is that you can\u2019t easily use standard HTML editing tools with them; all the @ and {} symbols in the C# code tend to confuse the editors. Reading the templates can be similarly difficult for people; switching paradigms between C# and HTML can be a bit jarring sometimes.
\n\u5173\u4e8e Razor \u6a21\u677f\u4e2d C# \u548c HTML \u6df7\u5408\u7684\u5e38\u89c1\u62b1\u6028\u4e4b\u4e00\u662f\uff0c\u60a8\u65e0\u6cd5\u8f7b\u677e\u5730\u5bf9\u5b83\u4eec\u4f7f\u7528\u6807\u51c6\u7684 HTML \u7f16\u8f91\u5de5\u5177;C# \u4ee3\u7801\u4e2d\u7684\u6240\u6709 @ \u548c {} \u7b26\u53f7\u5f80\u5f80\u4f1a\u4f7f\u7f16\u8f91\u5668\u611f\u5230\u56f0\u60d1\u3002\u9605\u8bfb\u6a21\u677f\u5bf9\u4eba\u4eec\u6765\u8bf4\u540c\u6837\u56f0\u96be;\u5728 C# \u548c HTML \u4e4b\u95f4\u5207\u6362\u8303\u4f8b\u6709\u65f6\u53ef\u80fd\u6709\u70b9\u4e0d\u548c\u8c10\u3002<\/p>\n
This arguably wasn\u2019t such a problem when Visual Studio was the only supported way to build ASP.NET websites, as it could obviously understand the templates without any problems and helpfully colorize the editor. But with ASP.NET Core going cross-platform, the desire to play nicely with other editors reared its head again.
\n\u5f53 Visual Studio \u662f\u6784\u5efa ASP.NET \u7f51\u7ad9\u7684\u552f\u4e00\u53d7\u652f\u6301\u65b9\u5f0f\u65f6\uff0c\u8fd9\u53ef\u4ee5\u8bf4\u4e0d\u662f\u95ee\u9898\uff0c\u56e0\u4e3a\u5b83\u663e\u7136\u53ef\u4ee5\u6beb\u65e0\u95ee\u9898\u5730\u7406\u89e3\u6a21\u677f\u5e76\u6709\u52a9\u4e8e\u4e3a\u7f16\u8f91\u5668\u7740\u8272\u3002\u4f46\u968f\u7740 ASP.NET Core \u8de8\u5e73\u53f0\uff0c\u4e0e\u5176\u4ed6\u7f16\u8f91\u5668\u53cb\u597d\u5408\u4f5c\u7684\u613f\u671b\u518d\u6b21\u62ac\u5934\u3002<\/p>\n
This was one of the big motivations for Tag Helpers. They integrate seamlessly into the standard HTML syntax by adding what look to be attributes, typically starting with asp-. They\u2019re most often used to generate HTML forms, as shown in the following listing. This listing shows a view from the first iteration of the currency converter application, in which you choose the currencies and quantity to convert.
\n\u8fd9\u662f Tag Helper \u7684\u4e3b\u8981\u52a8\u673a\u4e4b\u4e00\u3002\u5b83\u4eec\u901a\u8fc7\u6dfb\u52a0\u770b\u8d77\u6765\u50cf\u5c5e\u6027\u7684\u5185\u5bb9\uff08\u901a\u5e38\u4ee5 asp-<\/em> \u5f00\u5934\uff09\u65e0\u7f1d\u96c6\u6210\u5230\u6807\u51c6 HTML \u8bed\u6cd5\u4e2d\u3002\u5b83\u4eec\u6700\u5e38\u7528\u4e8e\u751f\u6210 HTML \u8868\u5355\uff0c\u5982\u4e0b\u9762\u7684\u6e05\u5355\u6240\u793a\u3002\u6b64\u6e05\u5355\u663e\u793a\u4e86 currency converter \u5e94\u7528\u7a0b\u5e8f\u7b2c\u4e00\u6b21\u8fed\u4ee3\u7684\u89c6\u56fe\uff0c\u60a8\u53ef\u4ee5\u5728\u5176\u4e2d\u9009\u62e9\u8981\u8f6c\u6362\u7684\u8d27\u5e01\u548c\u6570\u91cf\u3002<\/p>\nListing 18.1 User registration form using Tag Helpers
\n\u6e05\u5355 18.1 \u4f7f\u7528 Tag Helpers \u7684\u7528\u6237\u6ce8\u518c\u8868\u5355<\/p>\n
@page #A\n@model ConvertModel #A\n<form method="post"> \n <div class="form-group">\n <label asp-for="CurrencyFrom"><\/label> #B\n <input class="form-control" asp-for="CurrencyFrom" \/> #C\n <span asp-validation-for="CurrencyFrom"><\/span> #D\n <\/div>\n <div class="form-group">\n <label asp-for="Quantity"><\/label> #B\n <input class="form-control" asp-for="Quantity" \/> #C\n <span asp-validation-for="Quantity"><\/span> #D\n <\/div> \n <div class="form-group">\n <label asp-for="CurrencyTo"><\/label> #B\n <input class="form-control" asp-for="CurrencyTo" \/> #C\n <span asp-validation-for="CurrencyTo"><\/span> #D\n <\/div>\n <button type="submit" class="btn btn-primary">Submit<\/button>\n<\/form><\/code><\/pre>\n\u2776 This is the view for the Razor Page Convert.cshtml. The Model type is ConvertModel.
\n\u8fd9\u662f Razor Page Convert.cshtml \u7684\u89c6\u56fe\u3002Model \u7c7b\u578b\u4e3a ConvertModel\u3002
\n\u2777 asp-for on Labels generates the caption for labels based on the view model.
\nLabels \u4e0a\u7684 asp-for \u6839\u636e\u89c6\u56fe\u6a21\u578b\u751f\u6210\u6807\u7b7e\u7684\u6807\u9898\u3002
\n\u2778 asp-for on Inputs generates the correct type, value, name, and validation attributes for the model.
\ninputs \u4e0a\u7684 asp-for \u4e3a\u6a21\u578b\u751f\u6210\u6b63\u786e\u7684\u7c7b\u578b\u3001\u503c\u3001\u540d\u79f0\u548c\u9a8c\u8bc1\u5c5e\u6027\u3002
\n\u2779 Validation messages are written to a span using Tag Helpers.
\n\u9a8c\u8bc1\u6d88\u606f\u4f7f\u7528 Tag Helper \u5199\u5165 span\u3002<\/p>\n
At first glance, you might not even spot the Tag Helpers, they blend in so well with the HTML! This makes it easy to edit the files with any standard HTML text editor. But don\u2019t be concerned that you\u2019ve sacrificed readability in Visual Studio. As you can see in figure 18.2, elements with Tag Helpers are distinguishable from the standard HTML <div><\/code> element and the standard HTML class attribute on the <input><\/code> element. The C# properties of the view model being referenced (CurrencyFrom, in this case) are also displayed differently from \u201cnormal\u201d HTML attributes. And of course you get IntelliSense, as you\u2019d expect. Most other integrated development environments (IDEs) also include syntax highlighting and IntelliSense support.
\n\u4e4d\u4e00\u770b\uff0c\u60a8\u751a\u81f3\u53ef\u80fd\u6ca1\u6709\u6ce8\u610f\u5230 Tag Helpers\uff0c\u5b83\u4eec\u4e0e HTML \u878d\u5408\u5f97\u975e\u5e38\u597d\uff01\u8fd9\u4f7f\u5f97\u4f7f\u7528\u4efb\u4f55\u6807\u51c6 HTML \u6587\u672c\u7f16\u8f91\u5668\u7f16\u8f91\u6587\u4ef6\u53d8\u5f97\u5bb9\u6613\u3002\u4f46\u4e0d\u8981\u62c5\u5fc3\u60a8\u727a\u7272\u4e86 Visual Studio \u4e2d\u7684\u53ef\u8bfb\u6027\u3002\u5982\u56fe 18.2 \u6240\u793a\uff0c\u5e26\u6709 Tag Helpers \u7684\u5143\u7d20\u4e0e\u6807\u51c6 HTML <div><\/code>\u5143\u7d20\u548c\u5143\u7d20\u4e0a\u7684\u6807\u51c6 HTML <input><\/code>class \u5c5e\u6027\u662f\u53ef\u4ee5\u533a\u5206\u7684\u3002\u6240\u5f15\u7528\u7684\u89c6\u56fe\u6a21\u578b\u7684 C# \u5c5e\u6027\uff08\u5728\u672c\u4f8b\u4e2d\u4e3a CurrencyFrom\uff09\u7684\u663e\u793a\u65b9\u5f0f\u4e5f\u4e0e\u201c\u666e\u901a\u201dHTML \u5c5e\u6027\u4e0d\u540c\u3002\u5f53\u7136\uff0c\u6b63\u5982\u60a8\u6240\u671f\u671b\u7684\u90a3\u6837\uff0c\u60a8\u53ef\u4ee5\u83b7\u5f97 IntelliSense\u3002\u5927\u591a\u6570\u5176\u4ed6\u96c6\u6210\u5f00\u53d1\u73af\u5883 \uff08IDE\uff09 \u8fd8\u5305\u62ec\u8bed\u6cd5\u7a81\u51fa\u663e\u793a\u548c IntelliSense \u652f\u6301\u3002<\/p>\n![\"alt](\"\/images\/aspnetcoreinaction\/1802.png\")
<\/p>\n
Figure 18.2 In Visual Studio, Tag Helpers are distinguishable from normal elements by being bold and a different color from standard HTML elements and attributes.
\n\u56fe 18.2 \u5728 Visual Studio \u4e2d\uff0c\u6807\u8bb0\u5e2e\u52a9\u7a0b\u5e8f\u4e0e\u666e\u901a\u5143\u7d20\u7684\u533a\u522b\u5728\u4e8e\u7c97\u4f53\u548c\u4e0e\u6807\u51c6 HTML \u5143\u7d20\u548c\u5c5e\u6027\u4e0d\u540c\u7684\u989c\u8272\u3002<\/p>\n
Tag Helpers are extra attributes on standard HTML elements (or new elements entirely) that work by modifying the HTML element they\u2019re attached to. They let you easily integrate your server-side values, such as those exposed on your PageModel, with the generated HTML.
\n\u6807\u7b7e\u5e2e\u52a9\u7a0b\u5e8f\u662f\u6807\u51c6 HTML \u5143\u7d20\uff08\u6216\u5b8c\u5168\u662f\u65b0\u5143\u7d20\uff09\u4e0a\u7684\u989d\u5916\u5c5e\u6027\uff0c\u901a\u8fc7\u4fee\u6539\u5b83\u4eec\u6240\u9644\u52a0\u5230\u7684 HTML \u5143\u7d20\u6765\u5de5\u4f5c\u3002\u5b83\u4eec\u53ef\u8ba9\u60a8\u8f7b\u677e\u5730\u5c06\u670d\u52a1\u5668\u7aef\u503c\uff08\u4f8b\u5982 PageModel \u4e0a\u516c\u5f00\u7684\u503c\uff09\u4e0e\u751f\u6210\u7684 HTML \u96c6\u6210\u3002<\/p>\n
Notice that listing 18.1 doesn\u2019t specify the captions to display in the labels. Instead, you declaratively use asp-for="CurrencyFrom" to say \u201cFor this <label><\/code>, use the CurrencyFrom property to work out what caption to use.\u201d Similarly, for the <input><\/code> elements, Tag Helpers are used to
\n\u8bf7\u6ce8\u610f\uff0c\u6e05\u5355 18.1 \u6ca1\u6709\u6307\u5b9a\u8981\u5728\u6807\u7b7e\u4e2d\u663e\u793a\u7684\u6807\u9898\u3002\u76f8\u53cd\uff0c\u60a8\u4ee5\u58f0\u660e\u65b9\u5f0f\u4f7f\u7528 asp-for=\u201cCurrencyFrom\u201d \u6765\u8868\u793a <label><\/code>\uff0c\u8bf7\u4f7f\u7528 CurrencyFrom \u5c5e\u6027\u6765\u786e\u5b9a\u8981\u4f7f\u7528\u7684\u6807\u9898\u3002\u540c\u6837\uff0c\u5bf9\u4e8e <input><\/code>\u5143\u7d20\uff0cTag Helpers \u7528\u4e8e<\/p>\n\u2022 Automatically populate the value from the PageModel property.
\n\u81ea\u52a8\u586b\u5145 PageModel \u5c5e\u6027\u4e2d\u7684\u503c\u3002
\n\u2022 Choose the correct id and name, so that when the form is POSTed back to the Razor Page, the property is model-bound correctly.
\n\u9009\u62e9\u6b63\u786e\u7684 ID \u548c\u540d\u79f0\uff0c\u4ee5\u4fbf\u5728\u5c06\u8868\u5355 POST \u56de Razor \u9875\u9762\u65f6\uff0c\u8be5\u5c5e\u6027\u5c06\u6b63\u786e\u8fdb\u884c\u6a21\u578b\u7ed1\u5b9a\u3002
\n\u2022 Choose the correct input type to display (for example, a number input for the Quantity property).
\n\u9009\u62e9\u8981\u663e\u793a\u7684\u6b63\u786e\u8f93\u5165\u7c7b\u578b \uff08\u4f8b\u5982\uff0cQuantity \u5c5e\u6027\u7684\u6570\u5b57\u8f93\u5165\uff09\u3002
\n\u2022 Display any validation errors, as shown in figure 18.3.
\n\u663e\u793a\u6240\u6709\u9a8c\u8bc1\u9519\u8bef\uff0c\u5982\u56fe 18.3 \u6240\u793a\u3002<\/p>\n
![\"alt](\"\/images\/aspnetcoreinaction\/1803.png\")
<\/p>\n
Figure 18.3 Tag Helpers hook into the metadata provided by DataAnnotations attributes, as well as the property types themselves. The Validation Tag Helper can even populate error messages based on the ModelState, as you saw in chapter 16.
\n\u56fe 18.3 \u6807\u8bb0\u5e2e\u52a9\u7a0b\u5e8f\u6302\u63a5\u5230 DataAnnotations \u5c5e\u6027\u63d0\u4f9b\u7684\u5143\u6570\u636e\u4ee5\u53ca\u5c5e\u6027\u7c7b\u578b\u672c\u8eab\u3002Validation Tag Helper \u751a\u81f3\u53ef\u4ee5\u6839\u636e ModelState \u586b\u5145\u9519\u8bef\u6d88\u606f\uff0c\u5982\u7b2c 16 \u7ae0\u6240\u793a\u3002<\/p>\n
Tag Helpers can perform a variety of functions by modifying the HTML elements they\u2019re applied to. This chapter introduces several common Tag Helpers and how to use them, but it\u2019s not an exhaustive list. I don\u2019t cover all the helpers that come out of the box in ASP.NET Core (there are more coming with every release!), and you can easily create your own, as you\u2019ll see in chapter 32. Alternatively, you could use those published by others on NuGet or GitHub.
\n\u6807\u7b7e\u5e2e\u52a9\u7a0b\u5e8f\u53ef\u4ee5\u901a\u8fc7\u4fee\u6539\u5b83\u4eec\u6240\u5e94\u7528\u7684 HTML \u5143\u7d20\u6765\u6267\u884c\u5404\u79cd\u529f\u80fd\u3002\u672c\u7ae0\u4ecb\u7ecd\u4e86\u51e0\u79cd\u5e38\u89c1\u7684 Tag Helper \u53ca\u5176\u4f7f\u7528\u65b9\u6cd5\uff0c\u4f46\u5e76\u975e\u8be6\u5c3d\u65e0\u9057\u3002\u6211\u6ca1\u6709\u6db5\u76d6 ASP.NET Core \u4e2d\u5f00\u7bb1\u5373\u7528\u7684\u6240\u6709\u5e2e\u52a9\u7a0b\u5e8f\uff08\u6bcf\u4e2a\u7248\u672c\u90fd\u4f1a\u63d0\u4f9b\u66f4\u591a\u5e2e\u52a9\u7a0b\u5e8f\uff09\uff0c\u60a8\u53ef\u4ee5\u8f7b\u677e\u521b\u5efa\u81ea\u5df1\u7684\u5e2e\u52a9\u7a0b\u5e8f\uff0c\u5982\u7b2c 32 \u7ae0\u6240\u793a\u3002\u6216\u8005\uff0c\u60a8\u4e5f\u53ef\u4ee5\u4f7f\u7528\u5176\u4ed6\u4eba\u5728 NuGet \u6216 GitHub \u4e0a\u53d1\u5e03\u7684 Navi\u3002<\/p>\n
\nWebForms flashbacks
\nWebForms \u95ea\u56de<\/p>\n
For those who used ASP.NET back in the day of WebForms, before the advent of the Model-View-Controller (MVC) pattern for web development, Tag Helpers may be triggering bad memories. Although the asp- prefix is somewhat reminiscent of ASP.NET Web Server control definitions, never fear; the two are completely different beasts.
\n\u5bf9\u4e8e\u90a3\u4e9b\u5728 WebForms \u65f6\u4ee3\u4f7f\u7528 ASP.NET \u7684\u4eba\u6765\u8bf4\uff0c\u5728\u7528\u4e8e Web \u5f00\u53d1\u7684\u6a21\u578b-\u89c6\u56fe-\u63a7\u5236\u5668 \uff08MVC\uff09 \u6a21\u5f0f\u51fa\u73b0\u4e4b\u524d\uff0c\u6807\u8bb0\u5e2e\u52a9\u7a0b\u5e8f\u53ef\u80fd\u4f1a\u89e6\u53d1\u7cdf\u7cd5\u7684\u56de\u5fc6\u3002\u5c3d\u7ba1 asp- \u524d\u7f00\u6709\u70b9\u8ba9\u4eba\u60f3\u8d77 ASP.NET Web \u670d\u52a1\u5668\u63a7\u4ef6\u5b9a\u4e49\uff0c\u4f46\u4e0d\u8981\u5bb3\u6015;\u4e24\u8005\u662f\u5b8c\u5168\u4e0d\u540c\u7684\u91ce\u517d\u3002<\/p>\n
Web Server controls were added directly to a page\u2019s backing C# class and had a broad scope that could modify seemingly unrelated parts of the page. Coupled with that, they had a complex life cycle that was hard to understand and debug when things weren\u2019t working. The perils of trying to work with that level of complexity haven\u2019t been forgotten, and Tag Helpers aren\u2019t the same.
\nWeb \u670d\u52a1\u5668\u63a7\u4ef6\u76f4\u63a5\u6dfb\u52a0\u5230\u9875\u9762\u7684\u652f\u6301 C# \u7c7b\u4e2d\uff0c\u5e76\u4e14\u5177\u6709\u5e7f\u6cdb\u7684\u8303\u56f4\uff0c\u53ef\u4ee5\u4fee\u6539\u9875\u9762\u4e2d\u770b\u4f3c\u4e0d\u76f8\u5173\u7684\u90e8\u5206\u3002\u518d\u52a0\u4e0a\uff0c\u5b83\u4eec\u7684\u751f\u547d\u5468\u671f\u5f88\u590d\u6742\uff0c\u5f53\u4e8b\u60c5\u4e0d\u6b63\u5e38\u65f6\uff0c\u5f88\u96be\u7406\u89e3\u548c\u8c03\u8bd5\u3002\u5c1d\u8bd5\u5904\u7406\u8fd9\u79cd\u590d\u6742\u7a0b\u5ea6\u7684\u5371\u9669\u5e76\u6ca1\u6709\u88ab\u9057\u5fd8\uff0c\u6807\u7b7e\u5e2e\u52a9\u7a0b\u5e8f\u4e5f\u4e0d\u4e00\u6837\u3002<\/p>\n
Tag Helpers don\u2019t have a life cycle; they participate in the rendering of the element to which they\u2019re attached, and that\u2019s it. They can modify the HTML element they\u2019re attached to, but they can\u2019t modify anything else on your page, making them conceptually much simpler. An additional capability they bring is the ability to have multiple Tag Helpers acting on a single element\u2014something Web Server controls couldn\u2019t easily achieve.
\n\u6807\u8bb0\u5e2e\u52a9\u7a0b\u5e8f\u6ca1\u6709\u751f\u547d\u5468\u671f;\u5b83\u4eec\u53c2\u4e0e\u6e32\u67d3\u5b83\u4eec\u6240\u9644\u52a0\u5230\u7684\u5143\u7d20\uff0c\u4ec5\u6b64\u800c\u5df2\u3002\u4ed6\u4eec\u53ef\u4ee5\u4fee\u6539\u5b83\u4eec\u6240\u9644\u52a0\u5230\u7684 HTML \u5143\u7d20\uff0c\u4f46\u4e0d\u80fd\u4fee\u6539\u9875\u9762\u4e0a\u7684\u4efb\u4f55\u5176\u4ed6\u5185\u5bb9\uff0c\u4ece\u800c\u5728\u6982\u5ff5\u4e0a\u4f7f\u5b83\u4eec\u53d8\u5f97\u66f4\u52a0\u7b80\u5355\u3002\u5b83\u4eec\u5e26\u6765\u7684\u53e6\u4e00\u9879\u529f\u80fd\u662f\u80fd\u591f\u8ba9\u591a\u4e2a Tag Helpers \u4f5c\u7528\u4e8e\u5355\u4e2a\u5143\u7d20 \u2014 \u8fd9\u662f Web Server \u63a7\u4ef6\u65e0\u6cd5\u8f7b\u677e\u5b9e\u73b0\u7684\u3002<\/p>\n
Overall, if you\u2019re writing Razor templates, you\u2019ll have a much more enjoyable experience if you embrace Tag Helpers as integral to its syntax. They bring a lot of benefits without obvious downsides, and your cross-platform-editor friends will thank you!
\n\u603b\u7684\u6765\u8bf4\uff0c\u5982\u679c\u4f60\u6b63\u5728\u7f16\u5199 Razor \u6a21\u677f\uff0c\u5982\u679c\u4f60\u5c06 Tag Helpers \u4f5c\u4e3a\u5176\u8bed\u6cd5\u7684\u7ec4\u6210\u90e8\u5206\uff0c\u4f60\u5c06\u83b7\u5f97\u66f4\u6109\u5feb\u7684\u4f53\u9a8c\u3002\u5b83\u4eec\u5e26\u6765\u4e86\u5f88\u591a\u597d\u5904\uff0c\u800c\u4e14\u6ca1\u6709\u660e\u663e\u7684\u7f3a\u70b9\uff0c\u4f60\u7684\u8de8\u5e73\u53f0\u7f16\u8f91\u5668\u670b\u53cb\u4f1a\u611f\u8c22\u4f60\uff01<\/p>\n<\/blockquote>\n
18.2 Creating forms using Tag Helpers<\/h2>\n
18.2 \u4f7f\u7528\u6807\u8bb0\u5e2e\u52a9\u7a0b\u5e8f\u521b\u5efa\u8868\u5355<\/p>\n
In this section you\u2019ll learn how to use some of the most useful Tag Helpers: Tag Helpers that work with forms. You\u2019ll learn how to use them to generate HTML markup based on properties of your PageModel, creating the correct id and name attributes, and setting the value of the element to the model property\u2019s value (among other things). This capability significantly reduces the amount of markup you need to write manually.
\n\u5728\u672c\u8282\u4e2d\uff0c\u60a8\u5c06\u5b66\u4e60\u5982\u4f55\u4f7f\u7528\u4e00\u4e9b\u6700\u6709\u7528\u7684 Tag Helpers\uff1a\u4f7f\u7528\u8868\u5355\u7684 Tag Helpers\u3002\u60a8\u5c06\u5b66\u4e60\u5982\u4f55\u4f7f\u7528\u5b83\u4eec\u6839\u636e PageModel \u7684\u5c5e\u6027\u751f\u6210 HTML \u6807\u8bb0\uff0c\u521b\u5efa\u6b63\u786e\u7684 id \u548c name \u5c5e\u6027\uff0c\u4ee5\u53ca\u5c06\u5143\u7d20\u7684\u503c\u8bbe\u7f6e\u4e3a model \u5c5e\u6027\u7684\u503c\uff08\u4ee5\u53ca\u5176\u4ed6\u5185\u5bb9\uff09\u3002\u6b64\u529f\u80fd\u663e\u8457\u51cf\u5c11\u4e86\u60a8\u9700\u8981\u624b\u52a8\u7f16\u5199\u7684\u6807\u8bb0\u91cf\u3002<\/p>\n
Imagine you\u2019re building the checkout page for the currency converter application, and you need to capture the user\u2019s details on the checkout page. In chapter 16 you built a UserBindingModel model (shown in listing 18.2), added DataAnnotations attributes for validation, and saw how to model-bind it in a POST to a Razor Page. In this chapter you\u2019ll see how to create the view for it by exposing the UserBindingModel as a property on your PageModel.
\n\u5047\u8bbe\u60a8\u6b63\u5728\u4e3a\u8d27\u5e01\u8f6c\u6362\u5668\u5e94\u7528\u7a0b\u5e8f\u6784\u5efa\u7ed3\u5e10\u9875\u9762\uff0c\u5e76\u4e14\u60a8\u9700\u8981\u5728\u7ed3\u5e10\u9875\u9762\u4e0a\u6355\u83b7\u7528\u6237\u7684\u8be6\u7ec6\u4fe1\u606f\u3002\u5728\u7b2c 16 \u7ae0\u4e2d\uff0c\u60a8\u6784\u5efa\u4e86\u4e00\u4e2a UserBindingModel \u6a21\u578b\uff08\u5982\u6e05\u5355 18.2 \u6240\u793a\uff09\uff0c\u6dfb\u52a0\u4e86\u7528\u4e8e\u9a8c\u8bc1\u7684 DataAnnotations \u5c5e\u6027\uff0c\u5e76\u4e86\u89e3\u4e86\u5982\u4f55\u5728 POST \u4e2d\u5c06\u5176\u6a21\u578b\u7ed1\u5b9a\u5230 Razor \u9875\u9762\u3002\u5728\u672c\u7ae0\u4e2d\uff0c\u60a8\u5c06\u4e86\u89e3\u5982\u4f55\u901a\u8fc7\u5c06 UserBindingModel \u4f5c\u4e3a PageModel \u4e0a\u7684\u5c5e\u6027\u516c\u5f00\u6765\u4e3a\u5176\u521b\u5efa\u89c6\u56fe\u3002<\/p>\n
Warning<\/b> With Razor Pages, you often expose the same object in your view that you use for model binding. When you do this, you must be careful to not include sensitive values (that shouldn\u2019t be edited) in the binding model, to prevent mass-assignment attacks on your app. You can read more about these attacks on my blog at http:\/\/mng.bz\/RXw0<\/a>.
\n\u8b66\u544a\uff1a\u4f7f\u7528 Razor Pages\uff0c\u60a8\u901a\u5e38\u4f1a\u5728\u89c6\u56fe\u4e2d\u516c\u5f00\u7528\u4e8e\u6a21\u578b\u7ed1\u5b9a\u7684\u76f8\u540c\u5bf9\u8c61\u3002\u6267\u884c\u6b64\u4f5c\u65f6\uff0c\u5fc5\u987b\u6ce8\u610f\u4e0d\u8981\u5728\u7ed1\u5b9a\u6a21\u578b\u4e2d\u5305\u542b\u654f\u611f\u503c\uff08\u4e0d\u5e94\u7f16\u8f91\uff09\uff0c\u4ee5\u9632\u6b62\u5bf9\u5e94\u7528\u7a0b\u5e8f\u8fdb\u884c\u6279\u91cf\u8d4b\u503c\u653b\u51fb\u3002\u60a8\u53ef\u4ee5\u5728\u6211\u7684\u535a\u5ba2 http:\/\/mng.bz\/RXw0<\/a> \u4e0a\u9605\u8bfb\u6709\u5173\u8fd9\u4e9b\u653b\u51fb\u7684\u66f4\u591a\u4fe1\u606f\u3002<\/p>\nListing 18.2 UserBindingModel for creating a user on a checkout page
\n\u5217\u8868 18.2 \u7528\u4e8e\u5728\u7ed3\u5e10\u9875\u9762\u4e0a\u521b\u5efa\u7528\u6237\u7684 UserBindingModel<\/p>\n
public class UserBindingModel\n{\n [Required]\n [StringLength(100, ErrorMessage = "Maximum length is {1}")]\n [Display(Name = "Your name")]\n public string FirstName { get; set; }\n\n [Required]\n [StringLength(100, ErrorMessage = "Maximum length is {1}")]\n [Display(Name = "Last name")]\n public string LastName { get; set; }\n\n [Required]\n [EmailAddress]\n public string Email { get; set; }\n\n [Phone(ErrorMessage = "Not a valid phone number.")]\n [Display(Name = "Phone number")]\n public string PhoneNumber { get; set; }\n}<\/code><\/pre>\nThe UserBindingModel is decorated with various DataAnnotations attributes. In chapter 16 you saw that these attributes are used during model validation when the model is bound to a request, before the page handler is executed. These attributes are also used by the Razor templating language to provide the metadata required to generate the correct HTML when you use Tag Helpers.
\nUserBindingModel \u4f7f\u7528\u5404\u79cd DataAnnotations \u5c5e\u6027\u8fdb\u884c\u4fee\u9970\u3002\u5728\u7b2c 16 \u7ae0\u4e2d\uff0c\u4f60\u770b\u5230\u8fd9\u4e9b\u5c5e\u6027\u5728\u6a21\u578b\u9a8c\u8bc1\u671f\u95f4\u3001\u5f53\u6a21\u578b\u7ed1\u5b9a\u5230\u8bf7\u6c42\u65f6\u3001\u5728\u6267\u884c\u9875\u9762\u5904\u7406\u7a0b\u5e8f\u4e4b\u524d\u4f7f\u7528\u3002Razor \u6a21\u677f\u8bed\u8a00\u8fd8\u4f7f\u7528\u8fd9\u4e9b\u5c5e\u6027\u6765\u63d0\u4f9b\u5728\u4f7f\u7528\u6807\u8bb0\u5e2e\u52a9\u7a0b\u5e8f\u65f6\u751f\u6210\u6b63\u786e HTML \u6240\u9700\u7684\u5143\u6570\u636e\u3002<\/p>\n
You can use the pattern I described in chapter 16, exposing a UserBindindModel as an Input property of your PageModel, to use the model for both model binding and in your Razor view:
\n\u60a8\u53ef\u4ee5\u4f7f\u7528\u6211\u5728\u7b2c 16 \u7ae0 \u5c06 UserBindindModel \u516c\u5f00\u4e3a PageModel \u7684 Input \u5c5e\u6027\u4e2d\u63cf\u8ff0\u7684\u6a21\u5f0f\uff0c\u5c06\u8be5\u6a21\u578b\u7528\u4e8e\u6a21\u578b\u7ed1\u5b9a\u548c Razor \u89c6\u56fe\uff1a<\/p>\n
public class CheckoutModel: PageModel\n{\n [BindProperty]\n public UserBindingModel Input { get; set; }\n}<\/code><\/pre>\nWith the help of the UserBindingModel property, Tag Helpers, and a little HTML, you can create a Razor view that lets the user enter their details, as shown in figure 18.4.
\n\u501f\u52a9 UserBindingModel \u5c5e\u6027\u3001\u6807\u8bb0\u5e2e\u52a9\u7a0b\u5e8f\u548c\u4e00\u4e9b HTML\uff0c\u60a8\u53ef\u4ee5\u521b\u5efa\u4e00\u4e2a\u5141\u8bb8\u7528\u6237\u8f93\u5165\u5176\u8be6\u7ec6\u4fe1\u606f\u7684 Razor \u89c6\u56fe\uff0c\u5982\u56fe 18.4 \u6240\u793a\u3002<\/p>\n
![\"alt](\"\/images\/aspnetcoreinaction\/1804.png\")
<\/p>\n
Figure 18.4 The checkout page for an application. The HTML is generated based on a UserBindingModel, using Tag Helpers to render the required element values, input types, and validation messages.
\n\u56fe 18.4 \u5e94\u7528\u7a0b\u5e8f\u7684\u7ed3\u5e10\u9875\u9762\u3002HTML \u662f\u57fa\u4e8e UserBindingModel \u751f\u6210\u7684\uff0c\u4f7f\u7528\u6807\u8bb0\u5e2e\u52a9\u7a0b\u5e8f\u5448\u73b0\u6240\u9700\u7684\u5143\u7d20\u503c\u3001\u8f93\u5165\u7c7b\u578b\u548c\u9a8c\u8bc1\u6d88\u606f\u3002<\/p>\n
The Razor template to generate this page is shown in listing 18.3. This code uses a variety of tag helpers, including
\n\u7528\u4e8e\u751f\u6210\u6b64\u9875\u9762\u7684 Razor \u6a21\u677f\u5982\u6e05\u5355 18.3 \u6240\u793a\u3002\u6b64\u4ee3\u7801\u4f7f\u7528\u5404\u79cd\u6807\u7b7e\u5e2e\u52a9\u7a0b\u5e8f\uff0c\u5305\u62ec<\/p>\n
\u2022 A Form Tag Helper on the <form> <\/code>element
\n<form> <\/code>\u5143\u7d20\u4e0a\u7684\u8868\u5355\u6807\u8bb0\u5e2e\u52a9\u7a0b\u5e8f
\n\u2022 Label Tag Helpers on the <label><\/code>
\n\u6807\u7b7e\u6807\u7b7e\u5e2e\u52a9\u7a0b\u5e8f
\n\u2022 Input Tag Helpers on the <input><\/code>
\n\u8f93\u5165\u6807\u8bb0\u5e2e\u52a9\u7a0b\u5e8f
\n\u2022 Validation Message Tag Helpers on <span><\/code> validation elements for each property in the UserBindingModel
\nUserBindingModel \u4e2d\u6bcf\u4e2a\u5c5e\u6027\u7684\u9a8c\u8bc1\u5143\u7d20\u4e0a\u7684\u9a8c\u8bc1\u6d88\u606f <span><\/code>\u6807\u8bb0\u5e2e\u52a9\u7a0b\u5e8f<\/p>\nListing 18.3 Razor template for binding to UserBindingModel on the checkout page
\n\u5217\u8868 18.3 \u7528\u4e8e\u5728\u7ed3\u5e10\u9875\u9762\u4e0a\u7ed1\u5b9a\u5230 UserBindingModel \u7684 Razor \u6a21\u677f<\/p>\n
@page\n@model CheckoutModel #A\n@{\n ViewData["Title"] = "Checkout";\n}\n<h1>@ViewData["Title"]<\/h1>\n<form asp-page="Checkout"> #B\n <div class="form-group">\n <label asp-for="Input.FirstName"><\/label> #C\n <input class="form-control" asp-for="Input.FirstName" \/>\n <span asp-validation-for="Input.FirstName"><\/span>\n <\/div>\n <div class="form-group">\n <label asp-for="Input.LastName"><\/label> \n <input class="form-control" asp-for="Input.LastName" \/>\n <span asp-validation-for="Input.LastName"><\/span>\n <\/div>\n <div class="form-group">\n <label asp-for="Input.Email"><\/label>\n <input class="form-control" asp-for="Input.Email" \/> #D\n <span asp-validation-for="Input.Email"><\/span>\n <\/div>\n <div class="form-group">\n <label asp-for="Input.PhoneNumber"><\/label>\n <input class="form-control" asp-for="Input.PhoneNumber" \/>\n <span asp-validation-for="Input.PhoneNumber"><\/span> #E\n <\/div>\n <button type="submit" class="btn btn-primary">Submit<\/button>\n<\/form><\/code><\/pre>\n\u2776 The CheckoutModel is the PageModel, which exposes a UserBindingModel on the Input property.
\nCheckoutModel \u662f PageModel\uff0c\u5b83\u5728 Input \u5c5e\u6027\u4e0a\u516c\u5f00 UserBindingModel\u3002
\n\u2777 Form Tag Helpers use routing to determine the URL the form will be posted to.
\n\u8868\u5355\u6807\u7b7e\u5e2e\u52a9\u7a0b\u5e8f\u4f7f\u7528\u8def\u7531\u6765\u786e\u5b9a\u8868\u5355\u5c06\u53d1\u5e03\u5230\u7684 URL\u3002
\n\u2778 The Label Tag Helper uses DataAnnotations on a property to determine the caption to display.
\nLabel Tag Helper \u5728\u5c5e\u6027\u4e0a\u4f7f\u7528 DataAnnotations \u6765\u786e\u5b9a\u8981\u663e\u793a\u7684\u6807\u9898\u3002
\n\u2779 The Input Tag Helper uses DataAnnotations to determine the type of input to generate.
\nInput Tag Helper \u4f7f\u7528 DataAnnotations \u6765\u786e\u5b9a\u8981\u751f\u6210\u7684\u8f93\u5165\u7c7b\u578b\u3002
\n\u277a The Validation Tag Helper displays error messages associated with the given property.
\nValidation Tag Helper \u663e\u793a\u4e0e\u7ed9\u5b9a\u5c5e\u6027\u5173\u8054\u7684\u9519\u8bef\u6d88\u606f\u3002<\/p>\n
You can see the HTML markup that this template produces in listing 18.4, which renders in the browser as you saw in figure 18.4. You can see that each of the HTML elements with a Tag Helper has been customized in the output: the <form><\/code> element has an action attribute, the <input><\/code> elements have an id and name based on the name of the referenced property, and both the <input><\/code> and <span><\/code> have data- attributes for validation.
\n\u60a8\u53ef\u4ee5\u5728\u6e05\u5355 18.4 \u4e2d\u770b\u5230\u6b64\u6a21\u677f\u751f\u6210\u7684 HTML \u6807\u8bb0\uff0c\u8be5\u6807\u8bb0\u5728\u6d4f\u89c8\u5668\u4e2d\u5448\u73b0\uff0c\u5982\u56fe 18.4 \u6240\u793a\u3002\u60a8\u53ef\u4ee5\u770b\u5230\uff0c\u6bcf\u4e2a\u5e26\u6709 Tag Helper \u7684 HTML \u5143\u7d20\u5728\u8f93\u51fa\u4e2d\u90fd\u5df2\u81ea\u5b9a\u4e49\uff1a <form><\/code>\u5143\u7d20\u5177\u6709 action \u5c5e\u6027\uff0c<input><\/code> \u5143\u7d20\u5177\u6709\u57fa\u4e8e\u5f15\u7528\u5c5e\u6027\u540d\u79f0\u7684 id \u548c name\uff0c\u5e76\u4e14<input><\/code> \u548c<span><\/code> \u90fd\u5177\u6709\u7528\u4e8e\u9a8c\u8bc1\u7684 data-<\/em> \u5c5e\u6027\u3002<\/p>\nListing 18.4 HTML generated by the Razor template on the checkout page
\n\u5217\u8868 18.4 \u7ed3\u5e10\u9875\u9762\u4e0a Razor \u6a21\u677f\u751f\u6210\u7684 HTML<\/p>\n
<form action="\/Checkout" method="post">\n <div class="form-group">\n <label for="Input_FirstName">Your name<\/label>\n <input class="form-control" type="text"\n data-val="true" data-val-length="Maximum length is 100"\n id="Input_FirstName" data-val-length-max="100"\n data-val-required="The Your name field is required."\n Maxlength="100" name="Input.FirstName" value="" \/>\n <span data-valmsg-for="Input.FirstName"\n class="field-validation-valid" data-valmsg-replace="true"><\/span>\n <\/div>\n <div class="form-group">\n <label for="Input_LastName">Your name<\/label>\n <input class="form-control" type="text"\n data-val="true" data-val-length="Maximum length is 100"\n id="Input_LastName" data-val-length-max="100"\n data-val-required="The Your name field is required."\n Maxlength="100" name="Input.LastName" value="" \/>\n <span data-valmsg-for="Input.LastName"\n class="field-validation-valid" data-valmsg-replace="true"><\/span>\n <\/div>\n <div class="form-group">\n <label for="Input_Email">Email<\/label>\n <input class="form-control" type="email" data-val="true"\n data-val-email="The Email field is not a valid e-mail address."\n Data-val-required="The Email field is required."\n Id="Input_Email" name="Input.Email" value="" \/>\n <span class="text-danger field-validation-valid"\n data-valmsg-for="Input.Email" data-valmsg-replace="true"><\/span>\n <\/div>\n <div class="form-group">\n <label for="Input_PhoneNumber">Phone number<\/label>\n <input class="form-control" type="tel" data-val="true"\n data-val-phone="Not a valid phone number." Id="Input_PhoneNumber"\n name="Input.PhoneNumber" value="" \/>\n <span data-valmsg-for="Input.PhoneNumber"\n class="text-danger field-validation-valid"\n data-valmsg-replace="true"><\/span>\n <\/div>\n <button type="submit" class="btn btn-primary">Submit<\/button>\n <input name="__RequestVerificationToken" type="hidden"\n value="CfDJ8PkYhAINFx1JmYUVIDWbpPyy_TRUNCATED" \/>\n<\/form><\/code><\/pre>\nWow, that\u2019s a lot of markup! If you\u2019re new to working with HTML, this might all seem a little overwhelming, but the important thing to notice is that you didn\u2019t have to write most of it! The Tag Helpers took care of most of the plumbing for you. That\u2019s basically Tag Helpers in a nutshell; they simplify the fiddly mechanics of building HTML forms, leaving you to concentrate on the overall design of your application instead of writing boilerplate markup.
\n\u54c7\uff0c\u597d\u591a\u6807\u8bb0\u554a\uff01\u5982\u679c\u60a8\u521a\u5f00\u59cb\u4f7f\u7528 HTML\uff0c\u8fd9\u53ef\u80fd\u770b\u8d77\u6765\u6709\u70b9\u8ba9\u4eba\u4e0d\u77e5\u6240\u63aa\uff0c\u4f46\u9700\u8981\u6ce8\u610f\u7684\u91cd\u8981\u4e00\u70b9\u662f\uff0c\u60a8\u4e0d\u5fc5\u7f16\u5199\u5927\u90e8\u5206\u5185\u5bb9\uff01Tag Helpers \u4e3a\u60a8\u5904\u7406\u4e86\u5927\u90e8\u5206\u7ba1\u9053\u5de5\u4f5c\u3002\u7b80\u800c\u8a00\u4e4b\uff0c\u8fd9\u57fa\u672c\u4e0a\u5c31\u662f Tag Helpers;\u5b83\u4eec\u7b80\u5316\u4e86\u6784\u5efa HTML \u8868\u5355\u7684\u7e41\u7410\u673a\u5236\uff0c\u8ba9\u60a8\u4e13\u6ce8\u4e8e\u5e94\u7528\u7a0b\u5e8f\u7684\u6574\u4f53\u8bbe\u8ba1\uff0c\u800c\u4e0d\u662f\u7f16\u5199\u6837\u677f\u6807\u8bb0\u3002<\/p>\n
NOTE<\/b> If you\u2019re using Razor to build your views, Tag Helpers will make your life easier, but they\u2019re entirely optional. You\u2019re free to write raw HTML without them or to use the legacy HTML Helpers.
\n\u6ce8\u610f\uff1a\u5982\u679c\u60a8\u4f7f\u7528 Razor \u6784\u5efa\u89c6\u56fe\uff0c\u6807\u8bb0\u5e2e\u52a9\u7a0b\u5e8f\u5c06\u4f7f\u60a8\u7684\u751f\u6d3b\u66f4\u8f7b\u677e\uff0c\u4f46\u5b83\u4eec\u5b8c\u5168\u662f\u53ef\u9009\u7684\u3002\u60a8\u53ef\u4ee5\u81ea\u7531\u7f16\u5199\u6ca1\u6709\u5b83\u4eec\u7684\u539f\u59cb HTML\uff0c\u4e5f\u53ef\u4ee5\u4f7f\u7528\u65e7\u7248 HTML \u5e2e\u52a9\u7a0b\u5e8f\u3002<\/p>\n
Tag Helpers simplify and abstract the process of HTML generation, but they generally try to do so without getting in your way. If you need the final generated HTML to have a particular attribute, you can add it to your markup. You can see that in the previous listings where class attributes are defined on <input><\/code> elements, such as <input class="form-control" asp-for="Input.FirstName" \/><\/code>. They pass untouched from Razor to the HTML output.
\n\u6807\u8bb0\u5e2e\u52a9\u7a0b\u5e8f\u7b80\u5316\u548c\u62bd\u8c61\u4e86 HTML \u751f\u6210\u8fc7\u7a0b\uff0c\u4f46\u5b83\u4eec\u901a\u5e38\u4f1a\u5c1d\u8bd5\u5728\u4e0d\u59a8\u788d\u60a8\u7684\u60c5\u51b5\u4e0b\u8fd9\u6837\u505a\u3002\u5982\u679c\u9700\u8981\u6700\u7ec8\u751f\u6210\u7684 HTML \u5177\u6709\u7279\u5b9a\u5c5e\u6027\uff0c\u53ef\u4ee5\u5c06\u5176\u6dfb\u52a0\u5230\u6807\u8bb0\u4e2d\u3002\u4f60\u53ef\u4ee5\u770b\u5230\uff0c\u5728\u524d\u9762\u7684\u6e05\u5355\u4e2d\uff0c\u7c7b\u5c5e\u6027\u662f\u5728 <input><\/code> \u5143\u7d20\u4e0a\u5b9a\u4e49\u7684\uff0c\u6bd4\u5982 <input class="form-control" asp-for="Input.FirstName" \/><\/code>.\u5b83\u4eec\u5c06\u539f\u5c01\u4e0d\u52a8\u7684 Razor \u4f20\u9012\u5230 HTML \u8f93\u51fa\u3002<\/p>\nTip<\/b> This is different from the way HTML Helpers worked in legacy ASP.NET; HTML helpers often require jumping through hoops to set attributes in the generated markup.
\n\u63d0\u793a\uff1a\u8fd9\u4e0e HTML \u5e2e\u52a9\u7a0b\u5e8f\u5728\u65e7\u7248 ASP.NET \u4e2d\u7684\u5de5\u4f5c\u65b9\u5f0f\u4e0d\u540c;HTML \u5e2e\u52a9\u7a0b\u5e8f\u901a\u5e38\u9700\u8981\u8df3\u8fc7\u91cd\u91cd\u969c\u788d\u624d\u80fd\u5728\u751f\u6210\u7684\u6807\u8bb0\u4e2d\u8bbe\u7f6e\u5c5e\u6027\u3002<\/p>\n
Even better, you can also override attributes that are normally generated by a Tag Helper, like the type attribute on an <input><\/code> element. For example, if the FavoriteColor property on your PageModel was a string, by default Tag Helpers would generate an <input><\/code> element with type="text". Updating your markup to use the HTML5 color picker type is trivial; set the type explicitly in your Razor view:
\n\u66f4\u597d\u7684\u662f\uff0c\u60a8\u8fd8\u53ef\u4ee5\u8986\u76d6\u901a\u5e38\u7531 Tag Helper \u751f\u6210\u7684\u5c5e\u6027\uff0c\u4f8b\u5982<input><\/code> \u5143\u7d20\u4e0a\u7684 type \u5c5e\u6027\u3002\u4f8b\u5982\uff0c\u5982\u679c PageModel \u4e0a\u7684 FavoriteColor \u5c5e\u6027\u662f\u4e00\u4e2a\u5b57\u7b26\u4e32\uff0c\u5219\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u6807\u8bb0\u5e2e\u52a9\u7a0b\u5e8f\u5c06\u751f\u6210\u4e00\u4e2a\u5177\u6709 type=\u201ctext\u201d \u7684<input><\/code> \u5143\u7d20\u3002\u66f4\u65b0\u6807\u8bb0\u4ee5\u4f7f\u7528 HTML5 \u989c\u8272\u9009\u53d6\u5668\u7c7b\u578b\u975e\u5e38\u7b80\u5355;\u5728 Razor \u89c6\u56fe\u4e2d\u663e\u5f0f\u8bbe\u7f6e\u7c7b\u578b\uff1a<\/p>\n<input type="color" asp-for="FavoriteColor" \/><\/code><\/pre>\nTip<\/b> HTML5 adds a huge number of features, including lots of form elements that you may not have come across before, such as range inputs and color pickers. You can read about them on the Mozilla Developer Network website at http:\/\/mng.bz\/qOc1<\/a>.
\n\u63d0\u793a\uff1aHTML5 \u6dfb\u52a0\u4e86\u5927\u91cf\u529f\u80fd\uff0c\u5305\u62ec\u8bb8\u591a\u60a8\u4ee5\u524d\u53ef\u80fd\u6ca1\u6709\u9047\u5230\u8fc7\u7684\u8868\u5355\u5143\u7d20\uff0c\u4f8b\u5982\u8303\u56f4\u8f93\u5165\u548c\u989c\u8272\u9009\u62e9\u5668\u3002\u60a8\u53ef\u4ee5\u5728 Mozilla Developer Network \u7f51\u7ad9\u4e0a\u9605\u8bfb\u6709\u5173\u5b83\u4eec\u7684\u4fe1\u606f\uff0c\u7f51\u5740\u4e3a http:\/\/mng.bz\/qOc1<\/a>\u3002<\/p>\nFor the remainder of section 18.2, you\u2019ll build the currency converter Razor templates from scratch, adding Tag Helpers as you find you need them. You\u2019ll probably find you use most of the common form Tag Helpers in every application you build, even if it\u2019s on a simple login page.
\n\u5728\u7b2c 18.2 \u8282\u7684\u5176\u4f59\u90e8\u5206\uff0c\u60a8\u5c06\u4ece\u5934\u5f00\u59cb\u6784\u5efa\u8d27\u5e01\u8f6c\u6362\u5668 Razor \u6a21\u677f\uff0c\u5e76\u6839\u636e\u9700\u8981\u6dfb\u52a0 Tag Helpers\u3002\u60a8\u53ef\u80fd\u4f1a\u53d1\u73b0\uff0c\u5728\u6784\u5efa\u7684\u6bcf\u4e2a\u5e94\u7528\u7a0b\u5e8f\u4e2d\u90fd\u4f7f\u7528\u4e86\u5927\u591a\u6570\u5e38\u89c1\u5f62\u5f0f\u7684 Tag Helpers\uff0c\u5373\u4f7f\u5b83\u4f4d\u4e8e\u7b80\u5355\u7684\u767b\u5f55\u9875\u9762\u4e0a\u3002<\/p>\n
18.2.1 The Form Tag Helper<\/h3>\n
18.2.1 Form \u6807\u8bb0\u5e2e\u52a9\u7a0b\u5e8f<\/p>\n
The first thing you need to start building your HTML form is, unsurprisingly, the <form><\/code> element. In listing 18.3 the <form><\/code> element was augmented with an asp-page Tag Helper attribute:
\n\u6beb\u65e0\u7591\u95ee\uff0c\u5f00\u59cb\u6784\u5efa HTML \u8868\u5355\u9700\u8981\u505a\u7684\u7b2c\u4e00\u4ef6\u4e8b\u662f<form><\/code>\u5143\u7d20\u3002\u5728\u6e05\u5355 18.3 \u4e2d\uff0c\u8be5<form><\/code>\u5143\u7d20\u88ab\u6269\u5145\u4e86\u4e00\u4e2a asp-page Tag Helper \u5c5e\u6027\uff1a<\/p>\n<form asp-page="Checkout"><\/code><\/pre>\nThe Tag Helper adds action and method attributes to the final HTML, indicating which URL the form should be sent to when it\u2019s submitted and the HTTP verb to use:
\n\u6807\u8bb0\u5e2e\u52a9\u7a0b\u5e8f\u5c06 action \u548c method \u5c5e\u6027\u6dfb\u52a0\u5230\u6700\u7ec8\u7684 HTML \u4e2d\uff0c\u6307\u793a\u8868\u5355\u5728\u63d0\u4ea4\u65f6\u5e94\u53d1\u9001\u5230\u54ea\u4e2a URL\uff0c\u4ee5\u53ca\u8981\u4f7f\u7528\u7684 HTTP \u52a8\u8bcd\uff1a<\/p>\n
<form action="\/Checkout" method="post"><\/code><\/pre>\nSetting the asp-page attribute allows you to specify a different Razor Page in your application that the form will be posted to when it\u2019s submitted. If you omit the asp-page attribute, the form will post back to the same URL it was served from. This is common with Razor Pages. You normally handle the result of a form post in the same Razor Page that is used to display it.
\n\u8bbe\u7f6e asp-page \u5c5e\u6027\u540e\uff0c\u53ef\u4ee5\u5728\u5e94\u7528\u7a0b\u5e8f\u4e2d\u6307\u5b9a\u4e0d\u540c\u7684 Razor \u9875\u9762\uff0c\u8868\u5355\u5728\u63d0\u4ea4\u65f6\u5c06\u53d1\u5e03\u5230\u8be5\u9875\u9762\u3002\u5982\u679c\u7701\u7565 asp-page \u5c5e\u6027\uff0c\u8868\u5355\u5c06\u56de\u53d1\u5230\u63d0\u4f9b\u5b83\u7684\u540c\u4e00 URL\u3002\u8fd9\u5728 Razor Pages \u4e2d\u5f88\u5e38\u89c1\u3002\u901a\u5e38\u5728\u7528\u4e8e\u663e\u793a\u8868\u5355\u5e16\u5b50\u7684\u540c\u4e00 Razor Page \u4e2d\u5904\u7406\u8868\u5355\u5e16\u5b50\u7684\u7ed3\u679c\u3002<\/p>\n
Warning<\/b> If you omit the asp-page attribute, you must add the method="post" attribute manually. It\u2019s important to add this attribute so the form is sent using the POST verb instead of the default GET verb. Using GET for forms can be a security risk.
\n\u8b66\u544a\uff1a\u5982\u679c\u7701\u7565 asp-page \u5c5e\u6027\uff0c\u5219\u5fc5\u987b\u624b\u52a8\u6dfb\u52a0 method=\u201cpost\u201d \u5c5e\u6027\u3002\u6dfb\u52a0\u6b64\u5c5e\u6027\u975e\u5e38\u91cd\u8981\uff0c\u4ee5\u4fbf\u4f7f\u7528 POST \u52a8\u8bcd\u800c\u4e0d\u662f\u9ed8\u8ba4\u7684 GET \u52a8\u8bcd\u53d1\u9001\u8868\u5355\u3002\u5bf9\u8868\u5355\u4f7f\u7528 GET \u53ef\u80fd\u4f1a\u5e26\u6765\u5b89\u5168\u98ce\u9669\u3002<\/p>\n
The asp-page attribute is added by a FormTagHelper. This Tag Helper uses the value provided to generate a URL for the action attribute, using the URL generation features of routing that I described in chapters 5 and 14.
\nasp-page \u5c5e\u6027\u7531 FormTagHelper \u6dfb\u52a0\u3002\u6b64 Tag Helper \u4f7f\u7528\u63d0\u4f9b\u7684\u503c\u4e3a action \u5c5e\u6027\u751f\u6210 URL\uff0c\u4f7f\u7528\u6211\u5728\u7b2c 5 \u7ae0\u548c\u7b2c 14 \u7ae0\u4e2d\u63cf\u8ff0\u7684\u8def\u7531\u7684 URL \u751f\u6210\u529f\u80fd\u3002<\/p>\n
NOTE<\/b> Tag Helpers can make multiple attributes available on an element. Think of them like properties on a Tag Helper configuration object. Adding a single asp- attribute activates the Tag Helper on the element. Adding more attributes lets you override further default values of its implementation.
\n\u6ce8\u610f\uff1a\u6807\u8bb0\u5e2e\u52a9\u7a0b\u5e8f\u53ef\u4ee5\u5728\u4e00\u4e2a\u5143\u7d20\u4e0a\u63d0\u4f9b\u591a\u4e2a\u5c5e\u6027\u3002\u5c06\u5b83\u4eec\u89c6\u4e3a Tag Helper \u914d\u7f6e\u5bf9\u8c61\u4e0a\u7684\u5c5e\u6027\u3002\u6dfb\u52a0\u5355\u4e2a asp- \u5c5e\u6027\u4f1a\u6fc0\u6d3b\u5143\u7d20\u4e0a\u7684 Tag Helper\u3002\u6dfb\u52a0\u66f4\u591a\u5c5e\u6027\u53ef\u8ba9\u60a8\u8986\u76d6\u5176\u5b9e\u73b0\u7684\u66f4\u591a\u9ed8\u8ba4\u503c\u3002<\/p>\n
The Form Tag Helper makes several other attributes available on the <form><\/code> element that you can use to customize the generated URL. I hope you\u2019ll remember that you can set route values when generating URLs. For example, if you have a Razor Page called Product.cshtml that uses the directive
\nForm Tag Helper \u5728 <form><\/code> \u5143\u7d20\u4e0a\u63d0\u4f9b\u4e86\u51e0\u4e2a\u5176\u4ed6\u5c5e\u6027\uff0c\u60a8\u53ef\u4ee5\u4f7f\u7528\u8fd9\u4e9b\u5c5e\u6027\u6765\u81ea\u5b9a\u4e49\u751f\u6210\u7684 URL\u3002\u6211\u5e0c\u671b\u60a8\u4f1a\u8bb0\u4f4f\uff0c\u60a8\u53ef\u4ee5\u5728\u751f\u6210 URL \u65f6\u8bbe\u7f6e\u8def\u7531\u503c\u3002\u4f8b\u5982\uff0c\u5982\u679c\u4f60\u6709\u4e00\u4e2a\u540d\u4e3a Product.cshtml \u7684 Razor \u9875\u9762\uff0c\u8be5\u9875\u9762\u4f7f\u7528\u6307\u4ee4<\/p>\n@page "{id}"<\/code><\/pre>\nthe full route template for the page would be "Product\/{id}". To generate the URL for this page correctly, you must provide the {id} route value. How can you set that value using the Form Tag Helper?
\n\u9875\u9762\u7684\u5b8c\u6574\u8def\u7531\u6a21\u677f\u5c06\u4e3a \u201cProduct\/{id}\u201d\u3002\u8981\u6b63\u786e\u751f\u6210\u6b64\u9875\u9762\u7684 URL\uff0c\u60a8\u5fc5\u987b\u63d0\u4f9b {id} \u8def\u7531\u503c\u3002\u5982\u4f55\u4f7f\u7528 Form Tag Helper \u8bbe\u7f6e\u8be5\u503c\uff1f<\/p>\n
The Form Tag Helper defines an asp-route- wildcard attribute that you can use to set arbitrary route parameters. Set the <\/em> in the attribute to the route parameter name. For example, to set the id route parameter, you\u2019d set the asp-route-id value. If the ProductId property of your PageModel contains the id value required, you could use:
\n\u8868\u5355\u6807\u8bb0\u5e2e\u52a9\u7a0b\u5e8f\u5b9a\u4e49\u53ef\u7528\u4e8e\u8bbe\u7f6e\u4efb\u610f\u8def\u7531\u53c2\u6570\u7684 asp-route- \u901a\u914d\u7b26\u5c5e\u6027\u3002\u5c06 in \u5c5e\u6027\u8bbe\u7f6e\u4e3a\u8def\u7531\u53c2\u6570\u540d\u79f0\u3002\u4f8b\u5982\uff0c\u8981\u8bbe\u7f6e id \u8def\u7531\u53c2\u6570\uff0c\u60a8\u9700\u8981\u8bbe\u7f6e asp-route-id \u503c\u3002\u5982\u679c PageModel \u7684 ProductId \u5c5e\u6027\u5305\u542b\u6240\u9700\u7684 id \u503c\uff0c\u5219\u53ef\u4ee5\u4f7f\u7528\uff1a<\/p>\n<form asp-page="Product" asp-route-id="@Model.ProductId"><\/code><\/pre>\nBased on the route template of the Product.cshtml Razor Page (and assuming ProductId=5 in this example), this would generate the following markup:
\n\u6839\u636e Product.cshtml Razor \u9875\u9762\u7684\u8def\u7531\u6a21\u677f\uff08\u5728\u6b64\u793a\u4f8b\u4e2d\u5047\u8bbe ProductId=5\uff09\uff0c\u8fd9\u5c06\u751f\u6210\u4ee5\u4e0b\u6807\u8bb0\uff1a<\/p>\n
<form action="\/Product\/5" method="post"><\/code><\/pre>\nYou can add as many asp-route-* attributes as necessary to your <form><\/code> to generate the correct action URL. You can also set the Razor Page handler to use the asp-page-handler attribute. This ensures that the form POST will be handled by the handler you specify.<\/p>\n\u60a8\u53ef\u4ee5\u6839\u636e\u9700\u8981\u5c06\u4efb\u610f\u6570\u91cf\u7684 asp-route-* \u5c5e\u6027\u6dfb\u52a0\u5230 <form><\/code> \u4ee5\u751f\u6210\u6b63\u786e\u7684\u4f5c URL\u3002\u60a8\u8fd8\u53ef\u4ee5\u5c06 Razor Page \u5904\u7406\u7a0b\u5e8f\u8bbe\u7f6e\u4e3a\u4f7f\u7528 asp-page-handler \u5c5e\u6027\u3002\u8fd9\u53ef\u786e\u4fdd\u8868\u5355 POST \u5c06\u7531\u60a8\u6307\u5b9a\u7684\u5904\u7406\u7a0b\u5e8f\u5904\u7406\u3002<\/p>\nNOTE<\/b> The Form Tag Helper has many additional attributes, such as asp-action and asp-controller, that you generally won\u2019t use with Razor Pages. Those are useful only if you\u2019re using MVC controllers with views. In particular, look out for the asp-route attribute\u2014this is not the same as the asp-route- attribute. The former is used to specify a named route (such as a named minimal API endpoint), and the latter is used to specify the route values to use during URL generation.
\n\u6ce8\u610f:\u8868\u5355\u6807\u8bb0\u5e2e\u52a9\u7a0b\u5e8f\u5177\u6709\u8bb8\u591a\u5176\u4ed6\u5c5e\u6027\uff0c\u4f8b\u5982 asp-action \u548c asp-controller\uff0c\u8fd9\u4e9b\u5c5e\u6027\u901a\u5e38\u4e0d\u4f1a\u4e0e Razor Pages \u4e00\u8d77\u4f7f\u7528\u3002\u4ec5\u5f53\u60a8\u5c06 MVC \u63a7\u5236\u5668\u4e0e\u89c6\u56fe\u4e00\u8d77\u4f7f\u7528\u65f6\uff0c\u8fd9\u4e9b\u624d\u6709\u7528\u3002\u7279\u522b\u662f\uff0c\u8bf7\u6ce8\u610f asp-route \u5c5e\u6027 \u2014 \u8fd9\u4e0e asp-route-<\/em> \u5c5e\u6027\u4e0d\u540c\u3002\u524d\u8005\u7528\u4e8e\u6307\u5b9a\u547d\u540d\u8def\u7531\uff08\u4f8b\u5982\u547d\u540d\u7684\u6700\u5c0f API \u7ec8\u7aef\u8282\u70b9\uff09\uff0c\u540e\u8005\u7528\u4e8e\u6307\u5b9a\u5728 URL \u751f\u6210\u671f\u95f4\u8981\u4f7f\u7528\u7684\u8def\u7531\u503c\u3002<\/p>\nThe main job of the Form Tag Helper is to generate the action attribute, but it performs one additional important function: generating a hidden <input><\/code> field needed to prevent cross-site request forgery (CSRF) attacks.
\nForm Tag Helper \u7684\u4e3b\u8981\u5de5\u4f5c\u662f\u751f\u6210 action \u5c5e\u6027\uff0c\u4f46\u5b83\u6267\u884c\u4e00\u9879\u989d\u5916\u7684\u91cd\u8981\u529f\u80fd\uff1a\u751f\u6210\u9632\u6b62\u8de8\u7ad9\u70b9\u8bf7\u6c42\u4f2a\u9020 \uff08CSRF\uff09 \u653b\u51fb\u6240\u9700\u7684\u9690\u85cf<input><\/code> \u5b57\u6bb5\u3002<\/p>\nDEFINITION<\/b> Cross-site request forgery (CSRF) attacks are a website exploit that can allow actions to be executed on your website by an unrelated malicious website. You\u2019ll learn about them in detail in chapter 29.
\n\u5b9a\u4e49:\u8de8\u7ad9\u70b9\u8bf7\u6c42\u4f2a\u9020 \uff08CSRF\uff09 \u653b\u51fb\u662f\u4e00\u79cd\u7f51\u7ad9\u6f0f\u6d1e\uff0c\u53ef\u4ee5\u5141\u8bb8\u4e0d\u76f8\u5173\u7684\u6076\u610f\u7f51\u7ad9\u5728\u60a8\u7684\u7f51\u7ad9\u4e0a\u6267\u884c\u4f5c\u3002\u60a8\u5c06\u5728\u7b2c 29 \u7ae0\u4e2d\u8be6\u7ec6\u4e86\u89e3\u5b83\u4eec\u3002<\/p>\n
You can see the generated hidden <input><\/code> at the bottom of the <form><\/code> in listing 18.4; it\u2019s named RequestVerificationToken and contains a seemingly random string of characters. This field won\u2019t protect you on its own, but I\u2019ll describe in chapter 29 how it\u2019s used to protect your website. The Form Tag Helper generates it by default, so you generally won\u2019t need to worry about it, but if you need to disable it, you can do so by adding asp-antiforgery="false" to your <form><\/code> element.
\n\u4f60\u53ef\u4ee5\u5728\u6e05\u5355 18.4 \u7684 <form><\/code> \u5e95\u90e8\u770b\u5230\u751f\u6210\u9690\u85cf<input><\/code> ;\u5b83\u88ab\u547d\u540d\u4e3a <\/strong>RequestVerificationToken \u5e76\u5305\u542b\u4e00\u4e2a\u770b\u4f3c\u968f\u673a\u7684\u5b57\u7b26\u4e32\u3002\u6b64\u5b57\u6bb5\u672c\u8eab\u4e0d\u4f1a\u4fdd\u62a4\u60a8\uff0c\u4f46\u6211\u5c06\u5728\u7b2c 29 \u7ae0\u4e2d\u4ecb\u7ecd\u5982\u4f55\u4f7f\u7528\u5b83\u6765\u4fdd\u62a4\u60a8\u7684\u7f51\u7ad9\u3002\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0cForm Tag Helper \u4f1a\u751f\u6210\u5b83\uff0c\u56e0\u6b64\u60a8\u901a\u5e38\u65e0\u9700\u62c5\u5fc3\u5b83\uff0c\u4f46\u5982\u679c\u60a8\u9700\u8981\u7981\u7528\u5b83\uff0c\u53ef\u4ee5\u901a\u8fc7\u5c06 asp-antiforgery=\u201cfalse\u201d \u6dfb\u52a0\u5230\u60a8\u7684<form><\/code> \u5143\u7d20\u6765\u5b9e\u73b0\u3002<\/p>\nThe Form Tag Helper is obviously useful for generating the action URL, but it\u2019s time to move on to more interesting elements\u2014those that you can see in your browser!
\n\u8868\u5355\u6807\u8bb0\u5e2e\u52a9\u7a0b\u5e8f\u663e\u7136\u53ef\u7528\u4e8e\u751f\u6210\u4f5c URL\uff0c\u4f46\u73b0\u5728\u662f\u65f6\u5019\u8f6c\u5411\u66f4\u6709\u8da3\u7684\u5143\u7d20\u4e86 \u2014 \u60a8\u53ef\u4ee5\u5728\u6d4f\u89c8\u5668\u4e2d\u770b\u5230\u7684\u5143\u7d20\uff01<\/p>\n
18.2.2 The Label Tag Helper<\/h3>\n
18.2.2 \u6807\u7b7e\u6807\u7b7e\u5e2e\u52a9\u7a0b\u5e8f<\/p>\n
Every <input><\/code> field in your currency converter application needs to have an associated label so the user knows what the <input><\/code> is for. You could easily create those yourself, manually typing the name of the field and setting the for attribute as appropriate, but luckily there\u2019s a Tag Helper to do that for you.
\n\u8d27\u5e01\u8f6c\u6362\u5668\u5e94\u7528\u7a0b\u5e8f\u4e2d\u7684\u6bcf\u4e2a <input><\/code> \u5b57\u6bb5\u90fd\u9700\u8981\u6709\u4e00\u4e2a\u5173\u8054\u7684\u6807\u7b7e\uff0c\u4ee5\u4fbf\u7528\u6237\u77e5\u9053 for what for what.\u60a8\u53ef\u4ee5\u8f7b\u677e\u5730\u81ea\u5df1\u521b\u5efa\u8fd9\u4e9b\u6807\u8bb0\uff0c\u624b\u52a8\u952e\u5165\u5b57\u6bb5\u7684\u540d\u79f0\u5e76\u6839\u636e\u9700\u8981\u8bbe\u7f6e <input><\/code> for \u5c5e\u6027\uff0c\u4f46\u5e78\u8fd0\u7684\u662f\uff0c\u6709\u4e00\u4e2a Tag Helper \u53ef\u4ee5\u4e3a\u60a8\u6267\u884c\u6b64\u4f5c\u3002<\/p>\nThe Label Tag Helper is used to generate the caption (the visible text) and the for attribute for a <label><\/code> element, based on the properties in the PageModel. It\u2019s used by providing the name of the property in the asp-for attribute:
\nLabel Tag Helper \u7528\u4e8e\u6839\u636e PageModel \u4e2d\u7684\u5c5e\u6027\u4e3a<label><\/code> \u5143\u7d20\u751f\u6210\u6807\u9898\uff08\u53ef\u89c1\u6587\u672c\uff09\u548c for \u5c5e\u6027\u3002\u901a\u8fc7\u5728 asp-for \u5c5e\u6027\u4e2d\u63d0\u4f9b\u5c5e\u6027\u7684\u540d\u79f0\u6765\u4f7f\u7528\u5b83\uff1a<\/p>\n<label asp-for="FirstName"><\/label><\/code><\/pre>\nThe Label Tag Helper uses the [Display] DataAnnotations attribute that you saw in chapter 16 to determine the appropriate value to display. If the property you\u2019re generating a label for doesn\u2019t have a [Display] attribute, the Label Tag Helper uses the name of the property instead. Consider this model in which the FirstName property has a [Display] attribute, but the Email property doesn\u2019t:
\nLabel Tag Helper \u4f7f\u7528\u60a8\u5728\u7b2c 16 \u7ae0\u4e2d\u770b\u5230\u7684 [Display] DataAnnotations \u5c5e\u6027\u6765\u786e\u5b9a\u8981\u663e\u793a\u7684\u9002\u5f53\u503c\u3002\u5982\u679c\u8981\u4e3a\u5176\u751f\u6210\u6807\u7b7e\u7684\u5c5e\u6027\u6ca1\u6709 [Display] \u5c5e\u6027\uff0c\u5219 Label Tag Helper \u4f1a\u6539\u7528\u8be5\u5c5e\u6027\u7684\u540d\u79f0\u3002\u8bf7\u8003\u8651\u4ee5\u4e0b\u6a21\u578b\uff1aFirstName \u5c5e\u6027\u5177\u6709 [Display] \u5c5e\u6027\uff0c\u4f46 Email \u5c5e\u6027\u6ca1\u6709\uff1a<\/p>\n
public class UserModel\n{\n [Display(Name = "Your name")]\n public string FirstName { get; set; }\n public string Email { get; set; }\n}<\/code><\/pre>\nThe following Razor
\n\u4ee5\u4e0b Razor<\/p>\n
<label asp-for="FirstName"><\/label>\n<label asp-for="Email"><\/label><\/code><\/pre>\nwould generate this HTML:
\n\u5c06\u751f\u6210\u6b64 HTML\uff1a<\/p>\n
<label for="FirstName">Your name<\/label>\n<label for="Email">Email<\/label><\/code><\/pre>\nThe inner text inside the <label><\/code> element uses the value set in the [Display] attribute, or the property name in the case of the Email property. Also note that the for attribute has been generated with the name of the property. This is a key bonus of using Tag Helpers; it hooks in with the element IDs generated by other Tag Helpers, as you\u2019ll see shortly.
\n<label><\/code> \u5143\u7d20\u5185\u90e8\u6587\u672c\u4f7f\u7528 [Display] \u5c5e\u6027\u4e2d\u8bbe\u7f6e\u7684\u503c\uff0c\u6216\u8005\u4f7f\u7528 Email \u5c5e\u6027\u7684\u5c5e\u6027\u540d\u79f0\u3002\u53e6\u8bf7\u6ce8\u610f\uff0c\u5df2\u4f7f\u7528\u5c5e\u6027\u540d\u79f0\u751f\u6210 for \u5c5e\u6027\u3002\u8fd9\u662f\u4f7f\u7528 Tag Helper \u7684\u4e00\u4e2a\u5173\u952e\u597d\u5904;\u5b83\u4e0e\u5176\u4ed6 Tag Helper \u751f\u6210\u7684\u5143\u7d20 ID \u6302\u94a9\uff0c\u60a8\u5f88\u5feb\u5c31\u4f1a\u770b\u5230\u3002<\/p>\nNOTE<\/b> The for attribute is important for accessibility. It specifies the ID of the element to which the label refers. This is important for users who are using a screen reader, for example, as they can tell what property a form field relates to.
\n\u6ce8\u610f\uff1afor \u5c5e\u6027\u5bf9\u4e8e\u8f85\u52a9\u529f\u80fd\u975e\u5e38\u91cd\u8981\u3002\u5b83\u6307\u5b9a\u6807\u7b7e\u6240\u5f15\u7528\u7684\u5143\u7d20\u7684 ID\u3002\u4f8b\u5982\uff0c\u8fd9\u5bf9\u4e8e\u4f7f\u7528\u5c4f\u5e55\u9605\u8bfb\u5668\u7684\u7528\u6237\u6765\u8bf4\u975e\u5e38\u91cd\u8981\uff0c\u56e0\u4e3a\u4ed6\u4eec\u53ef\u4ee5\u5224\u65ad\u8868\u5355\u5b57\u6bb5\u4e0e\u54ea\u4e2a\u5c5e\u6027\u76f8\u5173\u3002<\/p>\n
As well as properties on the PageModel, you can also reference sub-properties on child objects. For example, as I described in chapter 16, it\u2019s common to create a nested class in a Razor Page, expose that as a property, and decorate it with the [BindProperty] attribute:
\n\u9664\u4e86 PageModel \u4e0a\u7684\u5c5e\u6027\u5916\uff0c\u60a8\u8fd8\u53ef\u4ee5\u5f15\u7528\u5b50\u5bf9\u8c61\u4e0a\u7684\u5b50\u5c5e\u6027\u3002\u4f8b\u5982\uff0c\u6b63\u5982\u6211\u5728\u7b2c 16 \u7ae0\u4e2d\u6240\u63cf\u8ff0\u7684\uff0c\u5728 Razor Page \u4e2d\u521b\u5efa\u4e00\u4e2a\u5d4c\u5957\u7c7b\uff0c\u5c06\u5176\u4f5c\u4e3a\u5c5e\u6027\u516c\u5f00\uff0c\u5e76\u4f7f\u7528 [BindProperty] \u5c5e\u6027\u5bf9\u5176\u8fdb\u884c\u4fee\u9970\u662f\u5f88\u5e38\u89c1\u7684\uff1a<\/p>\n
public class CheckoutModel: PageModel\n{\n [BindProperty]\n public UserBindingModel Input { get; set; }\n}<\/code><\/pre>\nYou can reference the FirstName property of the UserBindingModel by \u201cdotting\u201d into the property as you would in any other C# code. Listing 18.3 shows more examples of this.
\n\u60a8\u53ef\u4ee5\u901a\u8fc7\u5728\u5c5e\u6027\u4e2d\u201c\u70b9\u201d\u6765\u5f15\u7528 UserBindingModel \u7684 FirstName \u5c5e\u6027\uff0c\u5c31\u50cf\u5728\u4efb\u4f55\u5176\u4ed6 C# \u4ee3\u7801\u4e2d\u4e00\u6837\u3002\u6e05\u5355 18.3 \u663e\u793a\u4e86\u66f4\u591a\u8fd9\u6837\u7684\u4f8b\u5b50\u3002<\/p>\n
<label asp-for="Input.FirstName"><\/label>\n<label asp-for="Input.Email"><\/label><\/code><\/pre>\nAs is typical with Tag Helpers, the Label Tag Helper won\u2019t override values that you set yourself. If, for example, you don\u2019t want to use the caption generated by the helper, you could insert your own manually. The code
\n\u4e0e\u6807\u7b7e\u5e2e\u52a9\u7a0b\u5e8f\u7684\u5178\u578b\u60c5\u51b5\u4e00\u6837\uff0c\u6807\u7b7e\u6807\u7b7e\u5e2e\u52a9\u7a0b\u5e8f\u4e0d\u4f1a\u8986\u76d6\u60a8\u81ea\u5df1\u8bbe\u7f6e\u7684\u503c\u3002\u4f8b\u5982\uff0c\u5982\u679c\u60a8\u4e0d\u60f3\u4f7f\u7528\u5e2e\u52a9\u7a0b\u5e8f\u751f\u6210\u7684\u6807\u9898\uff0c\u5219\u53ef\u4ee5\u624b\u52a8\u63d2\u5165\u81ea\u5df1\u7684\u6807\u9898\u3002\u4ee3\u7801\uff1a<\/p>\n
<label asp-for="Email">Please enter your Email<\/label><\/code><\/pre>\nwould generate this HTML:
\n\u5c06\u751f\u6210\u6b64 HTML\uff1a<\/p>\n
<label for="Email">Please enter your Email<\/label><\/code><\/pre>\nAs ever, you\u2019ll generally have an easier time with maintenance if you stick to the standard conventions and don\u2019t override values like this, but the option is there. Next up is a biggie: the Input and Textarea Tag Helpers.
\n\u4e0e\u5f80\u5e38\u4e00\u6837\uff0c\u5982\u679c\u60a8\u575a\u6301\u6807\u51c6\u7ea6\u5b9a\u5e76\u4e14\u4e0d\u8986\u76d6\u8fd9\u6837\u7684\u503c\uff0c\u60a8\u901a\u5e38\u4f1a\u66f4\u8f7b\u677e\u5730\u8fdb\u884c\u7ef4\u62a4\uff0c\u4f46\u9009\u9879\u5c31\u5728\u90a3\u91cc\u3002\u63a5\u4e0b\u6765\u662f\u4e00\u4e2a\u5927\u95ee\u9898\uff1aInput \u548c Textarea \u6807\u8bb0\u5e2e\u52a9\u7a0b\u5e8f\u3002<\/p>\n
18.2.3 The Input and Textarea Tag Helpers<\/h3>\n
18.2.3 input \u548c textarea \u6807\u8bb0\u5e2e\u52a9\u7a0b\u5e8f<\/p>\n
Now you\u2019re getting into the meat of your form: the <input><\/code> elements that handle user input. Given that there\u2019s such a wide array of possible input types, there\u2019s a variety of ways they can be displayed in the browser. For example, Boolean values are typically represented by a checkbox type <input><\/code> element, whereas integer values would use a number type <input><\/code> element, and a date would use the date type, as shown in figure 18.5.
\n\u73b0\u5728\uff0c\u4f60\u8fdb\u5165\u4e86\u8868\u5355\u7684\u6838\u5fc3\uff1a\u5904\u7406\u7528\u6237\u8f93\u5165\u7684 <input><\/code>\u5143\u7d20\u3002\u9274\u4e8e\u53ef\u80fd\u7684\u8f93\u5165\u7c7b\u578b\u5982\u6b64\u5e7f\u6cdb\uff0c\u5b83\u4eec\u5728\u6d4f\u89c8\u5668\u4e2d\u7684\u663e\u793a\u65b9\u5f0f\u591a\u79cd\u591a\u6837\u3002\u4f8b\u5982\uff0c\u5e03\u5c14\u503c\u901a\u5e38\u7531\u590d\u9009\u6846\u7c7b\u578b <input><\/code>\u5143\u7d20\u8868\u793a\uff0c\u800c\u6574\u6570\u503c\u5c06\u4f7f\u7528\u6570\u5b57\u7c7b\u578b <input><\/code>\u5143\u7d20\uff0c\u65e5\u671f\u5c06\u4f7f\u7528\u65e5\u671f\u7c7b\u578b\uff0c\u5982\u56fe 18.5 \u6240\u793a\u3002<\/p>\n![\"alt](\"\/images\/aspnetcoreinaction\/1805.png\")
<\/p>\n
Figure 18.5 Various input element types. The exact way in which each type is displayed varies by browser.
\n\u56fe 18.5 \u5404\u79cd\u8f93\u5165\u5143\u7d20\u7c7b\u578b\u3002\u6bcf\u79cd\u7c7b\u578b\u7684\u786e\u5207\u663e\u793a\u65b9\u5f0f\u56e0\u6d4f\u89c8\u5668\u800c\u5f02\u3002<\/p>\n
To handle this diversity, the Input Tag Helper is one of the most powerful Tag Helpers. It uses information based on both the type of the property (bool, string, int, and so on) and any DataAnnotations attributes applied to it ([EmailAddress] and [Phone], among others) to determine the type of the input element to generate. The DataAnnotations are also used to add data-val- client-side validation attributes to the generated HTML.
\n\u4e3a\u4e86\u5904\u7406\u8fd9\u79cd\u591a\u6837\u6027\uff0cInput Tag Helper \u662f\u6700\u5f3a\u5927\u7684 Tag Helper \u4e4b\u4e00\u3002\u5b83\u4f7f\u7528\u57fa\u4e8e\u5c5e\u6027\u7c7b\u578b\uff08bool\u3001string\u3001int \u7b49\uff09\u548c\u5e94\u7528\u4e8e\u5b83\u7684\u4efb\u4f55 DataAnnotations \u5c5e\u6027\uff08[EmailAddress] \u548c [Phone] \u7b49\uff09\u7684\u4fe1\u606f\u6765\u786e\u5b9a\u8981\u751f\u6210\u7684\u8f93\u5165\u5143\u7d20\u7684\u7c7b\u578b\u3002DataAnnotations \u8fd8\u7528\u4e8e\u5c06 data-val-<\/em> \u5ba2\u6237\u7aef\u9a8c\u8bc1\u5c5e\u6027\u6dfb\u52a0\u5230\u751f\u6210\u7684 HTML \u4e2d\u3002<\/p>\nConsider the Email property from listing 18.2 that was decorated with the [EmailAddress] attribute. Adding an <input><\/code> is as simple as using the asp-for attribute:
\n\u8bf7\u8003\u8651\u6e05\u5355 18.2 \u4e2d\u7684 Email \u5c5e\u6027\uff0c\u8be5\u5c5e\u6027\u4f7f\u7528 [EmailAddress] \u5c5e\u6027\u8fdb\u884c\u4fee\u9970\u3002\u6dfb\u52a0 <input><\/code>\u5c31\u50cf\u4f7f\u7528 asp-for \u5c5e\u6027\u4e00\u6837\u7b80\u5355\uff1a<\/p>\n<input asp-for="Input.Email" \/><\/code><\/pre>\nThe property is a string, so ordinarily the Input Tag Helper would generate an <input><\/code> with type="text". But the addition of the [EmailAddress] attribute provides additional metadata about the property. Consequently, the Tag Helper generates an HTML5 <input><\/code> with type="email":
\n\u8be5\u5c5e\u6027\u662f\u4e00\u4e2a\u5b57\u7b26\u4e32\uff0c\u56e0\u6b64\u901a\u5e38 Input Tag Helper \u4f1a\u751f\u6210\u4e00\u4e2a\u5e26\u6709 type=\u201ctext\u201d \u7684 <input><\/code> \u3002\u4f46\u662f\uff0c\u6dfb\u52a0 [EmailAddress] \u5c5e\u6027\u4f1a\u63d0\u4f9b\u6709\u5173\u5c5e\u6027\u7684\u5176\u4ed6\u5143\u6570\u636e\u3002\u56e0\u6b64\uff0c\u6807\u8bb0\u5e2e\u52a9\u7a0b\u5e8f\u4f1a\u751f\u6210\u4e00\u4e2a type=\u201cemail\u201d \u7684 HTML5 <input><\/code> \uff1a<\/p>\n<input type="email" id="Input_Email" name="Input.Email"\n value="test@example.com" data-val="true"\n data-val-email="The Email Address field is not a valid e-mail address."\n Data-val-required="The Email Address field is required."\n \/><\/code><\/pre>\nYou can take a whole host of things away from this example. First, the id and name attributes of the HTML element have been generated from the name of the property. The value of the id attribute matches the value generated by the Label Tag Helper in its for attribute, Input_Email. The value of the name attribute preserves the \u201cdot\u201d notation, Input.Email, so that model binding works correctly when the field is POSTed to the Razor Page.
\n\u60a8\u53ef\u4ee5\u4ece\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\u5b66\u5230\u5f88\u591a\u4e1c\u897f\u3002\u9996\u5148\uff0cHTML \u5143\u7d20\u7684 id \u548c name \u5c5e\u6027\u662f\u4ece\u5c5e\u6027\u7684\u540d\u79f0\u751f\u6210\u7684\u3002id \u5c5e\u6027\u7684\u503c\u4e0e Label Tag Helper \u5728\u5176 for \u5c5e\u6027 Input_Email \u4e2d\u751f\u6210\u7684\u503c\u5339\u914d\u3002Input.Email\uff0cname \u5c5e\u6027\u7684\u503c\u4fdd\u7559\u201c\u70b9\u201d\u8868\u793a\u6cd5\uff0c\u4ee5\u4fbf\u5728\u5c06\u5b57\u6bb5\u53d1\u5e03\u5230 Razor \u9875\u9762\u65f6\uff0c\u6a21\u578b\u7ed1\u5b9a\u6b63\u5e38\u5de5\u4f5c\u3002<\/p>\n
Also, the initial value of the field has been set to the value currently stored in the property ("test@example.com", in this case). The type of the element has also been set to the HTML5 email type, instead of using the default text type.
\n\u6b64\u5916\uff0c\u5b57\u6bb5\u7684\u521d\u59cb\u503c\u5df2\u8bbe\u7f6e\u4e3a\u5f53\u524d\u5b58\u50a8\u5728\u5c5e\u6027\u4e2d\u7684\u503c\uff08\u5728\u672c\u4f8b\u4e2d\u4e3a\u201ctest@example.com\u201d\uff09\u3002\u5143\u7d20\u7684\u7c7b\u578b\u4e5f\u5df2\u8bbe\u7f6e\u4e3a HTML5 \u7535\u5b50\u90ae\u4ef6\u7c7b\u578b\uff0c\u800c\u4e0d\u662f\u4f7f\u7528\u9ed8\u8ba4\u6587\u672c\u7c7b\u578b\u3002<\/p>\n
Perhaps the most striking addition is the swath of data-val- attributes. These can be used by client-side JavaScript libraries such as jQuery to provide client-side validation of your DataAnnotations constraints. Client-side validation provides instant feedback to users when the values they enter are invalid, providing a smoother user experience than can be achieved with server-side validation alone, as I described in chapter 16.
\n\u4e5f\u8bb8\u6700\u5f15\u4eba\u6ce8\u76ee\u7684\u65b0\u589e\u529f\u80fd\u662f\u5927\u91cf\u7684 data-val-<\/em> \u5c5e\u6027\u3002\u5ba2\u6237\u7aef JavaScript \u5e93\uff08\u5982 jQuery\uff09\u53ef\u4ee5\u4f7f\u7528\u8fd9\u4e9b\u7ea6\u675f\u6765\u63d0\u4f9b DataAnnotations \u7ea6\u675f\u7684\u5ba2\u6237\u7aef\u9a8c\u8bc1\u3002\u5ba2\u6237\u7aef\u9a8c\u8bc1\u4f1a\u5728\u7528\u6237\u8f93\u5165\u7684\u503c\u65e0\u6548\u65f6\u5411\u7528\u6237\u63d0\u4f9b\u5373\u65f6\u53cd\u9988\uff0c\u4ece\u800c\u63d0\u4f9b\u6bd4\u5355\u72ec\u4f7f\u7528\u670d\u52a1\u5668\u7aef\u9a8c\u8bc1\u66f4\u6d41\u7545\u7684\u7528\u6237\u4f53\u9a8c\uff0c\u5982\u6211\u5728\u7b2c 16 \u7ae0\u4e2d\u6240\u8ff0\u3002<\/p>\n\nClient-side validation
\n\u5ba2\u6237\u7aef\u9a8c\u8bc1<\/p>\n
To enable client-side validation in your application, you need to add some jQuery libraries to your HTML pages. In particular, you need to include the jQuery, jQuery-validation, and jQuery-validation-unobtrusive JavaScript libraries. You can do this in several ways, but the simplest is to include the script files at the bottom of your view using
\n\u8981\u5728\u5e94\u7528\u7a0b\u5e8f\u4e2d\u542f\u7528\u5ba2\u6237\u7aef\u9a8c\u8bc1\uff0c\u60a8\u9700\u8981\u5411 HTML \u9875\u9762\u6dfb\u52a0\u4e00\u4e9b jQuery \u5e93\u3002\u7279\u522b\u662f\uff0c\u60a8\u9700\u8981\u5305\u62ec jQuery\u3001jQuery-validation \u548c jQuery-validation-unobtrusive JavaScript \u5e93\u3002\u60a8\u53ef\u4ee5\u901a\u8fc7\u591a\u79cd\u65b9\u5f0f\u6267\u884c\u6b64\u4f5c\uff0c\u4f46\u6700\u7b80\u5355\u7684\u65b9\u6cd5\u662f\u4f7f\u7528<\/p>\n<\/blockquote>\n
<script src="~\/lib\/jquery-validation\/dist\/jquery.validate.min.js"><\/script>\n<script src="~\/lib\/jquery-validation-unobtrusive\/jquery.validate.unobtrusive.min.js"><\/script><\/code><\/pre>\n\nThe default templates include these scripts for you in a handy partial template that you can add to your page in a Scripts section. If you\u2019re using the default layout and need to add client-side validation to your view, add the following section somewhere on your view:
\n\u9ed8\u8ba4\u6a21\u677f\u5c06\u8fd9\u4e9b\u811a\u672c\u5305\u542b\u5728\u4e00\u4e2a\u65b9\u4fbf\u7684\u90e8\u5206\u6a21\u677f\u4e2d\uff0c\u60a8\u53ef\u4ee5\u5c06\u5176\u6dfb\u52a0\u5230\u9875\u9762\u7684 Scripts \u90e8\u5206\u3002\u5982\u679c\u60a8\u4f7f\u7528\u7684\u662f\u9ed8\u8ba4\u5e03\u5c40\uff0c\u5e76\u4e14\u9700\u8981\u5411\u89c6\u56fe\u6dfb\u52a0\u5ba2\u6237\u7aef\u9a8c\u8bc1\uff0c\u8bf7\u5728\u89c6\u56fe\u4e0a\u7684\u67d0\u4e2a\u4f4d\u7f6e\u6dfb\u52a0\u4ee5\u4e0b\u90e8\u5206\uff1a<\/p>\n<\/blockquote>\n
@section Scripts{\n @Html.Partial("_ValidationScriptsPartial")\n}<\/code><\/pre>\n\nThis partial view references files in your wwwroot folder. The default layout template includes jQuery itself. If you don\u2019t need to use jQuery in your application, you may want to consider a small alternative validation library called aspnet-client-validation. I describe why you might consider this library and how to use it in this blog post: http:\/\/mng.bz\/V1pX<\/a>.
\n\u6b64\u5206\u90e8\u89c6\u56fe\u5f15\u7528 wwwroot \u6587\u4ef6\u5939\u4e2d\u7684\u6587\u4ef6\u3002\u9ed8\u8ba4\u5e03\u5c40\u6a21\u677f\u5305\u62ec jQuery \u672c\u8eab\u3002\u5982\u679c\u60a8\u4e0d\u9700\u8981\u5728\u5e94\u7528\u7a0b\u5e8f\u4e2d\u4f7f\u7528 jQuery\uff0c\u5219\u53ef\u80fd\u9700\u8981\u8003\u8651\u4e00\u4e2a\u540d\u4e3a aspnet-client-validation \u7684\u5c0f\u578b\u66ff\u4ee3\u9a8c\u8bc1\u5e93\u3002\u6211\u5728\u8fd9\u7bc7\u535a\u6587\u4e2d\u63cf\u8ff0\u4e86\u4e3a\u4ec0\u4e48\u4f1a\u8003\u8651\u4f7f\u7528\u8fd9\u4e2a\u5e93\u4ee5\u53ca\u5982\u4f55\u4f7f\u7528\u5b83\uff1ahttp:\/\/mng.bz\/V1pX<\/a>\u3002<\/p>\nYou can also load these files, whether you\u2019re using jQuery or aspnet-client-validation, from a content delivery network (CDN). If you want to take this approach, you should consider scenarios where the CDN is unavailable or compromised, as I discuss in this blog post: http:\/\/mng.bz\/2e6d<\/a>.
\n\u60a8\u8fd8\u53ef\u4ee5\u4ece\u5185\u5bb9\u5206\u53d1\u7f51\u7edc \uff08CDN\uff09 \u52a0\u8f7d\u8fd9\u4e9b\u6587\u4ef6\uff0c\u65e0\u8bba\u60a8\u4f7f\u7528\u7684\u662f jQuery \u8fd8\u662f aspnet-client-validation\u3002\u5982\u679c\u60a8\u60f3\u91c7\u7528\u8fd9\u79cd\u65b9\u6cd5\uff0c\u60a8\u5e94\u8be5\u8003\u8651 CDN \u4e0d\u53ef\u7528\u6216\u53d7\u635f\u7684\u60c5\u51b5\uff0c\u6b63\u5982\u6211\u5728\u8fd9\u7bc7\u535a\u6587\u4e2d\u8ba8\u8bba\u7684\u90a3\u6837\uff1ahttp:\/\/mng.bz\/2e6d<\/a>\u3002<\/p>\n<\/blockquote>\nThe Input Tag Helper tries to pick the most appropriate template for a given property based on DataAnnotations attributes or the type of the property. Whether this generates the exact <input><\/code> type you need may depend, to an extent, on your application. As always, you can override the generated type by adding your own type attribute to the element in your Razor template. Table 18.1 shows how some of the common data types are mapped to <input><\/code> types and how the data types themselves can be specified.
\n\u8f93\u5165\u6807\u8bb0\u5e2e\u52a9\u7a0b\u5e8f\u5c1d\u8bd5\u6839\u636e DataAnnotations \u5c5e\u6027\u6216\u5c5e\u6027\u7c7b\u578b\u4e3a\u7ed9\u5b9a\u5c5e\u6027\u9009\u62e9\u6700\u5408\u9002\u7684\u6a21\u677f\u3002\u8fd9\u662f\u5426\u751f\u6210\u60a8\u9700\u8981\u7684\u786e\u5207\u7c7b\u578b\u53ef\u80fd\u5728\u4e00\u5b9a\u7a0b\u5ea6\u4e0a\u53d6\u51b3\u4e8e\u60a8\u7684\u5e94\u7528\u7a0b\u5e8f\u3002\u4e0e\u5f80\u5e38\u4e00\u6837\uff0c\u60a8\u53ef\u4ee5\u901a\u8fc7\u5c06\u81ea\u5df1\u7684 type \u5c5e\u6027\u6dfb\u52a0\u5230 Razor \u6a21\u677f\u4e2d\u7684 <input><\/code> \u5143\u7d20\u6765\u66ff\u4ee3\u751f\u6210\u7684\u7c7b\u578b\u3002Table 18.1 \u663e\u793a\u4e86\u5982\u4f55\u5c06\u4e00\u4e9b\u5e38\u89c1\u6570\u636e\u7c7b\u578b\u6620\u5c04\u5230\u7c7b\u578b\u4ee5\u53ca\u5982\u4f55\u6307\u5b9a\u6570\u636e\u7c7b\u578b\u672c\u8eab\u3002<\/p>\nTable 18.1 Common data types, how to specify them, and the input element type they map to
\n\u8868 18.1 \u5e38\u89c1\u6570\u636e\u7c7b\u578b\u3001\u5982\u4f55\u6307\u5b9a\u5b83\u4eec\u4ee5\u53ca\u5b83\u4eec\u6620\u5c04\u5230\u7684\u8f93\u5165\u5143\u7d20\u7c7b\u578b<\/p>\n
\n\n\nData type<\/th>\n How it\u2019s specified<\/th>\n Input element type<\/th>\n<\/tr>\n<\/thead>\n \n\nbyte, int, short, long, uint<\/td>\n Property type<\/td>\n number<\/td>\n<\/tr>\n \ndecimal, double, float<\/td>\n Property type<\/td>\n text<\/td>\n<\/tr>\n \nbool<\/td>\n Property type<\/td>\n checkbox<\/td>\n<\/tr>\n \nstring<\/td>\n Property type, [DataType(DataType.Text)] attribute<\/td>\n text<\/td>\n<\/tr>\n \nHiddenInput<\/td>\n [HiddenInput] attribute<\/td>\n hidden<\/td>\n<\/tr>\n \nPassword<\/td>\n [Password] attribute<\/td>\n password<\/td>\n<\/tr>\n \nPhone<\/td>\n [Phone] attribute<\/td>\n tel<\/td>\n<\/tr>\n \nEmailAddress<\/td>\n [EmailAddress] attribute<\/td>\n email<\/td>\n<\/tr>\n \nUrl<\/td>\n [Url] attribute<\/td>\n url<\/td>\n<\/tr>\n \nDate<\/td>\n DateTime property type, [DataType(DataType.Date)] attribute<\/td>\n datetime-local<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\nThe Input Tag Helper has one additional attribute that can be used to customize the way data is displayed: asp-format. HTML forms are entirely string-based, so when the value of an <input><\/code> is set, the Input Tag Helper must take the value stored in the property and convert it to a string. Under the covers, this performs a string.Format() on the property\u2019s value, passing in the format string.
\nInput Tag Helper \u5177\u6709\u4e00\u4e2a\u53ef\u7528\u4e8e\u81ea\u5b9a\u4e49\u6570\u636e\u663e\u793a\u65b9\u5f0f\u7684\u9644\u52a0\u5c5e\u6027\uff1aasp-format\u3002HTML \u8868\u5355\u5b8c\u5168\u57fa\u4e8e\u5b57\u7b26\u4e32\uff0c\u56e0\u6b64\u5728\u8bbe\u7f6e <input><\/code> \u7684\u503c\u65f6\uff0cInput Tag Helper \u5fc5\u987b\u83b7\u53d6\u5b58\u50a8\u5728\u5c5e\u6027\u4e2d\u7684\u503c\u5e76\u5c06\u5176\u8f6c\u6362\u4e3a\u5b57\u7b26\u4e32\u3002\u5728\u540e\u53f0\uff0c\u8fd9\u5c06\u6267\u884c\u4e00\u4e2a\u5b57\u7b26\u4e32\u3002Format\uff08\uff09 \u5bf9\u5c5e\u6027\u7684\u503c\u6267\u884c\uff0c\u5e76\u4f20\u5165\u683c\u5f0f\u5b57\u7b26\u4e32\u3002<\/p>\nThe Input Tag Helper uses a default format string for each different data type, but with the asp-format attribute, you can set the specific format string to use. For example, you could ensure that a decimal property, Dec, is formatted to three decimal places with the following code:
\nInput Tag Helper \u5bf9\u6bcf\u79cd\u4e0d\u540c\u7684\u6570\u636e\u7c7b\u578b\u4f7f\u7528\u9ed8\u8ba4\u683c\u5f0f\u5b57\u7b26\u4e32\uff0c\u4f46\u4f7f\u7528 asp-format \u5c5e\u6027\uff0c\u60a8\u53ef\u4ee5\u8bbe\u7f6e\u8981\u4f7f\u7528\u7684\u7279\u5b9a\u683c\u5f0f\u5b57\u7b26\u4e32\u3002\u4f8b\u5982\uff0c\u60a8\u53ef\u4ee5\u4f7f\u7528\u4ee5\u4e0b\u4ee3\u7801\u786e\u4fdd\u5c06 decimal \u5c5e\u6027 Dec \u7684\u683c\u5f0f\u8bbe\u7f6e\u4e3a\u4e09\u4f4d\u5c0f\u6570\uff1a<\/p>\n
<input asp-for="Dec" asp-format="{0:0.000}" \/><\/code><\/pre>\nIf the Dec property had a value of 1.2, this would generate HTML similar to
\n\u5982\u679c Dec \u5c5e\u6027\u7684\u503c\u4e3a 1.2\uff0c\u5219\u751f\u6210\u7c7b\u4f3c\u4e8e<\/p>\n
<input type="text" id="Dec" name="Dec" value="1.200"><\/code><\/pre>\nAlternatively, you can define the format to use by adding the [DisplayFormat] attribute to the model property:
\n\u6216\u8005\uff0c\u60a8\u53ef\u4ee5\u901a\u8fc7\u5c06 [DisplayFormat] \u5c5e\u6027\u6dfb\u52a0\u5230 model \u5c5e\u6027\u6765\u5b9a\u4e49\u8981\u4f7f\u7528\u7684\u683c\u5f0f\uff1a<\/p>\n
[DisplayFormat("{0:0.000}")]\npublic decimal Dec { get; set; }<\/code><\/pre>\nNOTE<\/b> You may be surprised that decimal and double types are rendered as text fields and not as number fields. This is due to several technical reasons, predominantly related to the way different cultures render decimal points and number group separators. Rendering as text avoids errors that would appear only in certain browser-culture combinations.
\n\u6ce8\u610f\u60a8\u53ef\u80fd\u4f1a\u60ca\u8bb6\u5730\u53d1\u73b0\uff0cdecimal \u548c double \u7c7b\u578b\u5448\u73b0\u4e3a\u6587\u672c\u5b57\u6bb5\uff0c\u800c\u4e0d\u662f\u6570\u5b57\u5b57\u6bb5\u3002\u8fd9\u662f\u7531\u4e8e\u51e0\u4e2a\u6280\u672f\u539f\u56e0\uff0c\u4e3b\u8981\u4e0e\u4e0d\u540c\u533a\u57df\u6027\u5448\u73b0\u5c0f\u6570\u70b9\u548c\u6570\u5b57\u7ec4\u5206\u9694\u7b26\u7684\u65b9\u5f0f\u6709\u5173\u3002\u5448\u73b0\u4e3a\u6587\u672c\u53ef\u907f\u514d\u4ec5\u5728\u67d0\u4e9b\u6d4f\u89c8\u5668\u533a\u57df\u6027\u7ec4\u5408\u4e2d\u51fa\u73b0\u7684\u9519\u8bef\u3002<\/p>\n
In addition to the Input Tag Helper, ASP.NET Core provides the Textarea Tag Helper. This works in a similar way, using the asp-for attribute, but it\u2019s attached to a <textarea><\/code> element instead:
\n\u9664\u4e86 Input Tag Helper \u4e4b\u5916\uff0cASP.NET Core \u8fd8\u63d0\u4f9b Textarea Tag Helper\u3002\u8fd9\u4ee5\u7c7b\u4f3c\u7684\u65b9\u5f0f\u5de5\u4f5c\uff0c\u4f7f\u7528 asp-for \u5c5e\u6027\uff0c\u4f46\u5b83\u88ab\u9644\u52a0\u5230\u4e00\u4e2a<textarea><\/code> \u5143\u7d20\u4e0a\uff1a<\/p>\n<textarea asp-for="BigtextValue"><\/textarea><\/code><\/pre>\nThis generates HTML similar to the following. Note that the property value is rendered inside the element, and data-val- validation elements are attached as usual:
\n\u8fd9\u5c06\u751f\u6210\u7c7b\u4f3c\u4e8e\u4ee5\u4e0b\u5185\u5bb9\u7684 HTML\u3002\u8bf7\u6ce8\u610f\uff0cproperty value \u5728\u5143\u7d20\u5185\u90e8\u5448\u73b0\uff0c\u5e76\u4e14 data-val-<\/em> \u9a8c\u8bc1\u5143\u7d20\u50cf\u5f80\u5e38\u4e00\u6837\u9644\u52a0\uff1a<\/p>\n<textarea data-val="true" id="BigtextValue" name="BigtextValue"\n data-val-length="Maximum length 200." data-val-length-max="200"\n data-val-required="The Multiline field is required." >This is some text,\nI'm going to display it\nin a text area<\/textarea><\/code><\/pre>\nI hope that this section has hammered home how much typing Tag Helpers can cut down on, especially when using them in conjunction with DataAnnotations for generating validation attributes. But this is more than reducing the number of keystrokes required; Tag Helpers ensure that the markup generated is correct and has the correct name, id, and format to automatically bind your binding models when they\u2019re sent to the server.
\n\u6211\u5e0c\u671b\u672c\u8282\u5df2\u7ecf\u9610\u660e\u4e86 Tag Helpers \u53ef\u4ee5\u51cf\u5c11\u591a\u5c11\u952e\u5165\u5de5\u4f5c\uff0c\u5c24\u5176\u662f\u5728\u5c06\u5b83\u4eec\u4e0e DataAnnotations \u7ed3\u5408\u4f7f\u7528\u4ee5\u751f\u6210\u9a8c\u8bc1\u5c5e\u6027\u65f6\u3002\u4f46\u8fd9\u4e0d\u4ec5\u4ec5\u662f\u51cf\u5c11\u6240\u9700\u7684\u51fb\u952e\u6b21\u6570;\u6807\u8bb0\u5e2e\u52a9\u7a0b\u5e8f\u786e\u4fdd\u751f\u6210\u7684\u6807\u8bb0\u6b63\u786e\u65e0\u8bef\uff0c\u5e76\u4e14\u5177\u6709\u6b63\u786e\u7684\u540d\u79f0\u3001ID \u548c\u683c\u5f0f\uff0c\u4ee5\u4fbf\u5728\u5c06\u7ed1\u5b9a\u6a21\u578b\u53d1\u9001\u5230\u670d\u52a1\u5668\u65f6\u81ea\u52a8\u7ed1\u5b9a\u7ed1\u5b9a\u6a21\u578b\u3002<\/p>\n
With <form><\/code>, <label><\/code>, and <input><\/code> under your belt, you\u2019re able to build most of your currency converter forms. Before we look at displaying validation messages, there\u2019s one more element to look at: the <select><\/code>, or drop-down, input.
\n\u4f7f\u7528 <form><\/code>, <label><\/code>\u548c <input><\/code> \uff0c\u60a8\u53ef\u4ee5\u6784\u5efa\u5927\u591a\u6570\u8d27\u5e01\u8f6c\u6362\u5668\u8868\u5355\u3002\u5728\u6211\u4eec\u67e5\u770b\u663e\u793a\u9a8c\u8bc1\u6d88\u606f\u4e4b\u524d\uff0c\u8fd8\u6709\u4e00\u4e2a\u5143\u7d20\u9700\u8981\u67e5\u770b\uff1a<select><\/code>\u6216\u4e0b\u62c9\u5217\u8868,\u8f93\u5165\u3002<\/p>\n18.2.4 The Select Tag Helper<\/h3>\n
As well as <input><\/code> fields, a common element you\u2019ll see on web forms is the <select><\/code> element, or drop-down lists and list boxes. Your currency converter application, for example, could use a <select><\/code> element to let you pick which currency to convert from a list.
\n\u9664\u4e86<input><\/code> \u5b57\u6bb5\u4e4b\u5916\uff0c\u60a8\u5c06\u5728 Web \u8868\u5355\u4e0a\u770b\u5230\u7684\u4e00\u4e2a\u5e38\u89c1\u5143\u7d20\u662f <select><\/code>\u5143\u7d20\uff0c\u5373\u4e0b\u62c9\u5217\u8868\u548c\u5217\u8868\u6846\u3002\u4f8b\u5982\uff0c\u60a8\u7684\u8d27\u5e01\u8f6c\u6362\u5668\u5e94\u7528\u7a0b\u5e8f\u53ef\u4ee5\u4f7f\u7528\u4e00\u4e2a <select><\/code>\u5143\u7d20\u8ba9\u60a8\u4ece\u5217\u8868\u4e2d\u9009\u62e9\u8981\u8f6c\u6362\u7684\u8d27\u5e01\u3002<\/p>\nBy default, this element shows a list of items and lets you select one, but there are several variations, as shown in figure 18.6. As well as the normal drop-down list, you could show a list box, add multiselection, or display your list items in groups.
\n\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u6b64\u5143\u7d20\u663e\u793a\u4e00\u4e2a\u9879\u76ee\u5217\u8868\u5e76\u5141\u8bb8\u60a8\u9009\u62e9\u4e00\u4e2a\uff0c\u4f46\u6709\u51e0\u79cd\u53d8\u4f53\uff0c\u5982\u56fe 18.6 \u6240\u793a\u3002\u9664\u4e86\u5e38\u89c4\u4e0b\u62c9\u5217\u8868\u5916\uff0c\u60a8\u8fd8\u53ef\u4ee5\u663e\u793a\u5217\u8868\u6846\u3001\u6dfb\u52a0\u591a\u9009\u6216\u6210\u7ec4\u663e\u793a\u5217\u8868\u9879\u3002<\/p>\n
![\"alt](\"\/images\/aspnetcoreinaction\/1806.png\")
<\/p>\n
Figure 18.6 Some of the many ways to display <select><\/code> elements using the Select Tag Helper.
\n\u56fe 18.6 \u4f7f\u7528 Select Tag Helper \u663e\u793a<select><\/code>\u5143\u7d20\u7684\u591a\u79cd\u65b9\u6cd5\u4e2d\u7684\u4e00\u4e9b\u3002<\/p>\nTo use <select><\/code> elements in your Razor code, you\u2019ll need to include two properties in your PageModel: one property for the list of options to display and one to hold the value (or values) selected. For example, listing 18.5 shows the properties on the PageModel used to create the three leftmost select lists shown in figure 18.6. Displaying groups requires a slightly different setup, as you\u2019ll see shortly.
\n\u8981\u5728 Razor \u4ee3\u7801\u4e2d\u4f7f\u7528<select><\/code> \u5143\u7d20\uff0c\u60a8\u9700\u8981\u5728 PageModel \u4e2d\u5305\u542b\u4e24\u4e2a\u5c5e\u6027\uff1a\u4e00\u4e2a\u5c5e\u6027\u7528\u4e8e\u663e\u793a\u9009\u9879\u5217\u8868\uff0c\u53e6\u4e00\u4e2a\u5c5e\u6027\u7528\u4e8e\u4fdd\u5b58\u6240\u9009\u503c\u3002\u4f8b\u5982\uff0c\u6e05\u5355 18.5 \u663e\u793a\u4e86\u7528\u4e8e\u521b\u5efa\u56fe 18.6 \u4e2d\u6240\u793a\u7684\u4e09\u4e2a\u6700\u5de6\u4fa7\u9009\u62e9\u5217\u8868\u7684 PageModel \u4e0a\u7684\u5c5e\u6027\u3002\u663e\u793a\u7ec4\u9700\u8981\u7684\u8bbe\u7f6e\u7565\u6709\u4e0d\u540c\uff0c\u60a8\u5f88\u5feb\u5c31\u4f1a\u770b\u5230\u3002<\/p>\nListing 18.5 View model for displaying select element drop-down lists and list boxes<\/p>\n
public class SelectListsModel: PageModel\n{\n [BindProperty] #A\n public class InputModel Input { get; set; } #A\n\n public IEnumerable<SelectListItem> Items { get; set; } #B\n = new List<SelectListItem> #B\n { #B\n new SelectListItem{Value = "csharp", Text="C#"}, #B\n new SelectListItem{Value = "python", Text= "Python"}, #B\n new SelectListItem{Value = "cpp", Text="C++"}, #B\n new SelectListItem{Value = "java", Text="Java"}, #B\n new SelectListItem{Value = "js", Text="JavaScript"}, #B\n new SelectListItem{Value = "ruby", Text="Ruby"}, #B\n }; #B\n\n public class InputModel\n {\n public string SelectedValue1 { get; set; } #C\n public string SelectedValue2 { get; set; } #C\n public IEnumerable<string> MultiValues { get; set; } #D\n }\n}<\/code><\/pre>\n\u2776 The InputModel for binding the user\u2019s selections to the select boxes
\n\u7528\u4e8e\u5c06\u7528\u6237\u7684\u9009\u62e9\u7ed1\u5b9a\u5230\u9009\u62e9\u6846\u7684 InputModel
\n\u2777 The list of items to display in the select boxes
\n\u8981\u5728\u9009\u62e9\u6846\u4e2d\u663e\u793a\u7684\u9879\u76ee\u5217\u8868
\n\u2778 These properties will hold the values selected by the single-selection select boxes.
\n\u8fd9\u4e9b\u5c5e\u6027\u5c06\u4fdd\u5b58\u7531\u5355\u9009\u9009\u62e9\u6846\u9009\u62e9\u7684\u503c\u3002
\n\u2779 To create a multiselect list box, use an IEnumerable<><\/code>.
\n\u82e5\u8981\u521b\u5efa\u591a\u9009\u5217\u8868\u6846\uff0c\u8bf7\u4f7f\u7528 IEnumerable<><\/code>\u3002<\/p>\nThis listing demonstrates several aspects of working with <select><\/code> lists:
\n\u6b64\u6e05\u5355\u6f14\u793a\u4e86\u4f7f\u7528<select><\/code>\u5217\u8868\u7684\u51e0\u4e2a\u65b9\u9762\uff1a<\/p>\n\u2022 SelectedValue1\/SelectedValue2\u2014Used to hold the value selected by the user. They\u2019re model-bound to the value selected from the drop-down list\/list box and used to preselect the correct item when rendering the form.
\nSelectedValue1\/SelectedValue2 - \u7528\u4e8e\u4fdd\u5b58\u7528\u6237\u9009\u62e9\u7684\u503c\u3002\u5b83\u4eec\u88ab\u6a21\u578b\u7ed1\u5b9a\u5230\u4ece\u4e0b\u62c9\u5217\u8868\/\u5217\u8868\u6846\u4e2d\u9009\u62e9\u7684\u503c\uff0c\u5e76\u7528\u4e8e\u5728\u5448\u73b0\u8868\u5355\u65f6\u9884\u5148\u9009\u62e9\u6b63\u786e\u7684\u9879\u76ee\u3002<\/p>\n
\u2022 MultiValues\u2014Used to hold the selected values for a multiselect list. It\u2019s an IEnumerable, so it can hold more than one selection per <select><\/code> element.
\nMultiValues - \u7528\u4e8e\u4fdd\u5b58\u591a\u9009\u5217\u8868\u7684\u9009\u5b9a\u503c\u3002\u5b83\u662f\u4e00\u4e2a IEnumerable\uff0c\u56e0\u6b64\u6bcf\u4e2a <select><\/code> \u5143\u7d20\u53ef\u4ee5\u4fdd\u5b58\u591a\u4e2a\u9009\u62e9\u3002<\/p>\n\u2022 Items\u2014Provides the list of options to display in the <select><\/code> elements. Note that the element type must be SelectListItem, which exposes the Value and Text properties, to work with the Select Tag Helper. This isn\u2019t part of the InputModel, as we don\u2019t want to model-bind these items to the request; they would normally be loaded directly from the application model or hardcoded. The order of the values in the Items property controls the order of items in the <select><\/code> list.
\nItems - \u63d0\u4f9b\u8981\u5728<select><\/code> \u5143\u7d20\u4e2d\u663e\u793a\u7684\u9009\u9879\u5217\u8868\u3002\u8bf7\u6ce8\u610f\uff0c\u5143\u7d20\u7c7b\u578b\u5fc5\u987b\u662f SelectListItem\uff0c\u5b83\u516c\u5f00 Value \u548c Text \u5c5e\u6027\uff0c\u624d\u80fd\u4f7f\u7528 Select \u6807\u8bb0\u5e2e\u52a9\u7a0b\u5e8f\u3002\u8fd9\u4e0d\u662f InputModel \u7684\u4e00\u90e8\u5206\uff0c\u56e0\u4e3a\u6211\u4eec\u4e0d\u60f3\u5c06\u8fd9\u4e9b\u9879\u6a21\u578b\u7ed1\u5b9a\u5230\u8bf7\u6c42;\u5b83\u4eec\u901a\u5e38\u76f4\u63a5\u4ece\u5e94\u7528\u7a0b\u5e8f\u6a21\u578b\u52a0\u8f7d\u6216\u786c\u7f16\u7801\u3002Items \u5c5e\u6027\u4e2d\u503c\u7684\u987a\u5e8f\u63a7\u5236\u5217\u8868\u4e2d\u9879\u7684\u987a\u5e8f\u3002<\/p>\nNOTE<\/b> The Select Tag Helper works only with SelectListItem elements. That means you\u2019ll normally have to convert from an application-specific list set of items (for example, a List<string><\/code> or List<MyClass><\/code>) to the UI-centric List<SelectListItem><\/code>.
\n\u6ce8\u610f\uff1aSelect Tag Helper \u4ec5\u9002\u7528\u4e8e SelectListItem \u5143\u7d20\u3002\u8fd9\u610f\u5473\u7740\u60a8\u901a\u5e38\u5fc5\u987b\u4ece\u7279\u5b9a\u4e8e\u5e94\u7528\u7a0b\u5e8f\u7684\u5217\u8868\u9879\u96c6\uff08\u4f8b\u5982\uff0ca List<string><\/code>\u6216 List<MyClass><\/code>\uff09\u8f6c\u6362\u4e3a\u4ee5 UI \u4e3a\u4e2d\u5fc3\u7684 List<SelectListItem><\/code>\u3002<\/p>\nThe Select Tag Helper exposes the asp-for and asp-items attributes that you can add to <select><\/code> elements. As for the Input Tag Helper, the asp-for attribute specifies the property in your PageModel to bind to. The asp-items attribute provides the IEnumerable<SelectListItem><\/code> to display the available <option><\/code> elements.
\nSelect \u6807\u8bb0\u5e2e\u52a9\u7a0b\u5e8f\u516c\u5f00\u53ef\u6dfb\u52a0\u5230<select><\/code>\u5143\u7d20\u7684 asp-for \u548c asp-items \u5c5e\u6027\u3002\u5bf9\u4e8e Input Tag Helper\uff0casp-for \u5c5e\u6027\u6307\u5b9a\u8981\u7ed1\u5b9a\u5230\u7684 PageModel \u4e2d\u7684\u5c5e\u6027\u3002asp-items \u5c5e\u6027\u63d0\u4f9b \u4ee5IEnumerable<SelectListItem><\/code> \u663e\u793a\u53ef\u7528 <option><\/code> \u5143\u7d20\u3002<\/p>\nTip<\/b> It\u2019s common to want to display a list of enum options in a <select><\/code> list. This is so common that ASP.NET Core ships with a helper for generating a SelectListItem for any enum. If you have an enum of the TEnum type, you can generate the available options in your view using asp-items="Html.GetEnumSelectList<TEnum>()" <\/code>.
\n\u63d0\u793a\uff1a\u5e0c\u671b\u5728\u5217\u8868\u4e2d\u663e\u793a\u679a\u4e3e\u9009\u9879 <select><\/code>\u5217\u8868\u662f\u5f88\u5e38\u89c1\u7684\u3002\u8fd9\u79cd\u60c5\u51b5\u975e\u5e38\u5e38\u89c1\uff0c\u56e0\u6b64 ASP.NET Core \u9644\u5e26\u4e86\u4e00\u4e2a\u5e2e\u52a9\u7a0b\u5e8f\uff0c\u7528\u4e8e\u4e3a\u4efb\u4f55\u679a\u4e3e\u751f\u6210 SelectListItem\u3002\u5982\u679c\u60a8\u6709 TEnum \u7c7b\u578b\u7684\u679a\u4e3e\uff0c\u5219\u53ef\u4ee5\u4f7f\u7528 asp-items="Html.GetEnumSelectList<TEnum>()" <\/code>\u5728\u89c6\u56fe\u4e2d\u751f\u6210\u53ef\u7528\u9009\u9879\u3002<\/p>\nThe following listing shows how to display a drop-down list, a single-selection list box, and a multiselection list box. It uses the PageModel from the previous listing, binding each <select><\/code> list value to a different property but reusing the same Items list for all of them.
\n\u4e0b\u9762\u7684\u6e05\u5355\u663e\u793a\u4e86\u5982\u4f55\u663e\u793a\u4e0b\u62c9\u5217\u8868\u3001\u5355\u9009\u5217\u8868\u6846\u548c\u591a\u9009\u5217\u8868\u6846\u3002\u5b83\u4f7f\u7528\u4e0a\u4e00\u4e2a\u6e05\u5355\u4e2d\u7684 PageModel\uff0c\u5c06\u6bcf\u4e2a<select><\/code> \u5217\u8868\u503c\u7ed1\u5b9a\u5230\u4e0d\u540c\u7684\u5c5e\u6027\uff0c\u4f46\u5bf9\u6240\u6709\u5217\u8868\u91cd\u7528\u76f8\u540c\u7684 Items \u5217\u8868\u3002<\/p>\nListing 18.6 Razor template to display a select element in three ways
\n\u6e05\u5355 18.6 \u4ee5\u4e09\u79cd\u65b9\u5f0f\u663e\u793a select \u5143\u7d20\u7684 Razor \u6a21\u677f<\/p>\n
@page\n@model SelectListsModel\n<select asp-for="Input.SelectedValue1" #A\n asp-items="Model.Items"><\/select> #A\n<select asp-for="Input.SelectedValue2" #B\n asp-items="Model.Items" size="4"><\/select> #B\n<select asp-for="Input.MultiValues" #C\n asp-items="Model.Items"><\/select> #C<\/code><\/pre>\n\u2776 Creates a standard drop-down select list by binding to a standard property in asp-for
\n\u901a\u8fc7\u7ed1\u5b9a\u5230 asp-for\u4e2d\u7684\u6807\u51c6\u5c5e\u6027\u521b\u5efa\u6807\u51c6\u4e0b\u62c9\u5217\u8868
\n\u2777 Creates a single-select list box of height 4 by providing the standard HTML size attribute
\n\u901a\u8fc7\u63d0\u4f9b\u6807\u51c6 HTML \u5927\u5c0f\u5c5e\u6027\u521b\u5efa\u9ad8\u5ea6\u4e3a 4 \u7684\u5355\u9009\u5217\u8868\u6846
\n\u2778 Creates a multiselect list box by binding to an IEnumerable property in asp-for
\n\u901a\u8fc7\u7ed1\u5b9a\u5230 asp-for \u4e2d\u7684 IEnumerable \u5c5e\u6027\u521b\u5efa\u591a\u9009\u5217\u8868\u6846<\/p>\n
I hope you can see that the Razor for generating a drop-down <select><\/code> list is almost identical to the Razor for generating a multiselect <select><\/code> list. The Select Tag Helper takes care of adding the multiple HTML attribute to the generated output if the property it\u2019s binding to is an IEnumerable.
\n\u6211\u5e0c\u671b\u4f60\u80fd\u770b\u5230\uff0c\u7528\u4e8e\u751f\u6210\u4e0b\u62c9<select><\/code>\u5217\u8868\u7684 Razor \u4e0e\u7528\u4e8e\u751f\u6210\u591a\u9009<select><\/code>\u5217\u8868\u7684 Razor \u51e0\u4e4e\u76f8\u540c\u3002Tag Helper \u8d1f\u8d23\u5c06 multiple HTML \u5c5e\u6027\u6dfb\u52a0\u5230\u751f\u6210\u7684\u8f93\u51fa\u4e2d\uff08\u5982\u679c\u5b83\u7ed1\u5b9a\u5230\u7684\u5c5e\u6027\u662f IEnumerable\uff09\u3002<\/p>\n