在没有控件许可的情况下，可以使用HTML、JQuery和MVC来创建一个简单的网格视图。以下是创建过程的详细步骤。
首先，创建一个MVC 3项目，并为数据创建一个模型类。
namespace MVCSimpleGrid.Models
{
public class EmployeeModel
{
public int EmpId { get; set; }
public string EmployeeName { get; set; }
public string EmployeeDep { get; set; }
}
}
接下来，创建一个动作方法和支持功能。
namespace MVCSimpleGrid.Controllers
{
public class HomeController : Controller
{
static List<EmployeeModel> _lstEmployee = new List<EmployeeModel>();
public ActionResult Index()
{
_lstEmployee = GetEmployees();
return View(_lstEmployee);
}
private List<EmployeeModel> GetEmployees()
{
List<EmployeeModel> _pvtList = new List<EmployeeModel>();
// 创建员工数据
_pvtList.Add(new EmployeeModel { EmpId = 1, EmployeeName = "员工1", EmployeeDep = "部门1" });
_pvtList.Add(new EmployeeModel { EmpId = 2, EmployeeName = "员工2", EmployeeDep = "部门2" });
_pvtList.Add(new EmployeeModel { EmpId = 3, EmployeeName = "员工3", EmployeeDep = "部门3" });
_pvtList.Add(new EmployeeModel { EmpId = 4, EmployeeName = "员工4", EmployeeDep = "部门4" });
return _pvtList;
}
}
}
创建视图时，确保每个字段的ID都是唯一的，并且与模型的一个组件相关。
@model IEnumerable<MVCSimpleGrid.Models.EmployeeModel>
@{
ViewBag.Title = "Index";
}
<div id="divResult">
<h2>简易MVC网格视图</h2>
<table>
<tr>
<th>员工ID</th>
<th>员工姓名</th>
<th>员工部门</th>
<th>操作</th>
</tr>
@foreach (var m in Model)
{
<tr>
<td>@m.EmpId</td>
<td>
<div id="divEmpName-@m.EmpId.ToString()" class="visible">@m.EmployeeName</div>
<input id="txtEmpName-@m.EmpId.ToString()" type="text" class="hide" value="@m.EmployeeName.ToString()" />
</td>
<td>
<div id="divEmpDep-@m.EmpId.ToString()" class="visible">@m.EmployeeDep</div>
<input id="txtEmpDep-@m.EmpId.ToString()" type="text" class="hide" value="@m.EmployeeDep.ToString()" />
</td>
<td>
<button id="btnEdit-@m.EmpId.ToString()" class="visible" onclick="ShowEdit(@m.EmpId); return false;">编辑</button>
<button id="btnSave-@m.EmpId.ToString()" class="hide" onclick="SaveEdit(@m.EmpId); return false;">保存</button>
</td>
</tr>
}
</table>
</div>
创建脚本来处理按钮的函数。
<script type="text/javascript">
function ShowEdit(par) {
$("#divEmpName-" + par).attr("class", "hide");
$("#txtEmpName-" + par).attr("class", "visible");
$("#divEmpDep-" + par).attr("class", "hide");
$("#txtEmpDep-" + par).attr("class", "visible");
$("#btnEdit-" + par).attr("class", "hide");
$("#btnSave-" + par).attr("class", "visible");
}
function SaveEdit(par) {
$("#divEmpName-" + par).attr("class", "visible");
$("#txtEmpName-" + par).attr("class", "hide");
$("#divEmpDep-" + par).attr("class", "visible");
$("#txtEmpDep-" + par).attr("class", "hide");
$("#btnEdit-" + par).attr("class", "visible");
$("#btnSave-" + par).attr("class", "hide");
var _empName = $("#txtEmpName-" + par).val();
var _empDep = $("#txtEmpDep-" + par).val();
var url = '@Url.Action("Index","Home")';
$.post(url, { Id: par, empName: _empName, empDep: _empDep },
function (data) {
$("divResult").html(data);
});
}
</script>
除了编写代码部分，还需要实现支持SaveEdit()的Ajax版本的Index动作方法。
[HttpPost]
public ActionResult Index(int Id, string empName, string empDep)
{
_lstEmployee[Id - 1].EmployeeName = empName;
_lstEmployee[Id - 1].EmployeeDep = empDep;
return View(_lstEmployee);
}