DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現(xiàn)代Web開發(fā)堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構(gòu)建交互式的Web應(yīng)用程序。從Angular和Reac，到ASP.NET Core或Vue，DevExtreme包含全面的高性能和響應(yīng)式UI小部件集合，可在傳統(tǒng)Web和下一代移動(dòng)應(yīng)用程序中使用。 該套件附帶功能齊全的數(shù)據(jù)網(wǎng)格、交互式圖表小部件、數(shù)據(jù)編輯器等。

DevExpress JS & ASP.NET Core v24.1已全新發(fā)布，新版本官宣支持DateOnly/TimeOnly類型、數(shù)據(jù)驗(yàn)證功能得到增強(qiáng)等，歡迎下載最新版組件體驗(yàn)！

DevExpress技術(shù)交流群10：532598169      歡迎一起進(jìn)群討論

ASP.NET Core - 支持DateOnly/TimeOnly類型

DevExtreme ASP.NET Core DataGrid現(xiàn)在支持DateOnly和TimeOnly數(shù)據(jù)類型，與傳統(tǒng)的DateTime數(shù)據(jù)類型相比，DateOnly和TimeOnly數(shù)據(jù)類型提供了以下好處：

• 使用清晰
• 改進(jìn)的數(shù)據(jù)庫(kù)兼容性
• 序列化過程中更少的空間
• 能夠減少與不同時(shí)區(qū)相關(guān)的潛在錯(cuò)誤/不一致

以下DataGrid特性支持DateOnly和TimeOnly數(shù)據(jù)類型：

• 與過濾相關(guān)的UI元素（過濾行、過濾面板、搜索面板、標(biāo)題過濾器）
• 分組（對(duì)頭部過濾器外部和內(nèi)部的間隔數(shù)據(jù)操作進(jìn)行分組）
• 匯總（min/max, count）

Razor

<div id="grid"></div>
<script>
$(function() {
$("#grid").dxDataGrid({
columns: [
{
dataField: "orderDateOnly",
dataType: "date",
headerFilter: {
groupInterval: "quarter"
}
},
{
dataField: "orderTimeOnly",
dataType: "time",
},]
});
});
</script>

ASP.NET Core - 數(shù)據(jù)驗(yàn)證

獨(dú)立編輯器驗(yàn)證

在這個(gè)版本中，您可以使用Razor語法（除了基于模型的方法）直接向DevExtreme編輯器添加驗(yàn)證規(guī)則。

該方法可用于以下情況：

• 在不可能更改模型時(shí)修改驗(yàn)證規(guī)則，例如當(dāng)模型跨視圖共享時(shí)。
• 向視圖添加額外的編輯器，并定義獨(dú)立于模型的相關(guān)驗(yàn)證規(guī)則。

Razor

@(
Html.DevExtreme().TextBoxFor(m => m.StringProperty).ValidationRules(tvr => {
tvr.AddRequired();
})
)

遠(yuǎn)程屬性 - 附加字段屬性支持

在ASP. NET Core中，屬性有助于客戶端驗(yàn)證，它的屬性支持基于服務(wù)器的字段組合驗(yàn)證。

這個(gè)版本引入了對(duì)DevExtreme數(shù)據(jù)網(wǎng)格和樹列表中的AdditionalFields選項(xiàng)的支持。

下面的代碼片段驗(yàn)證DataGrid列中的電子郵件地址，當(dāng)用戶輸入一個(gè)存在于數(shù)據(jù)庫(kù)中的電子郵件時(shí)，它決定是創(chuàng)建一個(gè)新的配置文件還是編輯一個(gè)現(xiàn)有的記錄（參考RemoteValidation Controller）。要啟用此驗(yàn)證，將ID字段傳遞給AdditionalFields：

View

@(Html.DevExtreme().DataGrid<EmployeeValidation>()
.Editing(editing => {
editing.AllowUpdating(true);
editing.AllowAdding(true);
})
.Columns(columns => {
columns.AddFor(m => m.ID);
columns.AddFor(m => m.Email);
})
)

Model

using System.ComponentModel.DataAnnotations;

public class EmployeeValidation {
public int ID { get; set; }

[Remote("CheckUniqueEmailAddress", "RemoteValidation", AdditionalFields = nameof(ID))]
public string Email { get; set; }
}

Remote Validation Controller

[HttpPost]
public JsonResult CheckUniqueEmailAddress(EmployeeValidation model) {
var isValid = !db.Employees.Any(emp => {
var equals = string.Equals(emp.Email, model.Email, StringComparison.OrdinalIgnoreCase);
return model.ID != emp.ID && equals;
});
return Json(isValid);
}

ASP.NET Core - 富文本編輯器

全新的表格API

在v24.1中，DevExpress Rich Text Editor for ASP. NET Core允許您在運(yùn)行時(shí)修改表的布局、裝飾和結(jié)構(gòu)。

JavaScript

const columnCount = 5;
const rowCount = 5;
const table = richEdit.document.tables.create(0, columnCount, rowCount);

table.autoFit = false;
table.styleName = "Grid Table 5 Dark Accent 1";
table.width = { type: TableWidthType.Twips, value: 9000 };
table.tableStyleOptions = {
...table.tableStyleOptions,
totalRow: true,
headerRow: true,
}

for (let i = 0; i < table.rows.count; i++) {
const cells = table.rows.getByIndex(i)!.cells;

for (let j = 0; j < cells.count; j++) {
const cell = cells.getByIndex(j)!;
richEdit.document.insertText(cell.interval.start, `Row ${i} Cell ${j}`);
}
}

HTML導(dǎo)出/導(dǎo)入

富文本編輯器現(xiàn)在支持導(dǎo)入和導(dǎo)出HTML格式的文檔，您可以向主子文檔添加HTML標(biāo)記（insertHtml方法重載），獲取主子文檔的HTML文本和標(biāo)記（getHtml方法重載），并將文檔內(nèi)容下載到HTML格式的文件中。

更多產(chǎn)品更新咨詢，請(qǐng)