EXTJS4.2——8.Form+gride+linq进行前后端传输
由于目前尚未安装上数据库,所以通过linq模拟查询多条数据。
前端
<!--导入相应Extjs库-->
<script src="~/Scripts/Extjs4.2/ext-all.js"></script>
<link href="~/Scripts/Extjs4.2/resources/ext-theme-neptune/ext-theme-neptune-all.css" rel="stylesheet" />
<script src="~/Scripts/Extjs4.2/ext-theme-neptune.js"></script>
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script>
Ext.onReady(function () {
var btnSubmit = Ext.create('Ext.Button', {
text: '查询',
//handler是用于设置按按键的时候使用的数据
handler: function () {
ExtData.load();
}
});
var form = Ext.create('Ext.form.Panel', {
title: '信息填写',
layout: 'column',
height:80,
width: 350,
bodyPadding: 10,
items: [{
xtype: 'textfield',
name: 'username',
fieldLabel: 'Name',
allowBlank: false //判断是否允许空值
}, btnSubmit
]
});
var ExtData = Ext.create('Ext.data.Store', {
storeId: 'employeeStore',
fields: ['Name', 'Age', 'Address'],//表示在图标上展示的信息
proxy: {
type: 'ajax',
actionMethods: 'post',
url: '/GridPanel/MessageBack',
reader: {
type: 'json',
root: 'data',//注意點
totalProperty: 'total'//注意點
}
},
autoLoad: true,
listeners: {
beforeload: function (store, operation, eOpts) {
//將查詢條件傳遞到後台
var postData = {
username: $("input[name='username']").val()
};
Ext.apply(store.proxy.extraParams, postData);
}
}
});
//ExtData.load();
var grid = Ext.create('Ext.grid.Panel', {
title: '详细信息',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [
{ text: '姓名', dataIndex: 'Name' },
{ text: '年龄', dataIndex: 'Age' },
{ text: '居住地', dataIndex: 'Address' }
],
width: 350,
forceFit: true
});
//创建一个窗体,用来放置form和grid框
var win = new Ext.Window({
title: '数据查询',
width: 350,
height: 374,
resizeable: true,
modal: true,
closable: true,
maximizable: true,//最大化
minimizable: true,//最小化
items: [form,grid]
});
win.show();
})
</script>
后端
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MTV.Controllers
{
public class GridPanelController : Controller
{
// GET: GridPanel
public ActionResult Index()
{
return View();
}
public ActionResult MessageBack(string username)
{
List<DataLink> resultData = new List<DataLink>();
resultData.Add(new DataLink() { Name = "a", Age = 19, Address = "广东" });
resultData.Add(new DataLink() { Name = "b", Age = 43, Address = "上海" });
resultData.Add(new DataLink() { Name = "c", Age = 19, Address = "重庆" });
resultData.Add(new DataLink() { Name = "d", Age = 75, Address = "成都" });
resultData.Add(new DataLink() { Name = "e", Age = 13, Address = "市场" });
resultData.Add(new DataLink() { Name = "f", Age = 77, Address = "安社" });
resultData.Add(new DataLink() { Name = "g", Age = 13, Address = "办公室" });
resultData.Add(new DataLink() { Name = "h", Age = 88, Address = "游乐园" });
resultData.Add(new DataLink() { Name = "e", Age = 98, Address = "养老院" });
resultData.Add(new DataLink() { Name = "e", Age = 113, Address = "室内" });
resultData.Add(new DataLink() { Name = "a", Age = 22, Address = "成都" });
if(username!=null)
{
List<DataLink> resultBack = new List<DataLink>();
var result = from keys in resultData where keys.Name == username select keys;
foreach(var key in result)
{
resultBack.Add(key);
}
string rs = Newtonsoft.Json.JsonConvert.SerializeObject(new { data = resultBack, total = resultBack.Count });
return Content(rs);
}
else
{
return Content("");
}
}
// var rsList= resultData.Where(m => m.Name.Contains(username)).ToList();
}
public class DataLink {
public string Name { get; set; }
public string Address { get; set; }
public int Age { get; set; }
}
}