SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.all();
dotnet new react
spa.UseReactDevelopmentServer(npmScript: "start");
spa.UseProxyToSpaDevelopmentServer("http://localhost:3000"); > create-react-app clientapp
> cd clientapp > npm install --save bootstrap axios react-toastify
import "bootstrap/dist/css/bootstrap.css";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css"; render() {
return (
<React.Fragment>
<ToastContainer /> import React, { useState } from "react";
import axios from "axios";
import { toast } from "react-toastify";
export default function UploadFileSimple() {
const [description, setDescription] = useState("");
const [selectedFile1, setSelectedFile1] = useState();
const [selectedFile2, setSelectedFile2] = useState();
return (
<form>
<fieldset className="form-group">
<legend>Support Form</legend>
<div className="form-group row">
<label className="form-control-label" htmlFor="description">
Description
</label>
<input
type="text"
className="form-control"
name="description"
onChange={event => setDescription(event.target.value)}
value={description}
/>
</div>
<div className="form-group row">
<label className="form-control-label" htmlFor="file1">
File 1
</label>
<input
type="file"
className="form-control"
name="file1"
onChange={event => setSelectedFile1(event.target.files[0])}
/>
</div>
<div className="form-group row">
<label className="form-control-label" htmlFor="file2">
File 2
</label>
<input
type="file"
className="form-control"
name="file2"
onChange={event => setSelectedFile2(event.target.files[0])}
/>
</div>
<div className="form-group row">
<button
className="btn btn-primary"
type="submit"
>
Submit
</button>
</div>
</fieldset>
</form>
);
} const [description, setDescription] = useState("");
const [selectedFile1, setSelectedFile1] = useState();
const [selectedFile2, setSelectedFile2] = useState(); <input
type="text"
className="form-control"
name="description"
onChange={event => setDescription(event.target.value)}
value={description}
/> <input
type="file"
className="form-control"
name="file1"
onChange={event => setSelectedFile1(event.target.files[0])}
/> <form enctype="multipart/form-data" action="/upload" method="post"> <input id="file-input" type="file" /> </form>
let file = document.getElementById("file-input").files[0];
let formData = new FormData();
formData.append("file", file);
fetch('/upload/image', {method: "POST", body: formData}); // ...
export default function UploadFileSimple() {
// ...
const handleSubmit = async event => {
event.preventDefault();
const formData = new FormData();
formData.append("description", description);
formData.append("file1", selectedFile1);
formData.append("file2", selectedFile2);
toast.success("Form has been submitted successfully!");
setDescription("");
};
return (
<form onSubmit={handleSubmit}>
</form>
);
} // ...
export default function UploadFileSimple() {
const apiUrl = "https://localhost:5001/api/SimpleUpload/SaveTicket";
// ...
const [isUploading, setIsUploading] = useState(false);
const handleSubmit = async event => {
event.preventDefault();
const formData = new FormData();
formData.append("description", description);
formData.append("file1", selectedFile1);
formData.append("file2", selectedFile2);
try {
setIsUploading(true);
const { data } = await axios.post(apiUrl, formData, {
headers: {
"Content-Type": "multipart/form-data"
}}
});
toast.success("Form has been submitted successfully!");
console.log("uploadResult", data);
setIsUploading(false);
setDescription("");
} catch (error) {
setIsUploading(false);
toast.error(error);
}
};
return (
// ...
);
} <button
disabled={ isUploading }
className="btn btn-primary"
type="submit"
>
Submit
</button> const isFileValid = selectedFile => {
if (!selectedFile) {
// toast.error("Please select a file.");
return false;
}
const allowedMimeTypes = [
"image/png",
"image/jpeg",
"image/gif",
"image/svg+xml"
];
if (!allowedMimeTypes.includes(selectedFile.type)) {
toast.error(`Invalid file type: ${selectedFile.type}`);
return false;
}
const maxFileSize = 1024 * 500;
const fileSize = selectedFile.size;
if (fileSize > maxFileSize) {
toast.error(
`File size ${(fileSize / 1024).toFixed(
2
)} KB must be less than ${maxFileSize / 1024} KB`
);
return false;
}
return true;
}; const handleSubmit = async event => {
event.preventDefault();
if (!isFileValid(selectedFile1) || !isFileValid(selectedFile2)) {
return;
} <button
disabled={
isUploading ||
!isFileValid(selectedFile1) ||
!isFileValid(selectedFile2)
}
className="btn btn-primary"
type="submit"
>
Submit
</button> const startTime = Date.now();
const { data } = await axios.post(apiUrl, formData, {
headers: {
"Content-Type": "multipart/form-data"
},
onUploadProgress: progressEvent => {
const { loaded, total } = progressEvent;
const timeElapsed = Date.now() - startTime;
const uploadSpeed = loaded / (timeElapsed / 1000);
setUploadProgress({
queueProgress: Math.round((loaded / total) * 100),
uploadTimeRemaining: Math.ceil((total - loaded) / uploadSpeed),
uploadTimeElapsed: Math.ceil(timeElapsed / 1000),
uploadSpeed: (uploadSpeed / 1024).toFixed(2)
});
}
}); const [uploadProgress, setUploadProgress] = useState({
queueProgress: 0,
uploadTimeRemaining: 0,
uploadTimeElapsed: 0,
uploadSpeed: 0
}); const showUploadProgress = () => {
const {
queueProgress,
uploadTimeRemaining,
uploadTimeElapsed,
uploadSpeed
} = uploadProgress;
if (queueProgress <= 0) {
return <></>;
}
return (
<table className="table">
<thead>
<tr>
<th width="15%">Event</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<strong>Elapsed time</strong>
</td>
<td>{uploadTimeElapsed} second(s)</td>
</tr>
<tr>
<td>
<strong>Remaining time</strong>
</td>
<td>{uploadTimeRemaining} second(s)</td>
</tr>
<tr>
<td>
<strong>Upload speed</strong>
</td>
<td>{uploadSpeed} KB/s</td>
</tr>
<tr>
<td>
<strong>Queue progress</strong>
</td>
<td>
<div
className="progress-bar progress-bar-info progress-bar-striped"
role="progressbar"
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow={queueProgress}
style={{ width: queueProgress + "%" }}
>
{queueProgress}%
</div>
</td>
</tr>
</tbody>
</table>
);
}; {showUploadProgress()} const formData = new FormData();
formData.append("description", description);
formData.append("file1", selectedFile1);
formData.append("file2", selectedFile2); using Microsoft.AspNetCore.Http;
namespace UploadFilesSample.Models
{
public class Ticket
{
public int Id { set; get; }
public string Description { set; get; }
public IFormFile File1 { set; get; }
public IFormFile File2 { set; get; }
}
} using System.IO;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using UploadFilesSample.Models;
namespace UploadFilesSample.Controllers
{
[Route("api/[controller]")]
[ApiController]
public class SimpleUploadController : Controller
{
private readonly IWebHostEnvironment _environment;
public SimpleUploadController(IWebHostEnvironment environment)
{
_environment = environment;
}
[HttpPost("[action]")]
public async Task<IActionResult> SaveTicket([FromForm]Ticket ticket)
{
var file1Path = await saveFileAsync(ticket.File1);
var file2Path = await saveFileAsync(ticket.File2);
//TODO: save the ticket ... get id
return Created("", new { id = 1001 });
}
private async Task<string> saveFileAsync(IFormFile file)
{
const string uploadsFolder = "uploads";
var uploadsRootFolder = Path.Combine(_environment.WebRootPath, "uploads");
if (!Directory.Exists(uploadsRootFolder))
{
Directory.CreateDirectory(uploadsRootFolder);
}
//TODO: Do security checks ...!
if (file == null || file.Length == 0)
{
return string.Empty;
}
var filePath = Path.Combine(uploadsRootFolder, file.FileName);
using (var fileStream = new FileStream(filePath, FileMode.Create))
{
await file.CopyToAsync(fileStream);
}
return $"/{uploadsFolder}/{file.Name}";
}
}
} public async Task<IActionResult> SaveTicket([FromForm]Ticket ticket)
const { data } = await axios.post(apiUrl, formData, {
headers: {
"Content-Type": "multipart/form-data"
}}
}); 
using System.Web;
namespace Intellisense.Models
{
public class Persons
{
// کلید
public int Id { get; set; }
// نام
public string FirstName { get; set; }
// نام خانوادگی
public string LastName { get; set; }
// نام پدر
public string FatherName { get; set; }
// سن
public int Age { get; set; }
// شماره تلفن
public int Mobile { get; set; }
// آدرس
public string Address { get; set; }
}
} using System.Collections.Generic;
using System.Web.Mvc;
using Intellisense.Models;
namespace Intellisense.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
// List of person
var listOfPerson = new List<Persons>
{
new Persons() {Id = 1, FirstName = "Jone", LastName = "liy", FatherName = "Sobin", Age = 36, Mobile = +982015222, Address = "..."},
new Persons() {Id = 2, FirstName = "kety", LastName = "sory", FatherName = "petter", Age = 19, Mobile = +962222155, Address = "..."},
};
// Set ViewBag.Persons data from listOfPerson
ViewBag.Persons = listOfPerson;
// Show and send ViewBag.Persons to view
return View();
}
}
} @{
ViewBag.Title = "ViewBag";
}
<table>
<thead>
<tr>
<th>
Id
</th>
<th>
First Name
</th>
<th>
Last Name
</th>
<th>
Father Name
</th>
<th>
Age
</th>
<th>
Mobile
</th>
<th>
Address
</th>
</tr>
</thead>
<tbody>
@{foreach (var item in ViewBag.Persons)
{
<tr>
<td>
@item.Id
</td>
<td>
@item.FirstName
</td>
<td>
@item.LastName
</td>
<td>
@item.FatherName
</td>
<td>
@item.Age
</td>
<td>
@item.Mobile
</td>
<td>
@item.Address
</td>
</tr>
}
}
</tbody>
</table> @using Intellisense.Models
@{
ViewBag.Title = "ViewBag";
// روش اول
// پیشنهاد می‌شود که از روش اول استفاده شود
// var listOfPerson = ViewBag.Persons as IEnumerable<Persons>;
// روش دوم
// var listOfPerson = (IEnumerable<Persons>)ViewBag.Persons;
var listOfPerson = ViewBag.Persons as IEnumerable<Persons>;
}
<table>
<thead>
<tr>
<th>
Id
</th>
<th>
First Name
</th>
<th>
Last Name
</th>
<th>
Father Name
</th>
<th>
Age
</th>
<th>
Mobile
</th>
<th>
Address
</th>
</tr>
</thead>
<tbody>
@{foreach (var item in listOfPerson)
{
<tr>
<td>
@item.Id
</td>
<td>
@item.FirstName
</td>
<td>
@item.LastName
</td>
<td>
@item.FatherName
</td>
<td>
@item.Age
</td>
<td>
@item.Mobile
</td>
<td>
@item.Address
</td>
</tr>
}
}
</tbody>
</table>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.quicksearch.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
//جستجو در جدول
$('table#<%=GridView1.ClientID %> tbody tr').quicksearch({
position: 'before',
attached: 'span#attachSearch',
labelText: 'جستجو',
isFieldset: true,
loaderText: ' ... ',
fixWidths: true
});
});
</script>
<span id="attachSearch"></span>
<br />
<asp:GridView ID="GridView1" runat="server"></asp:GridView>
.quicksearch
{
width:190px;
}
<table >
<tr >
<th scope="col">col1</th>
<th scope="col">col2</th>
<th scope="col">col3</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
.
.
.
//سازگار با افزونه‌های جی کوئری
if (GridView1.Rows.Count > 0)
{
//This replaces <td> with <th> and adds the scope attribute
GridView1.UseAccessibleHeader = true;
//This will add the <thead> and <tbody> elements
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
//This adds the <tfoot> element.
//Remove if you don't have a footer row
//GridView1.FooterRow.TableSection = TableRowSection.TableFooter;
}
$('table#<%=GridView1.ClientID %> tr:has(td)').quicksearch({
@media print
{
.quicksearch
{
display: none;
}
}
var personViewModel = {
firstName: ko.observable("Masoud"),
lastName: ko.observable("Pakdel")
this.fullName = ko.computed(function() {
return this.firstName() + " " + this.lastName();
}, this);
};<span data-bind='text: fullName'></span>
function Product(name, price) {
this.name = ko.observable(name);
this.price = ko.observable(price);
}this.shoppingCart = ko.observableArray([
new Product("Beer", 10.99),
new Product("Brats", 7.99),
new Product("Buns", 1.49)
]);<table>
<thead><tr>
<th>Product</th>
<th>Price</th>
</tr></thead>
<tbody data-bind='foreach: shoppingCart'>
<tr>
<td data-bind='text: name'></td>
<td data-bind='text: price'></td>
</tr>
</tbody>
</table><button data-bind='click: addProduct'>Add Beer</button>
this.addProduct = function() {
this.shoppingCart.push(new Product("More Beer", 10.99));
};function PersonViewModel()
{
this.firstName = ko.observable("John");
this.lastName = ko.observable("Smith");
this.checkout = function () {
alert("Trying to checkout");
};
this.fullName = ko.computed(function(){
return this.firstName() + " " + this.lastName();
}, this);
this.shoppingCart = ko.observableArray([
new Product("Beer", 10.99),
new Product("Brats", 7.99),
new Product("Buns", 1.49)
]);
this.addProduct = function () {
this.shoppingCart.push(new Product("More beer", 10.99));
};
};this.removeProduct = function(product) {
self.shoppingCart.remove(product);
}; function PersonViewModel() {
var self = this;<tr> <td data-bind='text: name'></td> <td data-bind='text: price'></td> <td><button data-bind='click: $root.removeProduct'>Remove</button></td> </tr>
public ActionResult Style()
{
Response.ContentType = "text/css";
var model = new Style
{
Color = "red",
Background = "blue"
};
return View(model);
} @model ExternalJavaScript.Models.Style
@{
Layout = null;
}
body {
color : @Model.Color;
background-color : @Model.Background;
} <link rel="stylesheet" href="@Url.Action("Style","Home")" /> public class ContentType : ActionFilterAttribute
{
private string _contentType;
public ContentType(string ct)
{
this._contentType = ct;
}
public override void OnActionExecuted(ActionExecutedContext context) { /* nada */ }
public override void OnActionExecuting(ActionExecutingContext context)
{
context.HttpContext.Response.ContentType = this._contentType;
}
} [ContentType("text/css")]
public ActionResult Style()
{
var model = new Style
{
Color = "red",
Background = "blue"
};
return View(model);
} public class JavaScriptSettingsController : Controller
{
public ActionResult Index()
{
return PartialView();
}
} $(function(){
$.post('@Url.Action("GetData", "Home")', function (data) {
$('.notificationList').html(data);
if ($(data).filter("li").length != 0) {
$('#notificationCounter').html($(data).filter("li").length);
}
});
}); <script src="/JavaScriptSettings"></script>
<script>
$(function () {
$.post('@Url.Action("Index", "Home")', function (data) {
$('.notificationList').html(data);
if ($(data).filter("li").length != 0) {
$('#notificationCounter').html($(data).filter("li").length);
}
});
});
</script> public class ExternalFileAttribute : ActionFilterAttribute
{
private readonly string _contentType;
private readonly string _tag;
public ExternalFileAttribute(string ct, string tag)
{
this._contentType = ct;
_tag = tag;
}
public override void OnResultExecuted(ResultExecutedContext filterContext)
{
var response = filterContext.HttpContext.Response;
response.Filter = new StripEnclosingTagsFilter(response.Filter, _tag);
response.ContentType = _contentType;
}
private class StripEnclosingTagsFilter : MemoryStream
{
private static Regex _leadingOpeningScriptTag;
private static Regex _trailingClosingScriptTag;
//private static string Tag;
private readonly StringBuilder _output;
private readonly Stream _responseStream;
/*static StripEnclosingTagsFilter()
{
LeadingOpeningScriptTag = new Regex(string.Format(@"^\s*<{0}[^>]*>", Tag), RegexOptions.Compiled);
TrailingClosingScriptTag = new Regex(string.Format(@"</{0}>\s*$", Tag), RegexOptions.Compiled);
}*/
public StripEnclosingTagsFilter(Stream responseStream, string tag)
{
_leadingOpeningScriptTag = new Regex(string.Format(@"^\s*<{0}[^>]*>", tag), RegexOptions.Compiled);
_trailingClosingScriptTag = new Regex(string.Format(@"</{0}>\s*$", tag), RegexOptions.Compiled);
_responseStream = responseStream;
_output = new StringBuilder();
}
public override void Write(byte[] buffer, int offset, int count)
{
string response = GetStringResponse(buffer, offset, count);
_output.Append(response);
}
public override void Flush()
{
string response = _output.ToString();
if (_leadingOpeningScriptTag.IsMatch(response) && _trailingClosingScriptTag.IsMatch(response))
{
response = _leadingOpeningScriptTag.Replace(response, string.Empty);
response = _trailingClosingScriptTag.Replace(response, string.Empty);
}
WriteStringResponse(response);
_output.Clear();
}
private static string GetStringResponse(byte[] buffer, int offset, int count)
{
byte[] responseData = new byte[count];
Buffer.BlockCopy(buffer, offset, responseData, 0, count);
return Encoding.Default.GetString(responseData);
}
private void WriteStringResponse(string response)
{
byte[] outdata = Encoding.Default.GetBytes(response);
_responseStream.Write(outdata, 0, outdata.GetLength(0));
}
}
} [ExternalFile("text/javascript", "script")]
public ActionResult Index()
{
return PartialView();
} [ExternalFile("text/css", "style")]
public ActionResult Style()
{
var model = new Style
{
Color = "red",
Background = "blue"
};
return View(model);
} body {
margin: 0;"Helvetica Neue", Helvetica, Arial, sans-serif;
color: #333333;
background-color: #ffffff;
}|
| <div class="row-fluid">
<div class="span12">
<h1>
سرتیتر 1
</h1>
<h2>
سرتیتر 2
</h2>
<h3>
سرتیتر 3
</h3>
<h4>
سرتیتر 4
</h4>
<h5>
سرتیتر 5
</h5>
<h6>
سرتیتر 6
</h6>
</div>
</div> |
<div class="row-fluid">
<div class="span12">
<p class="lead">
تیتر</p>
<p>
متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن
متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن
متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن
متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن
</p>
<small>اندازه کوچک</small> <strong>متن ضخیم</strong> <em>متن ایتالیک</em>
</div>
</div>
| <div class="row-fluid">
<div class="span12">
<p class="muted">
متن غیرفعال</p>
<p class="text-warning">
نمایش اخطار به کاربر</p>
<p class="text-error">
نمایش خطا به کاربر</p>
<p class="text-info">
نمایش اطلاعات به کاربر</p>
<p class="text-success">
نمایش موفقیت آمیز بودن عملیات</p>
</div>
</div> |
| <div class="row-fluid">
<div class="span12">
<p>
My
<abbr title="منظور واحد پردازش مرکزی است">
CPU</abbr>
has N Cores.
</p>
</div>
</div> |
|
| <div class="row-fluid">
<div class="span12">
<address>
وحید نصیری
<br />
ایران، تهران
<br />
<abbr title="Phone">
P:</abbr>
12345678
<br />
<abbr title="Cell">
C:</abbr>
12345678
</address>
</div>
</div> |
| <div class="row-fluid">
<div class="span12">
<blockquote>
<p>
جهت نمایش نقل قول
</p>
<small><cite title="کاربر شماره 2">از شخصی</cite> </small>
</blockquote>
</div>
</div> |
|
| <div class="row-fluid">
<div class="span6">
<ul class="unstyled">
<li>یک </li>
<li>دو </li>
<li>سه </li>
</ul>
</div>
<div class="span6">
<ol>
<li>یک </li>
<li>دو </li>
<li>سه </li>
</ol>
</div>
</div> |
|
| <div class="row-fluid">
<div class="span12">
<dl class="dl-horizontal">
<dt>عنوان</dt>
<dd>
توضیحات بلند در اینجا</dd>
</dl>
</div>
</div> |
|
| <div class="row-fluid">
<div class="span6">
<code>inline code</code>
</div>
<div class="span6">
<pre class="pre-scrollable">
code
code
code
</pre>
</div>
</div> |
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<table
class="table table-striped table-hover table-bordered table-condensed">
<caption>
عنوانی خاص در اینجا</caption>
<thead>
<tr>
<th>
ستون یک
</th>
<th>
ستون دو
</th>
<th>
ستون سه
</th>
</tr>
</thead>
<tbody>
<tr class="error">
<td>
1 متن یک
</td>
<td>
1 متن دو
</td>
<td>
1 متن سه
</td>
</tr>
<tr>
<td>
2 متن یک
</td>
<td>
2 متن دو
</td>
<td>
2 متن سه
</td>
</tr>
<tr>
<td>
3 متن یک
</td>
<td>
3 متن دو
</td>
<td>
3 متن سه
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
|
| <div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<form action="/signup" method="post">
<fieldset>
<legend>ثبت نام</legend>
<label>
ایمیل:</label>
<input name="email" type="text" />
<label>
نام:</label>
<input name="name" type="text" />
</fieldset>
</form>
</div>
</div>
</div> |
<label class="checkbox">
<input type="checkbox" name="isMale" />
مذکر</label>
| <div>
<label class="radio inline">
<input type="radio" name="isMale" />
مذکر</label>
<label class="radio inline">
<input type="radio" name="isFemale" />
مؤنث</label>
</div> |
4) تعیین اندازه فیلدها
| <form class="search-form">
<fieldset>
<legend>جستجو</legend>
<input type="search" class="search-query" />
<button type="submit" class="btn" >بیاب</button>
</fieldset>
</form> |
|
| <form class="form-horizontal" action="/signup" method="post">
<fieldset>
<legend>ثبت نام</legend>
<div class="control-group">
<label class="control-label">
ایمیل:</label>
<div class="controls">
<input name="email" type="text" />
</div>
</div>
<div class="control-group">
<label class="control-label">
نام:</label>
<div class="controls">
<input name="name" type="text" />
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="radio inline">
<input type="radio" name="isMale" />
مذکر</label>
<label class="radio inline">
<input type="radio" name="isFemale" />
مؤنث</label>
</div>
</div>
</fieldset>
</form> |
|
| <div class="control-group error">
<label class="control-label">
ایمیل:</label>
<div class="controls">
<input name="email" type="text" />
<span class="help-block">لطفا ایمیل را با فرمت صحیحی وارد نمائید</span>
</div>
</div> |
|
| <div class="input-prepend input-append">
<span dir="ltr" class="add-on">.00</span>
<input dir="ltr" type="text" />
<span class="add-on">ریال</span>
</div> |
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<table
class="table table-striped table-hover table-bordered table-condensed">
<thead>
<tr>
<th>
دکمه
</th>
<th>
لینک
</th>
<th>
کلاس بکار گرفته شده
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<button class="btn">
default</button>
</td>
<td>
<a href="#" class="btn">default</a>
</td>
<td>
<code>btn</code>
</td>
</tr>
<tr>
<td>
<button class="btn btn-primary">
primary</button>
</td>
<td>
<a href="#" class="btn btn-primary">primary</a>
</td>
<td>
<code>btn btn-primary</code>
</td>
</tr>
<tr>
<td>
<button class="btn btn-info">
info</button>
</td>
<td>
<a href="#" class="btn btn-info">info</a>
</td>
<td>
<code>btn btn-info</code>
</td>
</tr>
<tr>
<td>
<button class="btn btn-success">
success</button>
</td>
<td>
<a href="#" class="btn btn-success">success</a>
</td>
<td>
<code>btn btn-success</code>
</td>
</tr>
<tr>
<td>
<button class="btn btn-warning">
warning</button>
</td>
<td>
<a href="#" class="btn btn-warning">warning</a>
</td>
<td>
<code>btn btn-warning</code>
</td>
</tr>
<tr>
<td>
<button class="btn btn-danger">
danger</button>
</td>
<td>
<a href="#" class="btn btn-danger">danger</a>
</td>
<td>
<code>btn btn-danger</code>
</td>
</tr>
<tr>
<td>
<button class="btn btn-inverse">
inverse</button>
</td>
<td>
<a href="#" class="btn btn-inverse">inverse</a>
</td>
<td>
<code>btn btn-inverse</code>
</td>
</tr>
<tr>
<td>
<button class="btn btn-link">
link</button>
</td>
<td>
<a href="#" class="btn btn-link">link</a>
</td>
<td>
<code>btn btn-link</code>
</td>
</tr>
<tr>
<td>
<button class="btn btn-primary btn-large">
large</button>
</td>
<td>
<a href="#" class="btn btn-primary btn-large">large</a>
</td>
<td>
<code>btn btn-primary btn-large</code>
</td>
</tr>
<tr>
<td>
<button class="btn btn-primary btn-small">
small</button>
</td>
<td>
<a href="#" class="btn btn-primary btn-small">small</a>
</td>
<td>
<code>btn btn-primary btn-small</code>
</td>
</tr>
<tr>
<td>
<button class="btn btn-primary btn-mini">
mini</button>
</td>
<td>
<a href="#" class="btn btn-primary btn-mini">mini</a>
</td>
<td>
<code>btn btn-primary btn-mini</code>
</td>
</tr>
<tr>
<td>
<button class="btn btn-primary btn-block">
block</button>
</td>
<td>
<a href="#" class="btn btn-primary btn-block">block</a>
</td>
<td>
<code>btn btn-primary btn-block</code>
</td>
</tr>
<tr>
<td>
<button class="btn btn-primary disabled">
disabled</button>
</td>
<td>
<a href="#" class="btn btn-primary disabled">disabled</a>
</td>
<td>
<code>btn btn-primary disabled</code>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<i class="icon-music"></i>icon-music
<i class="icon-music icon-white"></i>icon-music
<button class="btn">
<i class="icon-music"></i>دکمه</button>|
| <div class="input-prepend">
<span class="add-on"><i class="icon-envelope"></i></span>
<input type="email" dir="ltr" />
</div> |
<div ng-init="products=[
{id:1,name:'product1',price:25000,description:'description of product'},
{id:2,name:'product2',price:5000,description:'description of product'},
{id:3,name:'product3',price:5000,description:'description of product'},
{id:4,name:'product4',price:2000,description:'description of product'},
{id:5,name:'product5',price:255000,description:'description of product'}
]">
<div>
<div>
<table>
<tr>
<th>Id</th>
<th>Product Name</th>
<th>Price</th>
<th>Description</th>
</tr>
<tr ng-repeat="product in products">
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td>{{product.price}}</td>
<td>{{product.description}}</td>
</tr>
</table>
</div>
</div>
</div> @foreach (var product in Model.products)
{
<td>product.id</td>
<td>product.name</td>
<td>product.price</td>
<td>product.description</td>
} namespace AngularAndMvc.Models
{
public class Product
{
public int Id { get; set; }
public string Name { get; set; }
public float Price { get; set; }
public string Description { get; set; }
}
} namespace AngularAndMvc.Controllers
{
public class ProductController : Controller
{
public ActionResult Index()
{
return View("Index", "", GetSerializedProduct());
}
public string GetSerializedProduct()
{
var products = new[]
{
new Product{Id=1,Name="product1",Price=4500,Description="description of this product"},
new Product{Id=2,Name="product2",Price=500,Description="description of this product"},
new Product{Id=3,Name="product3",Price=400,Description="description of this product"},
new Product{Id=4,Name="product4",Price=5500,Description="description of this product"},
new Product{Id=5,Name="product5",Price=66500,Description="description of this product"}
};
var settings = new JsonSerializerSettings { ContractResolver=new CamelCasePropertyNamesContractResolver()};
return JsonConvert.SerializeObject(products,Formatting.None,settings);
}
}
} var settings = new JsonSerializerSettings { ContractResolver=new CamelCasePropertyNamesContractResolver()};
return JsonConvert.SerializeObject(products,Formatting.None,settings); @model string
<div ng-init="products = @Model">
<div>
<div>
<table>
<tr>
<th>Id</th>
<th>Product Name</th>
<th>Price</th>
<th>Description</th>
</tr>
<tr ng-repeat="product in products">
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td>{{product.price}}</td>
<td>{{product.description}}</td>
</tr>
</table>
</div>
</div>
</div> 
سورس مثال فوق را هم از اینجا می توانید دریافت کنید.
<tbody>
<tr *ngFor="let item of queryResult.items; let i = index">
<td class="text-center">{{ itemsPerPage * (currentPage - 1) + i + 1 }}</td>
<td class="text-center">{{ item.productId }}</td>
<td class="text-center">{{ item.productName }}</td>
<td class="text-center">{{ item.price | number:'.0' }}</td>
<td class="text-center">
<input id="item-{{ item.productId }}" type="checkbox" [checked]="item.isAvailable"
disabled="disabled" />
</td>
</tr>
</tbody>
</table> <tbody>
<tr *ngFor="let item of queryResult.items; let i = index">
<ng-container [ngTemplateOutlet]="loadTemplate(item)"
[ngOutletContext]="{ $implicit: item, idx: i }"></ng-container>
</tr>
</tbody> 
<!--The Html Template for Read-Only Rows-->
<ng-template #readOnlyTemplate let-item let-i="idx">
<td class="text-center">{{ itemsPerPage * (currentPage - 1) + i + 1 }}</td>
<td class="text-center">{{ item.productId }}</td>
<td class="text-center">{{ item.productName }}</td>
<td class="text-center">{{ item.price | number:'.0' }}</td>
<td class="text-center">
<input id="item-{{ item.productId }}" type="checkbox" [checked]="item.isAvailable"
disabled="disabled" />
</td>
<td>
<input type="button" value="Edit" class="btn btn-default btn-xs" (click)="editItem(item)"
/>
</td>
<td>
<input type="button" value="Delete" (click)="deleteItem(item)" class="btn btn-danger btn-xs"
/>
</td>
</ng-template> @ViewChild("readOnlyTemplate") readOnlyTemplate: TemplateRef<any>; 
<!--The Html Template for Editable Rows-->
<ng-template #editTemplate let-item let-i="idx">
<td class="text-center">{{ itemsPerPage * (currentPage - 1) + i + 1 }}</td>
<td class="text-center">{{ item.productId }}</td>
<td class="text-center">
<input type="text" [(ngModel)]="selectedItem.productName" class="form-control" />
</td>
<td class="text-center">
<input type="text" [(ngModel)]="selectedItem.price" class="form-control" />
</td>
<td class="text-center">
<input id="item-{{ item.productId }}" type="checkbox" [checked]="item.isAvailable"
[(ngModel)]="selectedItem.isAvailable" />
</td>
<td>
<input type="button" value="Save" (click)="saveItem()" class="btn btn-success btn-xs"
/>
</td>
<td>
<input type="button" value="Cancel" (click)="cancel()" class="btn btn-warning btn-xs"
/>
</td>
</ng-template> @ViewChild("editTemplate") editTemplate: TemplateRef<any>; @ViewChild("readOnlyTemplate") readOnlyTemplate: TemplateRef<any>;
@ViewChild("editTemplate") editTemplate: TemplateRef<any>;
selectedItem: AppProduct;
isNewRecord: boolean; editItem(item: AppProduct) {
this.selectedItem = item;
} loadTemplate(item: AppProduct) {
if (this.selectedItem && this.selectedItem.productId === item.productId) {
return this.editTemplate;
} else {
return this.readOnlyTemplate;
}
} <div class="panel"> <input type="button" value="Add new product" class="btn btn-primary" (click)="addItem()" /> </div>
addItem() {
this.selectedItem = new AppProduct(0, "", 0, false);
this.isNewRecord = true;
this.queryResult.items.push(this.selectedItem);
this.queryResult.totalItems++;
} cancel() {
this.selectedItem = null;
} deleteItem(item: AppProduct) {
this.productsService
.deleteAppProduct(item.productId)
.subscribe((resp: Response) => {
this.getPagedProductsList();
});
} saveItem() {
if (this.isNewRecord) {
this.productsService
.addAppProduct(this.selectedItem)
.subscribe((resp: AppProduct) => {
this.selectedItem.productId = resp.productId;
this.isNewRecord = false;
this.selectedItem = null;
});
} else {
this.productsService
.updateAppProduct(this.selectedItem.productId, this.selectedItem)
.subscribe((resp: AppProduct) => {
this.selectedItem = null;
});
}
} dotnet new blazor --interactivity Server
dotnet new blazor --interactivity WebAssembly
dotnet new blazor --interactivity Auto
dotnet new blazor --interactivity None
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorComponents().AddInteractiveServerComponents();
var app = builder.Build();
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Error", createScopeForErrors: true);
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseAntiforgery();
app.MapRazorComponents<App>().AddInteractiveServerRenderMode();
app.Run(); @page "/counter"
@rendermode InteractiveServer
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
} @rendermode InteractiveServerRenderModeWithoutPrerendering
@code{
static readonly IComponentRenderMode InteractiveServerRenderModeWithoutPrerendering =
new InteractiveServerRenderMode(false);
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="app.css" />
<link rel="stylesheet" href="MyApp.styles.css" />
<link rel="icon" type="image/png" href="favicon.png" />
<HeadOutlet />
</head>
<body>
<Routes />
<script src="_framework/blazor.web.js"></script>
</body>
</html> <HeadOutlet @rendermode="@InteractiveServer" /> ... <Routes @rendermode="@InteractiveServer" />
@page "/weather"
@attribute [StreamRendering(prerender: true)]
<PageTitle>Weather</PageTitle>
<h1>Weather</h1>
<p>This component demonstrates showing data.</p>
@if (_forecasts == null)
{
<p>
<em>Loading...</em>
</p>
}
else
{
<table class="table">
<thead>
<tr>
<th>Date</th>
<th>Temp. (C)</th>
<th>Temp. (F)</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
@foreach (var forecast in _forecasts)
{
<tr>
<td>@forecast.Date.ToShortDateString()</td>
<td>@forecast.TemperatureC</td>
<td>@forecast.TemperatureF</td>
<td>@forecast.Summary</td>
</tr>
}
</tbody>
</table>
}
@code {
private List<WeatherForecast>? _forecasts;
protected override async Task OnInitializedAsync()
{
// Simulate asynchronous loading to demonstrate streaming rendering
await Task.Delay(500);
var startDate = DateOnly.FromDateTime(DateTime.Now);
var summaries = new[]
{
"Freezing",
"Bracing",
"Chilly",
"Cool",
"Mild",
"Warm",
"Balmy",
"Hot",
"Sweltering",
"Scorching",
};
_forecasts = GetWeatherForecasts(startDate, summaries).ToList();
StateHasChanged();
// Simulate asynchronous loading to demonstrate streaming rendering
await Task.Delay(1000);
_forecasts.AddRange(GetWeatherForecasts(startDate, summaries));
StateHasChanged();
await Task.Delay(1000);
_forecasts.AddRange(GetWeatherForecasts(startDate, summaries));
}
private static IEnumerable<WeatherForecast> GetWeatherForecasts(DateOnly startDate, string[] summaries)
{
return Enumerable.Range(1, 5)
.Select(index => new WeatherForecast
{
Date = startDate.AddDays(index),
TemperatureC = Random.Shared.Next(-20, 55),
Summary = summaries[Random.Shared.Next(summaries.Length)],
});
}
private class WeatherForecast
{
public DateOnly Date { get; set; }
public int TemperatureC { get; set; }
public string? Summary { get; set; }
public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
}
} @using static Microsoft.AspNetCore.Components.Web.RenderMode
@attribute [RenderModeInteractiveServer]
@rendermode InteractiveServer
@rendermode renderMode
@code {
static IComponentRenderMode renderMode = new InteractiveWebAssemblyRenderMode(prerender: false);
}