JqGrid向数据库添加新行
Posted
技术标签:
【中文标题】JqGrid向数据库添加新行【英文标题】：JqGrid Adding new row to DB 【发布时间】：2018-03-26 18:56:51 【问题描述】：我在我的 Asp.net MVC 项目上设置了一个 JQGrid，除了在我的 SQL 数据库中添加一个新行之外，一切正常。它成功地向 jQGrid 添加了一行，但没有在数据库中创建新条目。我在“创建”操作方法中放置了一个断点，它被调用了。值得注意的是，现有条目的“编辑”工作完美无缺。我已经有一段时间了。啤酒是最佳答案。
控制器：
public class SettingsController : Controller
// GET: Settings
public ActionResult Index()
return View();
// GET: Users
public ActionResult Users()
return View();
SmartAdminMvcEntities db = new SmartAdminMvcEntities();
public JsonResult GetValues(string sidx, string sord, int page, int rows) //Gets the todo Lists.
//System.Diagnostics.Debug.WriteLine("GetValues");
//Debug.WriteLine("GetValues");
Trace.Write("Error Message");
int pageIndex = Convert.ToInt32(page) - 1;
int pageSize = rows;
var Results = db.AspNetUsers.Select(
a => new
a.Id,
a.UserName,
a.Email,
a.LockoutEnabled,
a.AccessFailedCount,
);
int totalRecords = Results.Count();
var totalPages = (int)Math.Ceiling((float)totalRecords / (float)rows);
if (sord.ToUpper() == "DESC")
Results = Results.OrderByDescending(s => s.Id);
Results = Results.Skip(pageIndex * pageSize).Take(pageSize);
else
Results = Results.OrderBy(s => s.Id);
Results = Results.Skip(pageIndex * pageSize).Take(pageSize);
var jsonData = new
total = totalPages,
page,
records = totalRecords,
rows = Results
;
return Json(jsonData, JsonRequestBehavior.AllowGet);
// TODO:insert a new row to the grid logic here
[HttpPost]
public string Create([Bind(Exclude = "Id")] AspNetUser obj)
//System.Diagnostics.Debug.WriteLine("Create");
string msg;
try
if (ModelState.IsValid)
db.AspNetUsers.Add(obj);
db.SaveChanges();
msg = "Saved Successfully";
else
msg = "Validation data not successfull";
catch (Exception ex)
msg = "Error occured:" + ex.Message;
return msg;
public string Edit(AspNetUser obj)
System.Diagnostics.Debug.WriteLine("Edit");
string msg;
try
if (ModelState.IsValid)
db.Entry(obj).State = EntityState.Modified;
db.SaveChanges();
msg = "Edit Successfully";
else
msg = "Validation data Edit not successfull";
catch (Exception ex)
msg = "Error occured Editing:" + ex.Message;
return msg;
public string Delete(int Id)
AspNetUser list = db.AspNetUsers.Find(Id);
db.AspNetUsers.Remove(list);
db.SaveChanges();
return "Deleted successfully";
查看：
</div>
<!-- end row -->
<!-- widget grid -->
<section id="widget-grid" class="">
<!-- row -->
<div class="row">
<!-- NEW WIDGET START -->
<article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<table id="jqgrid"></table>
<div id="pjqgrid"></div>
</article>
<!-- WIDGET END -->
</div>
<!-- end row -->
</section>
<!-- end widget grid -->
</div>
<!-- END MAIN CONTENT -->
@section pagespecific
<script type="text/javascript">
$(document).ready(function ()
pageSetUp();
jQuery("#jqgrid").jqGrid(
url: "/Settings/GetValues",
datatype: "json",
mtype: 'GET',
height: 'auto',
colNames: ['Id', 'UserName', 'Email', 'LockoutEnabled', 'AccessFailedCount'],
colModel: [
key: true,
hidden: true,
name: 'Id',
index: 'Id',
editable: true
,
key: false,
name: 'UserName',
index: 'UserName',
editable: true
,
key: false,
name: 'Email',
index: 'Email',
editable: true
,
key: false,
name: 'LockoutEnabled',
index: 'LockoutEnabled',
editable: true
,
key: false,
name: 'AccessFailedCount',
index: 'AccessFailedCount',
editable: true
],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pjqgrid',
sortname: 'id',
toolbarfilter: true,
viewrecords: true,
sortorder: "asc",
gridComplete: function ()
var ids = jQuery("#jqgrid").jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++)
var cl = ids[i];
be = "<button class='btn btn-xs btn-default' data-original-title='Edit Row' onclick=\"jQuery('#jqgrid').editRow('" + cl + "');\"><i class='fa fa-pencil'></i></button>";
se = "<button class='btn btn-xs btn-default' data-original-title='Save Row' onclick=\"jQuery('#jqgrid').saveRow('" + cl + "');\"><i class='fa fa-save'></i></button>";
ca = "<button class='btn btn-xs btn-default' data-original-title='Cancel' onclick=\"jQuery('#jqgrid').restoreRow('" + cl + "');\"><i class='fa fa-times'></i></button>";
//ce = "<button class='btn btn-xs btn-default' onclick=\"jQuery('#jqgrid').restoreRow('"+cl+"');\"><i class='fa fa-times'></i></button>";
//jQuery("#jqgrid").jqGrid('setRowData',ids[i],act:be+se+ce);
jQuery("#jqgrid").jqGrid('setRowData', ids[i],
act: be + se + ca
);
,
editurl: '/Settings/Edit',
caption: "Users that have access to the site:",
multiselect: true,
autowidth: true
);
// "/Settings/Create" is being called in the controller. I put in a
// break to test it.
jQuery("#jqgrid").jqGrid("navGrid", "#pjqgrid", /*navGrid options*/ ,
/*navGrid Edit*/ , url: '/Settings/Create' , url: '/Settings/Delete' );
jQuery("#jqgrid").jqGrid('inlineNav', "#pjqgrid");
/* Add tooltips */
$('.navtable .ui-pg-button').tooltip(
container: 'body'
);
// remove classes
$(".ui-jqgrid").removeClass("ui-widget ui-widget-content");
$(".ui-jqgrid-view").children().removeClass("ui-widget-header ui-state-default");
$(".ui-jqgrid-labels, .ui-search-toolbar").children().removeClass("ui-state-default ui-th-column ui-th-ltr");
$(".ui-jqgrid-pager").removeClass("ui-state-default");
$(".ui-jqgrid").removeClass("ui-widget-content");
// add classes
$(".ui-jqgrid-htable").addClass("table table-bordered table-hover");
$(".ui-jqgrid-btable").addClass("table table-bordered table-striped");
$(".ui-pg-div").removeClass().addClass("btn btn-sm btn-primary");
$(".ui-icon.ui-icon-plus").removeClass().addClass("fa fa-plus");
$(".ui-icon.ui-icon-pencil").removeClass().addClass("fa fa-pencil");
$(".ui-icon.ui-icon-trash").removeClass().addClass("fa fa-trash-o");
$(".ui-icon.ui-icon-search").removeClass().addClass("fa fa-search");
$(".ui-icon.ui-icon-refresh").removeClass().addClass("fa fa-refresh");
$(".ui-icon.ui-icon-disk").removeClass().addClass("fa fa-save").parent(".btn-primary").removeClass("btn-primary").addClass("btn-success");
$(".ui-icon.ui-icon-cancel").removeClass().addClass("fa fa-times").parent(".btn-primary").removeClass("btn-primary").addClass("btn-danger");
$(".ui-icon.ui-icon-seek-prev").wrap("<div class='btn btn-sm btn-default'></div>");
$(".ui-icon.ui-icon-seek-prev").removeClass().addClass("fa fa-backward");
$(".ui-icon.ui-icon-seek-first").wrap("<div class='btn btn-sm btn-default'></div>");
$(".ui-icon.ui-icon-seek-first").removeClass().addClass("fa fa-fast-backward");
$(".ui-icon.ui-icon-seek-next").wrap("<div class='btn btn-sm btn-default'></div>");
$(".ui-icon.ui-icon-seek-next").removeClass().addClass("fa fa-forward");
$(".ui-icon.ui-icon-seek-end").wrap("<div class='btn btn-sm btn-default'></div>");
$(".ui-icon.ui-icon-seek-end").removeClass().addClass("fa fa-fast-forward");
)
$(window).on('resize.jqGrid', function ()
$("#jqgrid").jqGrid('setGridWidth', $("#content").width());
)
</script>
【问题讨论】：
在你的 action 方法中设置一个断点，看看它是否按需要执行。 我为“create”操作方法设置了断点，它被调用了。 所以调用了Create方法。 db.SaveChanges(); 在里面被调用了吗？
@Nick.McDermaid 是的。
假设 obj 已填充，下一步是运行分析器跟踪并跟踪插入。在这个阶段，我假设发生了数据库更改，但这不是您所期望的。换句话说，您用来测试的任何 SQL 都不正确。您究竟是如何确定没有插入记录的？
【参考方案1】：
我在Create 操作的代码中看不到任何明显的错误。可能需要调试代码才能找到原因。大多数情况下，对创建项目很重要的一件事是：Create 的 obj 参数的属性。如果属性正确，则 jqGrid 接口可以正常工作，并且问题的根源可能仅在服务器端（您的 C# 代码和实体框架）。一件事，我会建议你：替换行
db.AspNetUsers.Add(obj);
与
db.AspNetUsers.Add(new AspNetUser UserName = obj.UserName, Email = obj.Email );
此外，我建议您将您使用的非常旧的版本 4.4.4（将近 5 年）升级到“免费 jqGrid”的当前版本 (4.15.2)。如果你使用 NuGet 包，那么你应该卸载它并安装包free-jqGrid。升级到免费 jqGrid 后，您可以使用许多新功能。例如，免费的 jqGrid 包含对 Font Awesome 4.x 的原生支持，这将简化您的代码。也不需要使用gridComplete。我建议您立即从服务器（来自GetValues）返回所有数据，并使用loadonce: true, forceClientSorting: true 选项。它将简化您的代码。对于其他新功能，我建议您从 here 开始，the wiki articles 和 READMEs 到所有以前发布的版本。例如https://jsfiddle.net/OlegKi/su7ebs65/ 演示了一些搜索功能。
【讨论】：
请原谅我的 nube 问题，但是在我卸载旧的 JqGrid 并使用 NuGet 安装新版本之后。我收到了 3257 个错误，其中大部分是“Build:';'预期的”。它似乎都来自 free-jqgrid.d.ts 文件。有安装文档吗？ 我刚刚按照您的建议 here 从我的项目中排除了 free-jqgrid.d.ts 文件。我留下我的评论而不是删除它，以防其他人遇到这种情况。以上是关于JqGrid向数据库添加新行的主要内容，如果未能解决你的问题，请参考以下文章
JqGrid 根据另一个 jqgrid 下拉列表中的选定数据在下拉列表中添加值