Asp.Net+Easyui實現基本的CRUD
話說今天週四,本該給自己放個假,好好休息休息,但無奈自己對IT實在是痴迷,心甘情願的想加加班把目標功能實現,功夫不負有心人,經過6個小時的鏖戰,我終於成功了。在此和大家分享下成果,希望大家給個贊。
我的目標效果:在頁面載入時,table表顯示後臺資料表中的學生的資訊;點選新增按鈕,出現彈框,可以新增學生資訊;選中某一學生記錄後,點選修改按鈕,出現彈框,可以對學生資訊進行修改;選中某一學生記錄後,點選刪除按鈕,便可刪除該學生資訊。效果圖如下所示:
目標效果有了,說說實現思路吧。
1.需要引入Easyui類庫和相關的js:
2.畫出顯示資料的table表<head> <title></title> <link href="css/easyui.css" rel="stylesheet" type="text/css" /> <link href="css/icon.css" rel="stylesheet" type="text/css" /> <link href="css/demo.css" rel="stylesheet" type="text/css" /> <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/jquery.easyui.min.js" type="text/javascript"></script> <script src="js/test.js" type="text/javascript"></script> </head>
3.畫出新增、修改、刪除三個按鈕//用於傳遞使用者需要執行的操作 <input id="test" name="test" type="hidden"> <!--表格顯示區--> <table id="tt" " title="管理學生資訊" class="easyui-datagrid" style="width: auto; height: 400px;" idfield="itemid" pagination="true" iconcls="icon-save" remoteSort="false" data-options="rownumbers:true, url:'JSONData.ashx/ProcessRequest',pageSize:5,pageList:[5,10,15,20], method:'get',toolbar:'#tb' ," fitcolumns= "true" striped="true" singleselect="true"> <thead> <tr> <th data-options="field:'serial',width:0" hidden="hidden"> 序號</th> <th data-options="field:'id',width:100",sortable:"true">學號</th> <th data-options="field:'name',width:100",sortable:"true">姓名</th> </tr> </thead> </table>
4.畫出點選新增、修改按鈕後出現的彈框<!--新增、修改、刪除按鈕--> <div id="tb"> <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="newUser()">新增學生</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-edit" plain="true" onclick="editUser()">修改學生</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-remove" plain="true" onclick="destroyUser()">刪除學生</a> </div>
<!--彈框-->
<div id="dlg" class="easyui-dialog" style="width: 400px; height: 280px; padding: 10px 20px"
closed="true" buttons="#dlg-buttons">
<div class="ftitle">
User Information</div>
<form id="fm" method="post" novalidate>
<div class="fitem">
<label>學號:</label>
<input id="id" class="easyui-validatebox" required="true">
</div>
<div class="fitem">
<label>姓名:</label>
<input id="name" class="easyui-validatebox" required="true">
</div>
</form>
</div>
到此頁面的顯示部分完成,下面需要用Ajax建立Web頁面和一般處理程式之間的互動var url = "JSONData.ashx / ProcessRequest ";
//開啟新增學生彈框
function newUser() {
$('#dlg').dialog('open').dialog('setTitle', '新增學生'); //設定表頭
$('#fm').form('clear'); //清空窗體資料
document.getElementById("test").value = "add"; //設定表示為後臺調不同方法資料提供介面
}
//開啟修改學生彈框
function editUser() {
$('#fm').form('clear');
var row = $('#tt').datagrid('getSelected');
if (row) {
$('#dlg').dialog('open').dialog('setTitle', '修改學生');
//繫結資料列表
$('#id').val(row.id);
$('#name').val(row.name);
document.getElementById("test").value = "modify"; //設定表示為後臺調不同方法資料提供介面
$('#fm').form('load', row);
}
}
//儲存資訊
function saveUser() {
//獲取頁面中輸入的值
var serial;
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var test = document.getElementById("test").value;
var row = $('#tt').datagrid('getSelected');
if (test == "modify") {
serial = row.serial;
} else {
serial == "";
}
$('#fm').form('submit', {
//設定地址與傳遞引數到後臺
url: "JSONData.ashx?id=" + id + "&name=" + name + "&test=" + test + "&serial=" + serial,
onSubmit: function () {
return $(this).form('validate');
},
//判斷結果是否正確
success: function (result) {
if (result.indexOf("T") == 0) {
alert('恭喜您,資訊儲存成功!')
$('#dlg').dialog('close'); // 關閉視窗
$('#tt').datagrid('reload');
}
else {
alert('儲存失敗,請您核對!')
}
var result = eval('(' + result + ')');
if (result.success) {
$('#dlg').dialog('close'); // close the dialog
$('#tt').datagrid('reload');
$.message.alert('提示', '儲存成功!', 'info');
// reload the user data
} else {
//$.messager.show({
// title: 'Error',
// msg: result.msg
//});
}
}
});
}
//刪除學生
function destroyUser() {
document.getElementById("test").value = "delete"; //設定表示為後臺調不同方法資料提供介面
var test = document.getElementById("test").value;
var row = $('#tt').datagrid('getSelected');
if (row) {
$.messager.confirm('提示', '你確定要刪除這條資訊嗎?', function (r) {
if (r) {
$('#fm').form('submit', {
url: "JSONData.ashx?serial=" + row.serial + "&test=" + test,
onSubmit: function () {
},
//判斷結果是否正確
success: function (result) {
if (result.indexOf("T") == 0) {
$('#dlg').dialog('close');
alert('恭喜您,資訊刪除成功!')
$('#tt').datagrid('reload');
}
else {
alert('新增失敗,請重新操作!')
}
var result = eval('(' + result + ')');
}
});
}
});
}
}
通過JS程式碼,我們可以發現,Ajax獲取使用者的資料,將其提交到一般處理程式JSONData.ashx中進行處理,並用回撥函式獲取一般處理程式的執行結果,JSONData.ashx程式碼如下: StudentDAL studentDAL = new StudentDAL();
public void ProcessRequest(HttpContext context)//context中包含前臺與後臺來回傳遞的值
{
//判斷前臺請求的是增刪改查的哪一個
string command = context.Request.QueryString["test"];//前臺傳的標示值
if (command == "add")
{
//呼叫新增方法
Add(context);
}
else if (command == "delete")
{//呼叫刪除方法
Delete(context);
}
else if (command == "modify")
{//呼叫修改方法
Modify(context);
}
else
{//呼叫查詢方法
Query(context);
}
}
#region 新增記錄
/// <summary>
/// 新增記錄
/// </summary>
/// <param name="context"></param>
public void Add(HttpContext context)
{
StudentEntity student = new StudentEntity();
student.id = context.Server.UrlDecode(context.Request.QueryString["id"]);
student.name = context.Server.UrlDecode(context.Request.QueryString["name"]);
try
{
if (studentDAL.Add(student))
{
context.Response.Write("T");
}
else
{
context.Response.Write("F");
}
}
catch (Exception ex)
{
}
}
#endregion
#region 修改記錄
/// <summary>
/// 修改記錄
/// </summary>
/// <param name="context"></param>
public void Modify(HttpContext context)
{
StudentEntity student = new StudentEntity();
student.serial = context.Server.UrlDecode(context.Request.QueryString["serial"]);
student.id = context.Server.UrlDecode(context.Request.QueryString["id"]);
student.name = context.Server.UrlDecode(context.Request.QueryString["name"]);
try
{
if (studentDAL.Update(student))
{
context.Response.Write("T");
}
else
{
context.Response.Write("F");
}
}
catch (Exception ex)
{
}
}
#endregion
#region 刪除記錄
/// <summary>
/// 刪除記錄
/// </summary>
/// <param name="context"></param>
public void Delete(HttpContext context)
{
StudentEntity student = new StudentEntity();
student.serial = context.Server.UrlDecode(context.Request.QueryString["serial"]);
try
{
if (studentDAL.Delete(student))
{
context.Response.Write("T");
}
else
{
context.Response.Write("F");
}
}
catch (Exception ex)
{
}
}
#endregion
#region 查詢記錄
/// <summary>
/// 查詢記錄
/// </summary>
/// <param name="context"></param>
public void Query(HttpContext context)
{
context.Response.ContentType = "text/plain";
//呼叫分頁的GetList方法
DataSet ds = studentDAL.Query();
string strJson = ToJson.Dataset2Json(ds, -1);//DataSet資料轉化為Json資料
context.Response.Write(strJson);//返回給前臺頁面
context.Response.End();
}
#endregion
在將資料表中的資料繫結到頁面中的table時,由於後臺返回的結果是DataSet或DataTable型別,所以需要一個方法將DataSet或DataTable轉換為JSON型別,強大的ToJson類就完成了上述任務:public class ToJson
{
#region DataSet轉換成Json格式
/// <summary>
/// DataSet轉換成Json格式
/// </summary>
/// <param name="ds">DataSet</param>
/// <returns></returns>
public static string Dataset2Json(DataSet ds, int total = -1)
{
StringBuilder json = new StringBuilder();
foreach (DataTable dt in ds.Tables)
{
//{"total":5,"rows":[
json.Append("{\"total\":");
if (total == -1)
{
json.Append(dt.Rows.Count);
}
else
{
json.Append(total);
}
json.Append(",\"rows\":[");
json.Append(DataTable2Json(dt));
json.Append("]}");
} return json.ToString();
}
#endregion
#region dataTable轉換成Json格式
/// <summary>
/// dataTable轉換成Json格式
/// </summary>
/// <param name="dt"></param>
/// <returns></returns>
public static string DataTable2Json(DataTable dt)
{
StringBuilder jsonBuilder = new StringBuilder();
for (int i = 0; i < dt.Rows.Count; i++)
{
jsonBuilder.Append("{");
for (int j = 0; j < dt.Columns.Count; j++)
{
jsonBuilder.Append("\"");
jsonBuilder.Append(dt.Columns[j].ColumnName);
jsonBuilder.Append("\":\"");
jsonBuilder.Append(dt.Rows[i][j].ToString());
jsonBuilder.Append("\",");
}
if (dt.Columns.Count > 0)
{
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
}
jsonBuilder.Append("},");
}
if (dt.Rows.Count > 0)
{
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
}
return jsonBuilder.ToString();
}
#endregion dataTable轉換成Json格式
}
至此,核心程式碼都已經實現,剩下的就是一個學生實體--StudentEntity,一個訪問T_Student表的StudentDAL類,它們和我們平時訪問資料庫的方法一樣,在此不再贅述。這樣,我們輕鬆的完成了對資料表T_Studnet進行CRUD的操作。基本功能雖然已經實現,但Easyui的好多擴充套件功能還需繼續瞭解,比如在資料顯示時,可以設定每頁有多少條資料,資料按什麼方式進行排序、組合查詢等功能。
這個Demo大大增加了我學習Easyui的信心,本以為得一週才能完成的功能,沒想到兩天搞定,小小得瑟一下。和Easyui類似的還有extjs,它們都能畫出很妙的頁面圖,只不過Easyui是JQuery的框架,extjs是Ajax的框架。
如果大家想練練手,可以把我做好的Demo下載下來,看看我的程式碼有什麼不知之處,歡迎大神拍磚,原始碼下載地址:http://pan.baidu.com/s/1o6Cz4Qe。
好了,今天先到這吧,韓義打電話來讓我們回家包餃子去了,關於Easyui的學習,咱們改日再談。
相關推薦
Asp.Net+Easyui實現基本的CRUD
話說今天週四,本該給自己放個假,好好休息休息,但無奈自己對IT實在是痴迷,心甘情願的想加加班把目標功能實現,功夫不負有心人,經過6個小時的鏖戰,我終於成功了。在此和大家分享下成果,希望大家給個贊。 我的目標效果:在頁面載入時,table表顯示後臺資料表中的學生的資訊
基於asp.net + easyui框架,js實現上傳圖片之前判斷圖片格式,同時實現預覽,相容各種瀏覽器+下載
最近在做圖片上傳的一個前臺頁面,上傳圖片功能雖然很簡單,但是需要我們學習的地方很多。在上傳圖片之前驗證圖片的格式,並同時實現預覽。這篇部落格我們就用一段簡單的js程式碼來實現驗證圖片格式,並同時預覽的功能。 html頁面 <div> 選
基於asp.net + easyui框架,一步步學習easyui-datagrid——實現分頁和搜尋(二)
目錄: 上篇部落格我只是將介面的部分完成了,繼續上篇部落格的內容,這篇部落格我們需要將資料庫中的記錄顯示到介面上,並實現資料的分頁顯示。 曾經我寫過分頁的部落格,分頁很簡單, 本質區別在於分頁時從資料庫讀取資訊的方式:假分頁:一次性讀取
ASP.NET Core實現強類型Configuration讀取配置數據
控制器 項目 最好 前言實現讀取JSON文件幾種方式,在項目中采取老辦法簡單粗暴,結果老大過來一看,恩,這樣不太可取,行吧那我就用.NET Core中最新的方式諾,切記,適合的才是最好的,切勿懶。.NET Core讀取JSON文件通過讀取文件方式 當我將VS2015項目用VS2017打開後
ASP.NET Core實現類庫項目讀取配置文件
services 應用程序 配置文件 builder public .NET Core類庫項目讀取JSON配置文件在應用程序目錄下添加JSON文件是進行如下配置: var builder = new ConfigurationBuilder()
asp.net core的基本部署
生成 values web應用 -1 work 什麽 spn 中間件 服務器 隨著.net core正式版的推出,我也準備開始使用這種微軟有史以來第一次跨平臺的技術(本人從來不學也不看beta版的技術),使用VS2017新建一個.net core的web應用程序 這裏隨便
使用Struts2和jQuery EasyUI實現簡單CRUD系統(五)——jsp,json,EasyUI的結合
元素 word cli resultset sheet 傳輸 charset {} tco 這部分比較復雜,之前看過自己的同學開發一個選課系統的時候用到了JSON,可是一直不知道有什麽用。寫東西也沒用到。所以沒去學他。然後如今以這樣的懷著好奇心,這是做什麽用的,這是怎麽用
asp.net Mvc實現文件下載
result 絕對路徑 路徑 ati 文件絕對路徑 filepath href encode string <a href=‘~/Download?filePath=路徑" > 下載 </a> public ActionResult Down
ASP.NET MVC 實現登錄後返回上一頁面操作
sha .net action pos isn 思路 ... 登錄頁面 hand 功能描述:當用戶請求某頁面時,若該頁面需要登錄後再進行操作,則將用戶引導到登錄頁,登錄成功後自動跳轉回前一頁面。 //登錄頁視圖代碼public ActionResult Login(s
使用靜態基類方案讓 ASP.NET Core 實現遵循 HATEOAS Restful Web API
以及 acc repo pri == single partially context 繼承 Hypermedia As The Engine Of Application State (HATEOAS) HATEOAS(Hypermedia as the engi
使用ASP.NET SignalR實現一個簡單的聊天室
spl 記錄 歷史 undefine reat 語句 關鍵字 pda name 前言 距離我寫上一篇博客已經又過了一年半載了,時間過得很快,一眨眼,就把人變得滄桑了許多。青春是短暫的,知識是無限的。要用短暫的青春,去學無窮無盡的知識,及時當勉勵,歲月不待人。今天寫個隨
ASP.NET Core 實現跨站登錄重定向的新解藥
help builder config star path .cn account startup 新的 作為 .NET 程序員,痛苦之一是自從 ASP.NET 誕生之日起直到最新的 ASP.NET Core 都無法直接實現跨站登錄重定向(比如訪問 https://q.cn
ASP.NET MVC 實現偽靜態
javaweb 其中 col true 配置文件 forall 開關 添加 技術 1 什麽是偽靜態? 現在很多門戶網站或者各大電商平臺的網站的鏈接最後都是.htm或者.htm結尾,那麽他們的網頁真的是靜態的html嗎?拿京東來說,有無數個頁面都都Html,在商品每時每刻
ASP.NET MVC 實現帶論壇功能的網站 第一步——實現用戶註冊
form ger sys 返回值 行數 password 除了 框架 html 首先我們要實現用戶的註冊功能。進入visual studio 點擊文件->新建->項目->選擇ASP.NET Web應用程序(.NET Framework)->選擇的
ASP.NET MVC 實現帶論壇功能的網站 第一步——-實現用戶註冊.
get ctrl+c src 文件中 什麽 美化 你們 .get 運行 首先我們要實現用戶的註冊功能。進入visual studio 點擊文件->新建->項目->選擇ASP.NET Web應用程序(.NET Framework)->選擇的模板為M
ASP.NET 簡單實現List資料分頁物件工具類
對於一個List分頁,這個就很簡單了只需要組裝資料結構,然後根據分頁引數改變資料顯示就OK了。 Pager工具 using System; using System.Collections.Generic; using System.Linq; using System.Threadin
ASP.NET MVC 實現頁落網資源分享網站+充值管理+後臺管理(1)之資料庫設計
本文主要講解本專案網站所應用到的知識點,及資料庫的相關設計: 一、知識點 (1)本專案主要採取ASP.NET MVC的程式設計模式,相信你已經瞭解到了MVC的具體含義是什麼,這裡不再贅述,有不瞭解的朋友,可以先
ASP.NET MVC 實現頁落網資源分享網站+充值管理+後臺管理(7)之擴充套件基類和區域建立以及文字編輯配置
一、擴充套件基類和區域建立 (1)在應用之前,我們先在表現層建立一個公共的系統擴充套件檔案來(SystemExtension)存放我們需要延伸和擴充套件的方法類。 在常規的專案系統操作中,我們都需要用到
Asp.net程式碼實現AML查詢並返回使用者實體
1、首先建立Innovator連線。 HttpServerConnection conn = IomFactory.CreateHttpServerConnection("http://localhost/InnovatorServer/", "InnovatorSolutions", "admin", "
ASP.NET簡單實現APP中使用者個人頭像上傳和裁剪
最近有個微信專案的使用者個人中心模組中,客戶要求使用者頭像不僅僅只是上傳圖片,還需要能對圖片進行裁剪。考慮到flash在IOS和Android上的相容性問題,於是想著能從js這塊入手,在網上發現了devotion博主寫的《適應各瀏覽器圖片裁剪無重新整理上傳js外掛》文章,從中受