easy-ui的操作及交互：
Html：
@using LangBo.Facade;
@using LangBo.DataDefine;
@using System.Threading.Tasks;
@model List<FR_CategoryInfo>
@{
ViewBag.Title = "小组管理";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@section scripts {
<script src="@Url.Content("~/Scripts/Community/TopicMng.js")" type="text/javascript"></script>
}
<div id="main">
<div class="frame-top"> </div>
<div class="frame-list">
<table id="topiclist"></table> //加载数据
</div> </div> <div id="pop_Topic">
<div class="popinner">
<input type="hidden" name="Id" value="" />
<table class="frame-main">
<tr class="line">
<td class="title">小组类型</td>
<td class="content">
<select name="CategoryID" >
@foreach (FR_CategoryInfo category in Model)
{
<option value="@category.Id">@category.CategoryName</option>
}
</select>
</td>
<tr class="line">
<td class="title">小组名称</td>
<td class="content"><input name="TopicCont" value="" /></td>
</tr>
<tr class="line">
<td class="title">期数</td>
<td class="content"><input name="PeriodIndex" value="" /></td>
</tr>
<tr class="line">
<td class="title">小组排序</td>
<td class="content"><input name="TopicIndex" value="" /></td>
</tr>
<tr class="line">
<td class="title">权限</td>
<td class="content">
<select name="PurviewLevel" value="">
<option value="0">特权小组</option>
<option value="1">普通小组</option>
</select>
</td>
</tr>
</table>
<div class="actionbar-full">
//操作 与js中 InitPageEvent（）相对应
<a href="javascript:void(0)" data-act="cancel" class="easyui-linkbutton" iconcls="icon-back">取消</a>
<a href="javascript:void(0)" data-act="save" class="easyui-linkbutton" iconcls="icon-ok">保存</a>
</div>
</div>
</div>
js：
$(document).ready(function () {
TopicMgr.InitPageEvent();
TopicMgr.InitPageCtrl();
TopicMgr.InitPageData();
});
var TopicMgr = {
InitPageEvent: function () {
$("#pop_Topic .actionbar-full a[data-act=save]").on("click", function () {
TopicMgr.SaveTopic();
});
$("#pop_Topic .actionbar-full a[data-act=cancel]").on("click", function () {
TopicMgr.CancelEditTopic();
});
},
InitPageCtrl: function () { //隐藏添加弹出框
$("#pop_Topic").dialog({ modal: true, closed: true });
},
InitPageData: function () {
$("#topiclist").datagrid({
url: "/Community/Topic/List",
title: "小组管理",
980,
height: 760,
loadMsg: "加载中....",
fitColumns: false,
rownumbers: true,
singleSelect: true,
idField: "Id",
columns: [[
{ field: "Id", title: "ID", 50, align: "left" },
{ field: "CategoryName", title: "小组类别", 80, align: "left" },
{ field: "TestTypeName", title: "考试类型", 80, align: "left" },
{ field: "TopicCont", title: "小组名称", 90, align: "left" },
{ field: "TopicDesc", title: "简介", 150, align: "left" },
{ field: "PeriodIndex", title: "当前期数", 70, align: "left" },
{ field: "TopicIndex", title: "小组排序", 70, align: "left" },
{ field: "CreatorName", title: "创始人", 100, align: "left" },
{
field: "PurviewLevel", title: "权限", 80, align: "left",
formatter: function (value) {
return value == 0 ? "特权小组" : "普通小组"
}
},
{
field: "TimeMark", title: "创建时间", 110, align: "left",
formatter: function (value) {
return FormatJSONDateToDate(value);
}
},
//进行操作
{
field: "Op", title: "操作", 150, align: "left",
formatter: function (value, rec, rowIdx) {
return "<a href='javascript:TopicMgr.EditTopic()' style='margin-right: 10px'>编辑</a>" +
"<a href='javascript:TopicMgr.DeleteTopic(" + rowIdx + ")'>删除</a>";
}
},
]],
///添加
toolbar: [{
text: "添加",
iconCls: "icon-add",
handler: function () {
TopicMgr.AppendTopic();
}
}]
});
},
AppendTopic: function () {
$("#pop_Topic input[name=Id]").val("");
$("#pop_Topic input[name=CategoryID]").val("");
$("#pop_Topic input[name=TestType]").val("");
$("#pop_Topic input[name=TopicCont]").val("");
$("#pop_Topic input[name=CreatorID]").val("");
$("#pop_Topic textarea[name=TopicDesc]").text("");
$("#pop_Topic input[name=TimerMark]").val("");
$("#pop_Topic input[name=PurviewLevel]").val("");
$("#pop_Topic input[name=PeriodIndex]").val("");
$("#pop_Topic input[name=TopicIndex]").val("");
$("#pop_Topic").dialog({ title: "添加信息" });
$("#pop_Topic").dialog("open");
},
EditTopic: function () {
TryAutoFillControl($("#topiclist").datagrid("getSelected"), "pop_Topic");
$("#pop_Topic").dialog({ title: "编辑信息" });
$("#pop_Topic").dialog("open");
},
SaveTopic: function () {
var dataCarrier = new Object();
dataCarrier.topic = SerializeFormObjs($("#pop_Topic :input").serializeArray());
var postUrl;
if (dataCarrier.topic.Id == "")
postUrl = "/Community/Topic/Insert"; //添加
else postUrl = "/Community/Topic/Update"; //修改
$.ajax({
type: "POST",
url: postUrl,
data: JSON.stringify(dataCarrier),
dataType: "json",
contentType: "application/json;charset=utf-8",
success: function (result) {
$("#topiclist").datagrid("reload");
$("#pop_Topic").dialog("close");
$.messager.alert("提示", result, "info");
},
error: function (ex) {
$.messager.alert('提示', "操作失败", "error");
}
});
},
DeleteTopic: function (index) {
//操作删除 传参到C#
$.messager.confirm("提示", "你确定删除此条记录吗？", function (r) {
if (r) {
$.ajax({
type: "POST",
url: "/Community/Topic/Delete",
data: "{ 'topicID': '" + $("#topiclist").datagrid("getSelected").Id + "' }",
dataType: "json",
contentType: "application/json;charset=utf-8",
success: function (result) {
$("#topiclist").datagrid("deleteRow", index);
$.messager.alert("提示", result, "info");
},
error: function (ex) {
$.messager.alert('提示', "操作失败", "error");
}
});
}
});
},
//关闭弹出框
CancelEditTopic: function () {
$("#pop_Topic").dialog("close");
}
}
C#：
public async Task<ActionResult> TopicMng() {
if (CurrentUser.GetCurrentUserPurview(CurrentUser.UserPurview_Community)) {
List<FR_CategoryInfo> listCategory = await CommunityTopicFacade.ListCategory().ConfigureAwait(false);
return View(listCategory);
} else
return Redirect("~/Home/Error");
}
public async Task<JsonResult> List() {
return new JsonResult() {
Data = await CommunityTopicFacade.ListAsync().ConfigureAwait(false)
};
}
public async Task<JsonResult> Insert(FR_TopicInfo topic) {
topic.CreatorID = CurrentUser.GetCurrentUserID();
topic.PeriodIndex = 1;
await CommunityTopicFacade.InsertAsync(topic).ConfigureAwait(false);
return new JsonResult() {
Data = "添加数据成功"
};
}
public async Task<JsonResult> Update(FR_TopicInfo topic) {
topic.CreatorID = CurrentUser.GetCurrentUserID();
await CommunityTopicFacade.UpdateAsync(topic).ConfigureAwait(false);
return new JsonResult() {
Data = "修改数据成功"
};
}
public async Task<JsonResult> Delete(string topicID) {
await CommunityTopicFacade.DeleteAsync(topicID).ConfigureAwait(false);
return new JsonResult() {
Data = "删除数据成功"
};
}