asp.net使用easyUI 前後臺數據交互

来源:http://www.cnblogs.com/rgcdlb/archive/2017/06/22/7065226.html
-Advertisement-
Play Games

// 1. asp頁面使用EasyUI框架需要的Css樣式和JS <script src="../script/jquery-easyui-1.4.5/jquery.min.js" type="text/javascript" charset = "utf-8"></script> <script ...


// 1. asp頁面使用EasyUI框架需要的Css樣式和JS

<script src="../script/jquery-easyui-1.4.5/jquery.min.js" type="text/javascript" charset = "utf-8"></script>
<script src="../script/jquery-easyui-1.4.5/jquery.easyui.min.js" type="text/javascript" charset = "utf-8"></script>
<link href="../script/jquery-easyui-1.4.5/themes/default/easyui.css" rel="stylesheet" type="text/css"/>
<link href="../script/jquery-easyui-1.4.5/themes/icon.css" rel="stylesheet" type="text/css"/>
<script src="../script/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js" type="text/javascript" charset = "utf-8" ></script>

 

<script type="text/javascript">
//=========================================================== 用戶列表信息 =============================================================================
// 載入頁面信息
$(function () {
$('#datagrid_line').datagrid({
pagination: true, //分頁控制項
loadMsg: "正在載入，請稍後……",
toolbar: [{
text: '添加',
iconCls: 'icon-add',
handler: function () { add(); }
}, '-', {
text: '刪除',
iconCls: 'icon-remove',
handler: function () { remove(); }
}, '-', {
text: '編輯',
iconCls: 'icon-edit',
handler: function () { edit(); }
}, '-', {
text: '刷新',
iconCls: 'icon-reload',
handler: function () { refresh(); }
}]
});
$('#addDialog').dialog('close'); // 頁面載入時隱藏dialog

$.ajax({
type: "post", //要用post方式
url: "Test.aspx/GetUserList", //方法所在頁面和方法名
data: {},
contentType: "application/json; charset=utf-8", // 從伺服器獲取得到json格式數據
dataType: "json",
success: function (data) {
// alert(data.d); //返回的數據用data.d獲取內容
var json = JSON.parse(data.d); // 將後臺得到json格式的字元串轉換為字元串
for (var i in json.rows) {
var row_data = {
'userId': json.rows[i].UserId,
'userName': json.rows[i].UserName,
'nickName': json.rows[i].NickName,
'department': json.rows[i].Department,
'phone': json.rows[i].Phone
};
$('#datagrid_line').datagrid('appendRow', row_data);
// $('#datagrid_line').datagrid('loadData', row_data); // 如果是loadData，loadData只是載入數據，
// 一條一條的載入,這樣就會覆蓋之前顯示的數據，而appendRow是追加數據，不會覆蓋之前顯示的數據
}
$('#datagrid_line').datagrid('reload');

//設置分頁控制項
var p = $('#datagrid_line').datagrid('getPager');
$(p).pagination({
pageNumber: 1, //預設顯示第幾頁
pageSize: 10,
pageList: [10, 20, 30, 40, 50],
beforePageText: '第',
afterPageText: '頁 共{pages}頁',
displayMsg: '當前顯示{from}-{to}條記錄 共{total}條記錄'
});
},
error: function (err) {
$.messager.alert("提示", "載入數據失敗！", "info");
}
});
});

 

// 添加操作
function add()
{
// 清空表單內容
$('#form1').form('clear');

$('#addDialog').dialog('open').dialog('setTitle', '添加用戶');
document.getElementById("Oper").value = "add";
}

// 編輯操作
function edit() {
//alert('edit');
var row = $('#datagrid_line').datagrid('getSelected');
if (row == null) {
$.messager.alert("提示", "請選擇要修改的行！", "info");
}


//獲取要修改的欄位
$('#userNameId').textbox('setText', row.userName);
$('#nickNameId').textbox('setText', row.nickName);
$('#departmentId').textbox('setText', row.department);
$('#phoneId').textbox('setText',row.phone);

$('#addDialog').dialog('open').dialog('setTitle', '修改用戶信息');
document.getElementById("Oper").value = "modify";
document.getElementById("ID").value = row.userId;
$('#form1').form('load', row);
}


