MVC4 jquery style topic usage (case study)

MVC4 already comes with jquery, a newly created Project. Basically, it can run without adding anything and run the project. (It integrates so many things, jquery, modernizr, built-in default permissions, and generated templates. However, there is no uniform document or anything to introduce integrated things, step 1: [project]-[manage NuGet packages] Click Update input jquery ui and then update the jquery ui plug-in to the latest version. Step 2: in the project, [view]-[Shared]-[_ Layout. cshtml] the common interface can be referenced to facilitate future modification. @ Scripts. render ("~ /Bundles/jquery ") @ * jquery reference * @ Scripts. Render ("~ /Bundles/jqueryui ") @ * jquery ui reference * @ Scripts. Render ("~ /Bundles/jqueryZh "); @ * jquery Chinese conversion class * @ <link href = "~ /Content/themes/css/redmond/jquery-ui-1.10.3.custom.css "rel =" stylesheet "/> @ * jquerui style theme * @ Styles. render is used to reference the project-[App_Start]-[BundleConfig. the reference path defined in cs] is as follows. add (new ScriptBundle ("~ /Bundles/jquery "). Include ("~ /Scripts/jquery-{version}. js "); bundles. Add (new ScriptBundle ("~ /Bundles/jqueryui "). Include ("~ /Scripts/jquery-ui-{version}. js "); bundles. Add (new ScriptBundle ("~ /Bundles/jqueryval "). Include ("~ /Scripts/jquery. unobtrusive *","~ /Scripts/jquery. validate * "); // bundles. Add (new ScriptBundle ("~ /Bundles/jqueryZh "). Include ("~ /Content/themes/base/i18n/jquery. ui. datepicker-zh-CN.js "); bundles. Add (new ScriptBundle ("~ /Bundles/jquerythemes "). Include ("~ /Content/themes/css/redmond/jquery-ui-1.10.3.custom.css "); // use the development version of Modernizr for development and understanding information. Then, when you are ready for production, use the build tool on the http://modernizr.com to select only the tests you need. Bundles. Add (new ScriptBundle ("~ /Bundles/modernizr "). Include ("~ /Scripts/modernizr-* "); bundles. Add (new StyleBundle ("~ /Content/css "). Include ("~ /Content/site.css "); bundles. Add (new StyleBundle ("~ /Content/themes/base/css "). Include ("~ /Content/themes/base/jquery-ui.css ","~ /Content/themes/base/jquery.ui.core.css ","~ /Content/themes/base/jquery.ui.resizable.css ","~ /Content/themes/base/jquery.ui.selectable.css ","~ /Content/themes/base/jquery.ui.accordion.css ","~ /Content/themes/base/jquery.ui.autocomplete.css ","~ /Content/themes/base/jquery.ui.button.css ","~ /Content/themes/base/jquery.ui.dialog.css ","~ /Content/themes/base/jquery.ui.slider.css ","~ /Content/themes/base/jquery.ui.tabs.css ","~ /Content/themes/base/jquery.ui.datepicker.css ","~ /Content/themes/base/jquery.ui.progressbar.css ","~ /Content/themes/base/jquery.ui.theme.css ");} the advantage of this operation is that it can be similar to packaging and referencing multiple styles and scripts, which can improve the performance. for more information about Bundling, visit the http://go.microsoft.com/fwlink? LinkId = 254725 Step 3: interface call JS setting method is very simple $ ("ID of the control to be called "). datepicker (); As shown in <script >$ (function () {$ ("# dateReceiptTenders_T "). datepicker () ;}); </script> Interface Control <div class = "editor-label"> @ Html. labelFor (model => model. dateReceiptTenders_T) </div> <div class = "editor-field"> @ Html. editorFor (model => model. dateReceiptTenders_T) @ Html. validationMessageFor (model => model. dateReceiptTenders_T) </div> and then run the project. note: The second reason is that some theme styles need to be officially downloaded. With the help of the official English, E is not very good, And the basics are not solid. enter www.jqueryui.com and you will see "Widgets" on the left side. The widget is displayed below, we want to use the date control, so click the "Datepicker" date selector and the following is the case. Click view source (view source Code) the simplest way is to copy the code, and then create a new document to put the code in, and change it to the extension .html to see the effect of the same theme usage as the official one: click the tab "themes" Click gallery on the left select your favorite style and download to local copy jquery-ui-1.10.3.custom \ css \ redmond \ jquery-ui-1.10.3.custom.css to the project and reference <link href = "~ /Content/themes/css/redmond/jquery-ui-1.10.3.custom.css "rel =" stylesheet "/> @ * jquerui style theme * @ to see other effects instructions for use, in the downloaded topic package, the root directory contains index.html. You can click here to see the usage and help documentation, and then translate it slowly.