日付フォーマット変換機能
JSONシリアライズにはNewtonsoft.Jsonライブラリを使用し、拡張メソッドを定義することで処理を簡素化しています。
public static class JsonExtensions
{
public static string ToJson(this object instance)
{
return JsonConvert.SerializeObject(instance);
}
}データクエリとシリアライズの例：
var query = from a in db.TB_KTVAndConcert
join b in db.TB_City on a.Cityid equals b.ID
where a.AttributeCode == "AttrubuteCode".GetRequest()
orderby a.Cityid
select new
{
a.CreateDate,
a.Defaultflag,
a.ID,
a.Name,
a.Cityid,
b.CityName,
a.Displayindex
};
if ("CityID".GetRequest().IsNotEmpty())
{
if (MyRegex.IsNumberRegex("CityID".GetRequest()))
{
int cityId = Convert.ToInt32("CityID".GetRequest());
query = query.Where(p => p.Cityid == cityId);
}
}
context.Response.Write(query.OrderByDescending(p => p.Defaultflag)
.ThenBy(p => p.Displayindex)
.ToJson());クライアント側日付フォーマット処理
日付データの表示を統一するため、JavaScriptで共通関数を実装しています。
Date.prototype.format = function(fmt) {
if (!fmt) fmt = "yyyy-MM-dd hh:mm:ss";
const o = {
"M+": this.getMonth() + 1,
"d+": this.getDate(),
"h+": this.getHours(),
"m+": this.getMinutes(),
"s+": this.getSeconds(),
"q+": Math.floor((this.getMonth() + 3) / 3),
"S": this.getMilliseconds()
};
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1,
(this.getFullYear()+"").substr(4 - RegExp.$1.length));
}
for (let k in o) {
if (new RegExp("(" + k + ")").test(fmt)) {
fmt = fmt.replace(RegExp.$1,
RegExp.$1.length == 1 ? o[k] :
("00" + o[k]).substr((""+o[k]).length));
}
}
return fmt;
};
function formatDate(str) {
return new Date(parseInt(str.substring(
str.indexOf('(')+1,
str.indexOf(')')
))).format("yyyy-MM-dd hh:mm:ss");
}UI共通コンポーネント
メッセージ表示機能
function showMessage(title, msg, isAlert) {
if (isAlert) {
$.messager.alert(title, msg);
} else {
$.messager.show({
title: title,
msg: msg,
showType: 'show'
});
}
}確認ダイアログ
function showConfirmDialog(title, msg, callback) {
$.messager.confirm(title, msg, function(result) {
if (result && $.isFunction(callback)) {
callback.call();
}
});
}進捗表示機能
function showProgress(isShow, title, msg) {
if (!isShow) {
$.messager.progress('close');
return;
}
$.messager.progress({
title: title,
msg: msg
});
}フォーム処理
フォーム送信時の共通処理：
function submitForm(url) {
$('#ff').form('submit', {
url: getUrl(url),
onSubmit: function() {
const isValid = $(this).form('validate');
if (isValid) {
showProgress(true, '処理中', 'データを送信しています...');
}
return isValid;
},
success: function(response) {
showProgress(false);
if (response === "1") {
top.showMessage('成功', 'データを保存しました');
if (parent !== undefined) {
if ($.isFunction(window.reloadParent)) {
reloadParent.call();
} else {
parent.$("#tt").datagrid('reload');
parent.closeWindow();
}
}
} else {
$.messager.alert('エラー', response);
}
},
onLoadError: function() {
showProgress(false);
$.messager.alert('エラー', '通信エラーが発生しました');
}
});
}
function getUrl(url) {
return (url || "/Ajax/Common.ashx") + "?Type=" + typeCode;
}ダイナミックウィンドウ
$(function() {
$('body').append('<div id="appWindow" class="easyui-dialog" closed="true"></div>');
});
function openWindow(title, url, width, height, modal, minFlag, maxFlag) {
$('#appWindow').window({
title: title,
width: width || 600,
height: height || 400,
content: `<iframe src="${url}" style="width:100%;height:98%" frameborder="0"></iframe>`,
modal: modal !== undefined ? modal : true,
minimizable: minFlag !== undefined ? minFlag : false,
maximizable: maxFlag !== undefined ? maxFlag : false,
shadow: false,
cache: false,
closed: false,
collapsible: false,
resizable: false,
loadingMessage: 'データを読み込んでいます...'
});
}
function closeWindow() {
$('#appWindow').window('close');
}HTMLフォームの例
<div class="easyui-layout" style="height:270px">
<div region="center" style="padding:10px">
<form id="ff" method="post">
<input type="hidden" name="id">
<table>
<tr>
<td><label for="AdminLogin">ログイン名：</label></td>
<td>
<input class="easyui-validatebox"
style="width:300px"
type="text"
required="true"
validtype="length[0,20]"
name="AdminLogin">
</td>
</tr>
<tr>
<td><label for="RoleID">ロール：</label></td>
<td>
<input class="easyui-combobox"
valuefield="ID"
textfield="RoleName"
panelheight="auto"
editable="false"
style="width:300px"
url="/Ajax/Common.ashx?Type=GetRoles"
required="true"
name="RoleID">
</td>
</tr>
</table>
</form>
</div>
<div region="south" style="text-align:right;padding:5px">
<a class="easyui-linkbutton"
iconcls="icon-save"
href="javascript:void(0)"
onclick="submitForm()">保存</a>
</div>
</div>ページ更新処理
function reloadParentPage() {
top.showProgress(false);
parent.showMessage('成功', 'データを保存しました');
parent.location.reload();
}全コード例
// 日付フォーマット関数は前述のものと同じ
// メッセージ表示
function showMessage(title, msg, isAlert) {
if (isAlert) {
$.messager.alert(title, msg);
} else {
$.messager.show({
title: title,
msg: msg,
showType: 'show'
});
}
}
// ウィンドウ関連
$(function() {
$('body').append('<div id="appWindow" class="easyui-dialog" closed="true"></div>');
});
function openWindow(title, url, width, height, modal, minFlag, maxFlag) {
$('#appWindow').window({
title: title,
width: width || 600,
height: height || 400,
content: `<iframe src="${url}" style="width:100%;height:98%" frameborder="0"></iframe>`,
modal: modal !== undefined ? modal : true,
minimizable: minFlag !== undefined ? minFlag : false,
maximizable: maxFlag !== undefined ? maxFlag : false,
shadow: false,
cache: false,
closed: false,
collapsible: false,
resizable: false,
loadingMessage: 'データを読み込んでいます...'
});
}
function closeWindow() {
$('#appWindow').window('close');
}
// フォーム送信
function submitForm(url) {
$('#ff').form('submit', {
url: getUrl(url),
onSubmit: function() {
const isValid = $(this).form('validate');
if (isValid) {
showProgress(true, '処理中', 'データを送信しています...');
}
return isValid;
},
success: function(response) {
showProgress(false);
if (response === "1") {
top.showMessage('成功', 'データを保存しました');
if (parent !== undefined) {
if ($.isFunction(window.reloadParent)) {
reloadParent.call();
} else {
parent.$("#tt").datagrid('reload');
parent.closeWindow();
}
}
} else {
$.messager.alert('エラー', response);
}
},
onLoadError: function() {
showProgress(false);
$.messager.alert('エラー', '通信エラーが発生しました');
}
});
}
function getUrl(url) {
return (url || "/Ajax/Common.ashx") + "?Type=" + typeCode;
}
// 進捗表示
function showProgress(isShow, title, msg) {
if (!isShow) {
$.messager.progress('close');
return;
}
$.messager.progress({
title: title,
msg: msg
});
}
// 確認ダイアログ
function showConfirmDialog(title, msg, callback) {
$.messager.confirm(title, msg, function(result) {
if (result && $.isFunction(callback)) {
callback.call();
}
});
}