// 獲取添加信息並傳至後臺
function getVlaue()
{
var userName = $('#userNameId').textbox('getText');
var nickName = $('#nickNameId').textbox('getText');
var department = $('#departmentId').textbox('getText');
var phone = $('#phoneId').textbox('getText');
var Oper = document.getElementById("Oper").value;
if (Oper == "add") {
$.ajax({
type: "post", //要用post方式
contentType: "application/json", //傳值的方式
url: "Test.aspx/GetValueAjax", //方法所在頁面和方法名
data: "{username:'" + userName + "'" +
",nickname:'" + nickName + "'" +
",department:'" + department + "'" +
",phone:'" + phone + " '" + "}",
dataType: "json",
success: function (data) {
// alert(data.d);
var json = JSON.parse(data.d);
var row_data = {
'userId': json.rows.UserId,
'userName': json.rows.UserName,
'nickName': json.rows.NickName,
'department': json.rows.Department,
'phone': json.rows.Phone
};
$('#datagrid_line').datagrid('appendRow', row_data);
$('#addDialog').dialog('close');
$.messager.alert("提示", "添加用戶成功！", "info");
$('#datagrid_line').datagrid('reload');
},
error: function (err) {
$.messager.alert("提示", "添加用戶失敗！", "info");
}
});
}
else
{
var row = $('#datagrid_line').datagrid('getSelected');
var rowIndex = 0;
if(row)
{
var Id = row.userId;
rowIndex = $('#datagrid_line').datagrid('getRowIndex', row);

}
$.ajax({
type: "post", //要用post方式
contentType: "application/json", //傳值的方式
url: "Test.aspx/GetEditValueAjax", //方法所在頁面和方法名
data: "{userId:'" + Id + "'" +
",username:'" + userName + "'" +
",nickname:'" + nickName + "'" +
",department:'" + department + "'" +
",phone:'" + phone + "'" + "}",
dataType: "json",
success: function (data) {
var json = JSON.parse(data.d);

$('#addDialog').dialog('close');

// 在後臺獲取到修改後的數據，刪除原來的被修改的那一行，再重新插入一行已修改的數據
$('#datagrid_line').datagrid('deleteRow', rowIndex);

$('#datagrid_line').datagrid('insertRow', {
index: rowIndex,
row: {
'userId': json.rows.UserId,
'userName': json.rows.UserName,
'nickName': json.rows.NickName,
'department': json.rows.Department,
'phone': json.rows.Phone
}
});

$('#datagrid_line').datagrid('reload');

$.messager.alert("提示", "修改用戶信息成功！", "info");
},
error: function (err) {
$.messager.alert("提示", "修改用戶信息失敗！", "info");
}
});
}
}

 

// 刷新頁面，重新載入數據
function refresh()
{
$.ajax({
type: "post", //要用post方式
url: "Test.aspx/GetUserList", //方法所在頁面和方法名
data: {},
contentType: "application/json;charset=utf-8", // 從伺服器獲取得到json格式數據
dataType: "json",
loadMsg: "正在載入，請稍後……",
success: function (data) {
// alert(data.d);
var json = JSON.parse(data.d); // 將後臺得到json格式的字元串轉換為字元串

// 清空datagrid中原有數據
var item = $('#datagrid_line').datagrid('getRows');
if (item) {
for (var n = item.length - 1; n >= 0; n--) {
var index = $('#datagrid_line').datagrid('getRowIndex', item[n]);
$('#datagrid_line').datagrid('deleteRow', index);
}
}

// 將獲取到的數據重新載入到頁面上
for (var k in json.rows) {
var row_data = {
'userId': json.rows[k].UserId,
'userName': json.rows[k].UserName,
'nickName': json.rows[k].NickName,
'department': json.rows[k].Department,
'phone': json.rows[k].Phone
};
$("#datagrid_line").datagrid("appendRow", row_data);
}
}
});
}


