ابزار Theme Builder هم برای تولید theme وجود داره . به صورت default هم چند تم در source پروژه هست. همچنین در بخش Extension هم themeها مربوط به Metro رو میشه دانلود کرد .
نظرات اشتراکها
> npm install --save redux react-redux > npm install --save-dev @types/react-redux
> npm install --save bootstrap
import "bootstrap/dist/css/bootstrap.css";
import React, { Component } from "react"; class Counter extends Component { render() { return ( <section className="card mt-5"> <div className="card-body text-center"> <span className="badge m-2 badge-primary">0</span> </div> <div className="card-footer"> <div className="d-flex justify-content-center align-items-center"> <button className="btn btn-secondary btn-sm">+</button> <button className="btn btn-secondary btn-sm m-2">-</button> <button className="btn btn-danger btn-sm">Reset</button> </div> </div> </section> ); } } export default Counter;
import "./App.css"; import React from "react"; import Counter from "./components/counter"; function App() { return ( <main className="container"> <Counter /> </main> ); } export default App;
export const Increment = "Increment";
{ type: "ADD", payload: { amount // = amount: amount }, meta: {} }
import * as types from "../constants/ActionTypes"; export const incrementValue = () => ({ type: types.Increment });
import * as types from "../constants/ActionTypes"; const initialState = { count: 0 }; export default function counterReducer(state = initialState, action) { if (action.type === types.Increment) { return { count: state.count + 1 }; } return state; }
import { combineReducers } from "redux"; import counterReducer from "./counter"; const rootReducer = combineReducers({ counterReducer }); export default rootReducer;
import { createStore } from "redux"; import reducer from "./reducers"; //... const store = createStore( reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() ); //...
import { Provider } from "react-redux"; import { createStore } from "redux"; import reducer from "./reducers"; // ... const store = createStore( reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() ); ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById("root") );
import { connect } from "react-redux"; import { incrementValue } from "../actions"; import Counter from "../components/counter"; const mapStateToProps = state => { return state; }; const mapDispatchToProps = dispatch => { return { increment() { dispatch(incrementValue()); } }; }; export default connect(mapStateToProps, mapDispatchToProps)(Counter);
const mapStateToProps = (state) => { return state };
export default connect(mapStateToProps, mapDispatchToProps)(Counter);
import "./App.css"; import React from "react"; import CounterContainer from "./containers/Counter"; function App() { return ( <main className="container"> <CounterContainer /> </main> ); } export default App;
import React, { Component } from "react"; class Counter extends Component { render() { console.log("props", this.props); const { counterReducer: { count }, increment } = this.props; return ( <section className="card mt-5"> <div className="card-body text-center"> <span className="badge m-2 badge-primary">{count}</span> </div> <div className="card-footer"> <div className="d-flex justify-content-center align-items-center"> <button className="btn btn-secondary btn-sm" onClick={increment}> + </button> <button className="btn btn-secondary btn-sm m-2">-</button> <button className="btn btn-danger btn-sm">Reset</button> </div> </div> </section> ); } } export default Counter;
const { counterReducer: { count }, increment } = this.props;
function App() { const prop1 = 123 return ( <main className="container"> <CounterContainer prop1={prop1} /> </main> ); }
const mapStateToProps = (state, ownProps) => { console.log("mapStateToProps", { state, ownProps }); return state; };
export const Decrement = "Decrement";
export const decrementValue = () => ({ type: types.Decrement });
export default function counterReducer(state = initialState, action) { // ... if (action.type === types.Decrement) { return { count: state.count - 1 }; } return state; }
import { decrementValue, incrementValue } from "../actions"; // ... const mapDispatchToProps = dispatch => { return { // ... decrement() { dispatch(decrementValue()); } }; };
const { // ... decrement } = this.props;
<button className="btn btn-secondary btn-sm m-2" onClick={decrement} > - </button>
const mapDispatchToProps = dispatch => { return { increment() { dispatch(incrementValue()); }, decrement() { dispatch(decrementValue()); } }; };
import { bindActionCreators } from "redux"; // ... const mapDispatchToProps = dispatch => { return bindActionCreators( { incrementValue, decrementValue }, dispatch ); };
const { counterReducer: { count }, incrementValue, decrementValue } = this.props;
const mapDispatchToProps = { incrementValue, decrementValue };
const mapStateToProps = state => { //return state; return { count: state.counterReducer.count }; };
const { //counterReducer: { count }, count, incrementValue, decrementValue } = this.props;
<input type="text" ng-model="newItemTitle"> <button type="button" ng-click="add()">افزودن</button> <ul> <li ng-repeat="item in items">{{item.title}}</li> </ul> <div ng-show="showMSG()">شما بیش از ۱۰ استان ثبت کرده اید</div>
$scope.newItemTitle=''; $scope.add=function(){ $scope.items.push({ title:$scope.newItemTitle }); } $scope.items=[ {title:'اردبیل'}, {title:'تهران'}, {title:'اصفهان'}, {title:'شیراز'}, {title:'مشهد'}, ]; $scope.showMSG=function(){ return $scope.items.length>10; }
ng-show="showMSG()" ng-if="showMSG()" ng-hide="showMSG()==false" ng-class="{'red',getResult()}" ng-style="{'width':getWidth()}"
<div ng-show="items.length>10">شما بیش از ۱۰ استان ثبت کرده اید</div>
$scope.maxItem=false'; $scope.add=function(){ $scope.items.push({ title:$scope.newItemTitle }); $scope.maxItem=$scope.items.length>10; }
<div ng-show="maxItem">شما بیش از ۱۰ استان ثبت کرده اید</div>
public class Post { public int Id { set; get; } public string Title { set; get; } public string Body { set; get; } }
static Document MapPostToDocument(Post post) { var postDocument = new Document(); postDocument.Add(new Field("Id", post.Id.ToString(), Field.Store.YES, Field.Index.NOT_ANALYZED)); postDocument.Add(new Field("Title", post.Title, Field.Store.YES, Field.Index.ANALYZED, Field.TermVector.WITH_POSITIONS_OFFSETS)); postDocument.Add(new Field("Body", post.Body, Field.Store.YES, Field.Index.ANALYZED, Field.TermVector.WITH_POSITIONS_OFFSETS)); return postDocument; }
public static string RemoveHtmlTags(string text) { return string.IsNullOrEmpty(text) ? string.Empty : Regex.Replace(text, @"<(.|\n)*?>", string.Empty); }
static readonly Lucene.Net.Util.Version _version = Lucene.Net.Util.Version.LUCENE_29; public static void CreateIdx(IEnumerable<Post> dataList) { var directory = FSDirectory.Open(new DirectoryInfo(Environment.CurrentDirectory + "\\LuceneIndex")); var analyzer = new StandardAnalyzer(_version); using (var writer = new IndexWriter(directory, analyzer, create: true, mfl: IndexWriter.MaxFieldLength.UNLIMITED)) { foreach (var post in dataList) { writer.AddDocument(MapPostToDocument(post)); } writer.Optimize(); writer.Commit(); writer.Close(); directory.Close(); } }
public static void UpdateIndex(Post post) { var directory = FSDirectory.Open(new DirectoryInfo(Environment.CurrentDirectory + "\\LuceneIndex")); var analyzer = new StandardAnalyzer(_version); using (var indexWriter = new IndexWriter(directory, analyzer, create: false, mfl: IndexWriter.MaxFieldLength.UNLIMITED)) { var newDoc = MapPostToDocument(post); indexWriter.UpdateDocument(new Term("Id", post.Id.ToString()), newDoc); indexWriter.Commit(); indexWriter.Close(); directory.Close(); } } public static void DeleteIndex(Post post) { var directory = FSDirectory.Open(new DirectoryInfo(Environment.CurrentDirectory + "\\LuceneIndex")); var analyzer = new StandardAnalyzer(_version); using (var indexWriter = new IndexWriter(directory, analyzer, create: false, mfl: IndexWriter.MaxFieldLength.UNLIMITED)) { indexWriter.DeleteDocuments(new Term("Id", post.Id.ToString())); indexWriter.Commit(); indexWriter.Close(); directory.Close(); } } public static void AddIndex(Post post) { var directory = FSDirectory.Open(new DirectoryInfo(Environment.CurrentDirectory + "\\LuceneIndex")); var analyzer = new StandardAnalyzer(_version, getStopWords()); using (var indexWriter = new IndexWriter(directory, analyzer, create: false, mfl: IndexWriter.MaxFieldLength.UNLIMITED)) { var searchQuery = new TermQuery(new Term("Id", post.Id.ToString())); indexWriter.DeleteDocuments(searchQuery); var newDoc = MapPostToDocument(post); indexWriter.AddDocument(newDoc); indexWriter.Commit(); indexWriter.Close(); directory.Close(); } }
public static void Query(string term) { var directory = FSDirectory.Open(new DirectoryInfo(Environment.CurrentDirectory + "\\LuceneIndex")); using (var searcher = new IndexSearcher(directory, readOnly: true)) { var analyzer = new StandardAnalyzer(_version); var parser = new MultiFieldQueryParser(_version, new[] { "Body", "Title" }, analyzer); var query = parseQuery(term, parser); var hits = searcher.Search(query, 10).ScoreDocs; if (hits.Length == 0) { term = searchByPartialWords(term); query = parseQuery(term, parser); hits = searcher.Search(query, 10).ScoreDocs; } FastVectorHighlighter fvHighlighter = new FastVectorHighlighter(true, true); foreach (var scoreDoc in hits) { var doc = searcher.Doc(scoreDoc.doc); string bestfragment = fvHighlighter.GetBestFragment( fvHighlighter.GetFieldQuery(query), searcher.GetIndexReader(), docId: scoreDoc.doc, fieldName: "Body", fragCharSize: 400); var id = doc.Get("Id"); var title = doc.Get("Title"); var score = scoreDoc.score; Console.WriteLine(bestfragment); } searcher.Close(); directory.Close(); } } private static Query parseQuery(string searchQuery, QueryParser parser) { Query query; try { query = parser.Parse(searchQuery.Trim()); } catch (ParseException) { query = parser.Parse(QueryParser.Escape(searchQuery.Trim())); } return query; } private static string searchByPartialWords(string bodyTerm) { bodyTerm = bodyTerm.Replace("*", "").Replace("?", ""); var terms = bodyTerm.Trim().Replace("-", " ").Split(' ') .Where(x => !string.IsNullOrEmpty(x)) .Select(x => x.Trim() + "*"); bodyTerm = string.Join(" ", terms); return bodyTerm; }
<table id="std-grid"> <thead> <th>نام</th> <th>نام خانوادگی</th> <th>سن</th> </thead> <tbody> </tbody> </table>
<script> $(document).ready(function() { $('#std-grid').dataTable({ "aaData": [ ["پژمان", "پارسائی", "24"], ["سعید", "الیاسی", "25"], ["محمد رضا", "گلزار", "20"], ["آرش", "ایرانی", "19"], ["مرتضی", "فرمانی", "22"], ["سعید", "حمیدیان", "23"], ["امین", "پارسانیا", "23"], ["محمد امین", "فقیهی", "24"], ["محمد", "خرمی", "25"], ["سینا", "امیریان", "20"], ["آرش", "ایرانی", "19"], ["وحید", "فرزانه", "22"], ["امیر علی", "فرمانی", "23"], ["امین", "حسینی", "23"], }); }); </script>
$(document).ready(function() { $('#std-grid').dataTable({ "aaData": [ {"FirstName" : "پژمان", "LastName" : "پارسائی", "Age" : "24"}, { "FirstName": "سعید", "LastName": "الیاسی", "Age": "25" }, { "FirstName": "محمد رضا", "LastName": "گلزار", "Age": "24" }, { "FirstName": "آرش", "LastName": "ایرانی", "Age": "24" }, { "FirstName": "مرتضی", "LastName": "فرمانی", "Age": "24" }, { "FirstName": "سعید", "LastName": "حمیدیان", "Age": "24" }, { "FirstName": "امین", "LastName": "پارسانیا", "Age": "24" }, { "FirstName": "محمد امین", "LastName": "فقیهی", "Age": "24" }, { "FirstName": "محمد", "LastName": "خرمی", "Age": "24" }, { "FirstName": "سینا", "LastName": "امیریان", "Age": "24" }, { "FirstName": "آرش", "LastName": "ایرانی", "Age": "24" }, { "FirstName": "وحید", "LastName": "فرزانه", "Age": "24" }, { "FirstName": "امیر علی", "LastName": "فرمانی", "Age": "24" }, { "FirstName": "امین", "LastName": "حسینی", "Age": "24" }, ], "aoColumns": [ { "mDataProp": "FirstName" }, { "mDataProp": "LastName" }, { "mDataProp": "Age" } ] }); });
$('#std-grid').dataTable({ "bPaginate": false, "bLengthChange": false, "bFilter": false, "bSort": false, "bInfo": true, "bAutoWidth": false });
{ "name": "asp.net", "private": true, "dependencies": { "bootstrap": "3.3.6", "jquery": "2.2.0", "jquery-validation": "1.14.0", "jquery-validation-unobtrusive": "3.2.6" } }
<script src="~/bower_components/jquery/dist/jquery.min.js"></script> <script src="~/bower_components/jquery-validation/dist/jquery.validate.min.js"></script> <script src="~/bower_components/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script> @RenderSection("scripts", required: false) </body> </html>
// Serve wwwroot as root app.UseFileServer(); // Serve /bower_components as a separate root app.UseFileServer(new FileServerOptions { // Set root of file server FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "bower_components")), // Only react to requests that match this path RequestPath = "/bower_components", // Don't expose file system EnableDirectoryBrowsing = false });
<environment name="Development"> <script src="~/bower_components/jquery/dist/jquery.min.js"></script> <script src="~/bower_components/jquery-validation/dist/jquery.validate.min.js"></script> <script src="~/bower_components/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script> </environment>
<environment names="Staging, Production"> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js" asp-fallback-src="/bower_components/jquery/dist/jquery.min.js" asp-fallback-test="window.jQuery"> </script> <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js" asp-fallback-src="bower_components/jquery-validation/dist/jquery.validate.min.js" asp-fallback-test="window.jQuery && window.jQuery.validator"> </script> <script src="https://ajax.aspnetcdn.com/ajax/mvc/5.2.3/jquery.validate.unobtrusive.min.js" asp-fallback-src="/bower_components/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js" asp-fallback-test="window.jQuery && window.jQuery.validator && window.jQuery.validator.unobtrusive"> </script> </environment>
@Html.ValidationSummary(false)
<div asp-validation-summary="All"></div>
@Html.ValidationSummary(true)
<div asp-validation-summary="ModelOnly"></div>
@Html.ValidationMessageFor(m => m.UserName, "", new { @class = "text-danger" })
<span asp-validation-for="UserName" class="text-danger"></span>
در صورتی که به علت کیفیت پایین اینترنت، هر بار بیلد کردن پروژه عملا به بن بست میرسد و حتی با چند دقیقه صبر کردن هم تمام نمیشود، میتوانید از منوی Tools در ویژوال استدیو، به Options رفته و سپس از قسمت Nuget Package Manager، تیک گزینه Automatically check for missing packages during build in Visual Studio رو بردارید.