<a class="decreaseFont" href="#">decreaseFont</a>
UI-Router ابزاری برای مسیریابی در AngularJS است که این امکان را برایتان فراهم می‌کند تا بخش‌های برنامه رابط کاربریتان را به شکل یک ماشین حالت ساماندهی کنید. برخلاف سرویس route$ که بر اساس مسیریابی URLها ساماندهی شده و کار می‌کند، UI-Router بر اساس حالت‌ها کار می‌کند، که این حالت‌ها می‌توانند در صورت لزوم مسیریابی هم داشته باشند.
<!doctype html>
<html ng-app="myApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<script src="js/angular-ui-router.min.js"></script>
<script>
var myApp = angular.module('myApp', ['ui.router']);
// For Component users, it should look like this:
// var myApp = angular.module('myApp', [require('angular-ui-router')]);
</script>
...
</head>
<body>
...
</body>
</html> <!-- index.html -->
<body>
<div ui-view></div>
<!-- We'll also add some navigation: -->
<a ui-sref="state1">State 1</a>
<a ui-sref="state2">State 2</a>
</body> <!-- partials/state1.html --> <h1>State 1</h1> <hr/> <a ui-sref="state1.list">Show List</a> <div ui-view></div>
<!-- partials/state2.html --> <h1>State 2</h1> <hr /> <a ui-sref="state2.list">Show List</a> <div ui-view></div>
<!-- partials/state1.list.html -->
<h3>List of State 1 Items</h3>
<ul>
<li ng-repeat="item in items">{{ item }}</li>
</ul> <!-- partials/state2.list.html -->
<h3>List of State 2 Things</h3>
<ul>
<li ng-repeat="thing in things">{{ thing }}</li>
</ul> myApp.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
//
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/state1");
//
// Now set up the states
$stateProvider
.state('state1', {
url: "/state1",
templateUrl: "partials/state1.html"
})
.state('state1.list', {
url: "/list",
templateUrl: "partials/state1.list.html",
controller: function($scope) {
$scope.items = ["A", "List", "Of", "Items"];
}
})
.state('state2', {
url: "/state2",
templateUrl: "partials/state2.html"
})
.state('state2.list', {
url: "/list",
templateUrl: "partials/state2.list.html",
controller: function($scope) {
$scope.things = ["A", "Set", "Of", "Things"];
}
})
}]); .state('state1', {
url: "/state1/:id",
templateUrl: "partials/state1.html"
}) $stateParams.id
.state('list', {
parent: "state1",
url: "/list",
templateUrl: "partials/state1.list.html",
controller: function($scope) {
$scope.items = ["A", "List", "Of", "Items"];
}
})
.state('list', {
parent: "state2",
url: "/list",
templateUrl: "partials/state2.list.html",
controller: function($scope) {
$scope.items = ["A", "List", "Of", "Items"];
}
}) .state('state1', {
url: "/state1",
templateUrl: "partials/state1.html",
data:{
foodata: 'addorder'
}
}) $state.current.data.foodata
<!-- index.html -->
<body>
<div ui-view="viewA"></div>
<div ui-view="viewB"></div>
<!-- Also a way to navigate -->
<a ui-sref="route1">Route 1</a>
<a ui-sref="route2">Route 2</a>
</body> myApp.config(function ($stateProvider) {
$stateProvider
.state('index', {
url: "",
views: {
"viewA": { template: "index.viewA" },
"viewB": { template: "index.viewB" }
}
})
.state('route1', {
url: "/route1",
views: {
"viewA": { template: "route1.viewA" },
"viewB": { template: "route1.viewB" }
}
})
.state('route2', {
url: "/route2",
views: {
"viewA": { template: "route2.viewA" },
"viewB": { template: "route2.viewB" }
}
})
}); چند نکته
.state('list', {
parent: "state1",
url: "/list",
templateUrl: "partials/state1.list.html",
controller: "state1ListController as listCtrl1"
}
})
.state('list', {
parent: "state2",
url: "/list",
templateUrl: "partials/state2.list.html",
controller: "state2ListController as listCtrl2"
}
}) حالت‌های انتزاعی
حساسیت به حروف بزرگ و کوچک
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UpdatePanelTest.aspx.cs"
Inherits="TestJQueryAjax.UpdatePanelTest" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="sm" runat="server">
<Scripts>
<asp:ScriptReference Path="~/js/jquery.js" />
<asp:ScriptReference Path="~/js/jquery.colorize-1.6.0.js" />
</Scripts>
</asp:ScriptManager>
<asp:UpdatePanel ID="uppnl" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" AllowPaging="True"
OnPageIndexChanging="GridView1_PageIndexChanging">
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</form>
<script type="text/javascript">
$(document).ready(function() {
$('#<%=GridView1.ClientID %>').colorize();
});
</script>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace TestJQueryAjax
{
public partial class UpdatePanelTest : System.Web.UI.Page
{
void BindTo()
{
List<string> rows = new List<string>();
for (int i = 0; i < 1000; i++)
rows.Add(string.Format("row{0}", i));
GridView1.DataSource = rows;
GridView1.DataBind();
}
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
BindTo();
}
}
protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
GridView1.PageIndex = e.NewPageIndex;
BindTo();
}
}
}
<script type="text/javascript">
$(document).ready(function() {
$('#<%=GridView1.ClientID %>').colorize();
});
function pageLoad(sender, args) {
if (args.get_isPartialLoad()) {
$('#<%=GridView1.ClientID %>').colorize();
}
}
</script>
{
"name": "testwebapp",
"version": "1.0.0",
"description": "",
"scripts": {},
"author": "",
"license": "ISC",
"dependencies": {
"bootstrap": "^3.3.7",
"jquery": "^2.2.4",
"jquery-ajax-unobtrusive": "^3.2.4",
"jquery-validation": "^1.17.0",
"jquery-validation-unobtrusive": "^3.2.8"
}
} [
{
"outputFileName": "wwwroot/css/site.min.css",
"inputFiles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"wwwroot/css/site.css"
]
},
{
"outputFileName": "wwwroot/js/site.min.js",
"inputFiles": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/jquery-validation/dist/jquery.validate.min.js",
"node_modules/jquery-validation-unobtrusive/dist/jquery.validate.unobtrusive.min.js",
"node_modules/jquery-ajax-unobtrusive/jquery.unobtrusive-ajax.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"wwwroot/js/site.js"
],
"minify": {
"enabled": true,
"renameLocals": true
},
"sourceMap": false
}
] <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - DNTCommon.Web.Core.TestWebApp</title>
<link href="~/css/site.min.css" rel="stylesheet" asp-append-version="true" />
</head>
<body>
<div>
@RenderBody()
</div>
<script src="~/js/site.min.js" type="text/javascript" asp-append-version="true"></script>
@RenderSection("Scripts", required: false)
</body>
</html> <Project Sdk="Microsoft.NET.Sdk.Web">
<Target Name="PrecompileScript" BeforeTargets="BeforeBuild">
<Exec Command="dotnet bundle" />
</Target>
<ItemGroup>
<DotNetCliToolReference Include="BundlerMinifier.Core" Version="2.6.362" />
</ItemGroup>
</Project> 
اگر از MudBlazor استفاده میکنید، افزونه‌های CodeBeam.MudExtensions کارآیی کامپوننت‌های Mudblazor را بالا می‌برند.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<link href="~/Content/Site.css" rel="stylesheet" />
<link href="~/Content/themes/default/style.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery.min.js"></script>
<script src="~/Scripts/jstree.min.js"></script>
</head>
<body dir="rtl">
@RenderBody()
@RenderSection("scripts", required: false)
</body>
</html> right_to_left = $("body").css("direction") === "rtl"; using System.Collections.Generic;
namespace MvcJSTree.Models
{
public class JsTreeNode
{
public string id { set; get; } // نام این خواص باید با مستندات هماهنگ باشد
public string text { set; get; }
public string icon { set; get; }
public JsTreeNodeState state { set; get; }
public List<JsTreeNode> children { set; get; }
public JsTreeNodeLiAttributes li_attr { set; get; }
public JsTreeNodeAAttributes a_attr { set; get; }
public JsTreeNode()
{
state = new JsTreeNodeState();
children = new List<JsTreeNode>();
li_attr = new JsTreeNodeLiAttributes();
a_attr = new JsTreeNodeAAttributes();
}
}
public class JsTreeNodeAAttributes
{
// به هر تعداد و نام اختیاری می‌توان خاصیت تعریف کرد
public string href { set; get; }
}
public class JsTreeNodeLiAttributes
{
// به هر تعداد و نام اختیاری می‌توان خاصیت تعریف کرد
public string data { set; get; }
}
public class JsTreeNodeState
{
public bool opened { set; get; }
public bool disabled { set; get; }
public bool selected { set; get; }
public JsTreeNodeState()
{
opened = true;
}
}
} [HttpPost]
public ActionResult GetTreeJson()
{
var nodesList = new List<JsTreeNode>();
var rootNode = new JsTreeNode
{
id = "dir",
text = "Root 1",
icon = Url.Content("~/Content/images/tree_icon.png"),
a_attr = { href = "http://www.bing.com" }
};
nodesList.Add(rootNode);
nodesList.Add(new JsTreeNode
{
id = "test1",
text = "Root 2",
icon = Url.Content("~/Content/images/tree_icon.png"),
a_attr = { href = "http://www.bing.com" }
});
return Json(nodesList, JsonRequestBehavior.AllowGet);
} <div id="jstree"> </div>
$('#jstree').jstree({
"core": {
"multiple": false,
"check_callback": true,
'data': {
'url': '@getTreeJsonUrl',
"type": "POST",
"dataType": "json",
"contentType": "application/json; charset=utf8",
'data': function (node) {
return { 'id': node.id };
}
},
'themes': {
'variant': 'small',
'stripes': true
}
},
"types": {
"default": {
"icon": '@Url.Content("~/Content/images/bookmark_book_open.png")'
},
},
"plugins": ["contextmenu", "dnd", "state", "types", "wholerow", "sort", "unique"],
"contextmenu": {
"items": function (o, cb) {
var items = $.jstree.defaults.contextmenu.items();
items["create"].label = "ایجاد زیر شاخه";
items["rename"].label = "تغییر نام";
items["remove"].label = "حذف";
var cpp = items["ccp"];
cpp.label = "ویرایش";
var subMenu = cpp["submenu"];
subMenu["copy"].label = "کپی";
subMenu["paste"].label = "پیست";
subMenu["cut"].label = "برش";
return items;
}
}
}); @{
ViewBag.Title = "Demo";
var getTreeJsonUrl = Url.Action(actionName: "GetTreeJson", controllerName: "Home");
} $('#jstree').jstree({
// تمام تنظیمات مانند قبل
}).on('delete_node.jstree', function (e, data) {
})
.on('create_node.jstree', function (e, data) {
})
.on('rename_node.jstree', function (e, data) {
})
.on('move_node.jstree', function (e, data) {
})
.on('copy_node.jstree', function (e, data) {
})
.on('changed.jstree', function (e, data) {
})
.on('dblclick.jstree', function (e) {
})
.on('select_node.jstree', function (e, data) {
}); function postJsTreeOperation(operation, data, onDone, onFail) {
$.post('@doJsTreeOperationUrl',
{
'operation': operation,
'id': data.node.id,
'parentId': data.node.parent,
'position': data.position,
'text': data.node.text,
'originalId': data.original ? data.original.id : data.node.original.id,
'href': data.node.a_attr.href
})
.done(function (result) {
onDone(result);
})
.fail(function (result) {
alert('failed.....');
onFail(result);
});
} .on('create_node.jstree', function (e, data) {
postJsTreeOperation('CreateNode', data,
function (result) {
data.instance.set_id(data.node, result.id);
},
function (result) {
data.instance.refresh();
});
}) [HttpPost]
public ActionResult DoJsTreeOperation(JsTreeOperationData data)
{
switch (data.Operation)
{
case JsTreeOperation.CopyNode:
case JsTreeOperation.CreateNode:
//todo: save data
var rnd = new Random(); // آی دی رکورد پس از ثبت در بانک اطلاعاتی دریافت و بازگشت داده شود
return Json(new { id = rnd.Next() }, JsonRequestBehavior.AllowGet);
case JsTreeOperation.DeleteNode:
//todo: save data
return Json(new { result = "ok" }, JsonRequestBehavior.AllowGet);
case JsTreeOperation.MoveNode:
//todo: save data
return Json(new { result = "ok" }, JsonRequestBehavior.AllowGet);
case JsTreeOperation.RenameNode:
//todo: save data
return Json(new { result = "ok" }, JsonRequestBehavior.AllowGet);
default:
throw new InvalidOperationException(string.Format("{0} is not supported.", data.Operation));
}
} namespace MvcJSTree.Models
{
public enum JsTreeOperation
{
DeleteNode,
CreateNode,
RenameNode,
MoveNode,
CopyNode
}
public class JsTreeOperationData
{
public JsTreeOperation Operation { set; get; }
public string Id { set; get; }
public string ParentId { set; get; }
public string OriginalId { set; get; }
public string Text { set; get; }
public string Position { set; get; }
public string Href { set; get; }
}
} var selectedData;
// ...
.on('dblclick.jstree', function (e) {
var href = selectedData.node.a_attr.href;
alert('selected node: ' + selectedData.node.text + ', href:' + href);
// auto redirect
if (href) {
window.location = href;
}
// activate edit mode
//var inst = $.jstree.reference(selectedData.node);
//inst.edit(selectedData.node);
})
.on('select_node.jstree', function (e, data) {
//alert('selected node: ' + data.node.text);
selectedData = data;
});