// 刪除操作
function remove()
{
var oper = document.getElementById("Oper").value = "delete";
var row = $('#datagrid_line').datagrid('getSelected');
var rowIndex = 0;
if(row == null)
{
$.messager.alert("提示", "請選擇要刪除的行！", "info");
}
if(row)
{
var userId = row.userId;
rowIndex = $('#datagrid_line').datagrid('getRowIndex',row);
$.messager.confirm('提示', '你確定要刪除這條信息嗎？', function (r) {
if (r) {
$.ajax({
type: "post",
contentType: "application/json", //傳值的方式
url: "Test.aspx/DeleteUser",
data: "{userId:'" + userId + "'" + "}",
dataType: "text",
success: function (data) {
// alert(data);
if (data.d == "success") {
$.messager.alert("提示", "刪除成功！", "info");
}
$('#datagrid_line').datagrid('deleteRow', rowIndex);
var rows = $('#datagrid_line').datagrid("getRows");
$('#datagrid_line').datagrid("loadData", rows);
},
error: function (err) {
$.messager.alert("提示", "刪除失敗，請重新操作！", "info");
}
});
}
})
}
}

 

// 帶條件的查詢
function SearchInfo()
{
// alert(0);
var userName = document.getElementById("userName").value;
var department = document.getElementById("department").value;
alert(userName +","+ department);
$.ajax({
type: "post",
contentType: "application/json", //傳值的方式
url: "Test.aspx/SearchUser",
data: "{userName:'" + userName + "'" + ",department:'" + department + "'" + "}",
dataType: "json",
contentType: "application/json;charset=utf-8", // 從伺服器獲取得到json格式數據
success: function (data) {
alert(data.d);
var d = JSON.parse(data.d); // 將後臺得到json格式的字元串轉換為字元串

// 清空datagrid中原有數據
var item = $('#datagrid_line').datagrid('getRows');
if (item)
{
for (var i = item.length - 1; i >= 0; i--)
{
var index = $('#datagrid_line').datagrid('getRowIndex', item[i]);
$('#datagrid_line').datagrid('deleteRow', index);
}
}

// 遍歷查詢到的數據
for (var j in d.rows) {
var row_data = {
'userId': d.rows[j].UserId,
'userName': d.rows[j].UserName,
'nickName': d.rows[j].NickName,
'department': d.rows[j].Department,
'phone': d.rows[j].Phone
};
$("#datagrid_line").datagrid("appendRow", row_data);
}
},
error: function (error) {
$.messager.alert("提示", "查詢用戶信息失敗，請重新操作！", "info");
}
});
}


$(function () {
console.info("第一個combobox");
$.ajax({
type: "post", //要用post方式
url: "Test.aspx/getAllUser", //方法所在頁面和方法名
data: {},
contentType: "application/json; charset=utf-8", // 從伺服器獲取得到json格式數據
dataType: "json",
success: function (data) {
console.info("data: " + data.d);
var d = JSON.parse(data.d);
console.info("d ===== " + d);
var themecombo2 = [];
for (var i in d) {
console.info("text : " + d[i].UserName);
themecombo2.push({ "text": d[i].UserName, "id": d[i].UserId }); // combobox列表值的顯示
$("#userCombobox").combobox("loadData", themecombo2);
}

},
error: function (err) {
$.messager.alert("提示", "載入數據失敗！", "info");
}
});

$("#userCombobox").combobox({
onSelect: function (rec) {
console.info("id: +++ " + rec.id);
getUserInfo(rec.id);
}
});


});


function getUserInfo(id) {
console.info("userId : " + id);
$.ajax({
type: "post", //要用post方式
url: "Test.aspx/getAllUserByUserId", //方法所在頁面和方法名
data: "{userId:" + id + "}",
contentType: "application/json; charset=utf-8", // 從伺服器獲取得到json格式數據
dataType: "json",
success: function (data) {
console.info("data: " + data.d);
var d = JSON.parse(data.d);
console.info("d ===== " + d);
var themecombo2 = [];
console.info(d.UserName);
console.info(d.UserId);
themecombo2.push({ "text": d.UserName, "id": d.UserId }); // combobox列表值的顯示
console.info("themecombo2 : " + themecombo2);
$("#userNameCombobox").combobox("loadData", themecombo2);

},
error: function (err) {
$.messager.alert("提示", "載入數據失敗！", "info");
}
});
}


// $('#userCombobox').combobox({
// onSelect: function (rec) {
// console.info("第二個");
// console.info("userId: " + rec.id);
// console.info("userName: " + rec.text);

// $('#userNameCombobox').combobox({
// url:'Test.aspx/getAlluserByUserId',
// queryParams: "{userId:'" + rec.id + "}",
// valueField:'UserId',
// textField:'UserName'
// });


// var url = 'Test.aspx/getAllUserByUserId?userId=' + rec.id;
// $('#userNameCombobox').combobox('reload', url);
</script>


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • HDFS Java API的使用舉例
    HDFS是Hadoop應用程式使用的主要分散式存儲。HDFS集群主要由管理文件系統元數據的NameNode和存儲實際數據的DataNodes組成，HDFS架構圖描述了NameNode，DataNode和客戶端之間的基本交互。客戶端聯繫NameNode進行文件元數據或文件修改，並直接使用DataNod ...
  • Oracle基礎知識整理
    Oracle以dba身份登陸 sqlplus / as sysdba; 1 --查詢創建的序列信息 2 select * from user_sequences; 3 4 --查詢序列的當前值 5 select SQ_TEACHER_TNO.CURRVAL from dual; 6 7 --查詢序列 ...
  • 用ARM實現音樂電子相冊
    （前段時間在做嵌入式的課程設計，特將學習心得整理如下） 一、開發工具及環境介紹 1、ARM處理器 ARM處理器是一個32位元精簡指令集(RISC)處理器架構,其廣泛地使用在許多嵌入式系統設計。 ARM處理器特點： 2、交叉編譯環境 2.1、交叉編譯 交叉編譯（cross-compilation）是指 ...
  • centos中NAT模式下靜態IP連接外網
    使用linux虛擬機時，通常會用到yum命令來安裝軟體，然而這個命令需要連外網下載軟體，用maven下載jar包也需要外網。虛擬機在內網可以互相ping通，然而ping不了外網，於是通過試驗，終於找到瞭解決方案： 1.在物理機的cmd命令行中，使用ipconfig命令，查看IP配置，由圖可知，物理機 ...
  • 可選參數、命名參數、.NET的特殊類型、特性
    1、可選參數和命名參數 1.1可選參數 語法： [修飾符] 返回類型 方法名（必選參數n,可選參數n） 註意： 1.必選參數可以不存在，也可以有多個；可選參數可以有1個或多個 2.可選參數必須放在必選參數之後 3.可選參數在定義時需要賦初始值 4.可選參數之間也需要使用，進行分隔 5.調用可選參數時 ...
  • 資料庫中的事務和併發問題探討
    理解資料庫中的事務及其併發過程中的各種限制對於合理的解決數據問題據有著重要意義，否則極有可能出現非常難以排查的由數據導致的程式bug。 ...
  • 《網路安全法》來襲，近乎積極響應“網路實名制”
    6月1日，《中華人民共和國網路安全法》（簡稱《網路安全法》）開始正式實施，這是我國第一部全面規範網路空間安全管理方面問題的基礎性法律。它的頒佈，讓許多互聯網企業以及廣大民眾倍感欣喜。 進入網路時代後，互聯網應用行業發展迅猛，成為推動經濟發展和社會進步的重要力量。然而，發展的同時也帶來了許多新的問題和 ...
  • EF架構~codeFirst從初始化到資料庫遷移
    一些介紹 CodeFirst是EntityFrameworks的一種開發模式，即代碼優先，它以業務代碼為主，通過代碼來生成資料庫，並且加上migration的強大數據表比對功能來生成資料庫版本，讓程式開發人員不用維護資料庫的變更，而直接維護migration即可，在它裡面有你當前版本和過去歷史版本的 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類