【发布时间】：2013-07-18 20:46:47
【问题描述】：
我在 MVC4 中创建了一个简单的应用程序，其中我将来自 SQL 服务器的数据压缩到一个 Webgrid 中，其中包含 Name 和 Age 作为列。我有两个用于排序目的的按钮（我知道 Webgrid 中已经有功能，但仍然出于任务目的，我正在这样做）。然后我在每一行旁边都有一个编辑按钮，这将有助于编辑该行，只要我单击编辑按钮行更改为文本框并且编辑按钮被替换为保存和取消按钮，为此我正在使用 JQuery。在控制器中，我有 2 个 Actionresult 方法（INDEX 和 editRow），当我单击以进行排序时将调用一个，当单击以进行编辑时将调用其他方法，但是每当我单击编辑按钮时，都会调用 INDEX，它要求输入按钮值，因此它抛出空指针异常。请帮我解决问题。下面我提供我的代码 提前致谢
控制器类
public ActionResult Index()
{
var allEntries = from entry in db.task
select entry;
return View(allEntries.ToList());
}
[HttpPost]
public ActionResult Index(String button)
{
if (button.Contains("Name"))
{
var allSortedEntries=db.task.OrderBy(person => person.Name);
return View("Index",allSortedEntries.ToList());
}
else if (button.Contains("Age"))
{
var allSortedEntries = db.task.OrderBy(page => page.Age);
return View("Index", allSortedEntries.ToList());
}
return View();
}
[HttpPost]
public ActionResult EditRow(Task2 entry)
{
var updateentry = db.task.SingleOrDefault(pid => pid.id == entry.id);
updateentry.id = entry.id;
updateentry.Name = entry.Name;
updateentry.Age = entry.Age;
db.SaveChanges();
return RedirectToAction("Index", entry);
}
模型类
public class Task2
{
public int id { get; set; }
public String Name { get; set; }
public int Age { get; set; }
}
查看
<!DOCTYPE html>
@model IList<Task2Sorting.Models.Task2>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script type="text/javascript"
src="/Script/edit.js">
</script>
@{
ViewBag.Title = "Name List";
var grid = new WebGrid(source: Model,
rowsPerPage: 10);
}
<h2>Index</h2>
@using (Html.BeginForm())
{
<div id="grid">
@grid.GetHtml(columns: new[]
{
grid.Column(" ",format:@<text><div class="display-mode">
<input type="hidden" id="idtxt" value="@item.id"/></div>
<div class="edit-mode">
<input type="hidden" id="idhidden" value="@item.id"/></div></text>,canSort:false),
grid.Column("Name",format:@<text><div class="display-mode">@item.Name</div>
<div class="edit-mode">
<input type="text" id="nametxt" value="@item.Name" style="width:80px"/>
</div></text>,canSort:false),
grid.Column("Age",format:@<text><div class="display-mode">@item.Age</div>
<div class="edit-mode">
<input type="text" id="agetxt" value="@item.Age" style="width:80px"/>
</div></text>,canSort:false),
grid.Column("Action ",format:@<text>
<button class="display-mode" name="editbtn">Edit</button>
<button class="edit-mode" name="savebtn">Save</button>
<button class="edit-mode" name="cancelbtn">Cancel</button>
</text>,canSort:false),
})
</div>
<br />
<div>
@*<button id="sname" value="Name">Sort By Name</button>
<button id="aname" value="Age">Sort By Age</button>*@
<input type="submit" name="button" value="Sort By Name" id="sname"/>
<input type="submit" name="button" value="Sort By Age" id="aname"/>
</div>
}
JQuery 文件
$(function () {
$('.edit-mode').hide();
$('button[name=editbtn]').click(function () {
var tr = $(this).parents('tr');
tr.find('.edit-mode').toggle();
tr.find('.display-mode').toggle();
});
$('button[name=savebtn]').click(function () {
var tr = $(this).parents('tr');
var Name = tr.find("#nametxt").val();
var Age = tr.find("#agetxt").val();
var Id = tr.find("#idhidden").val();
tr.find("#name").text(Name);
tr.find("#age").text(Age);
tr.find('.edit-mode').toggle();
tr.find('.display-mode').toggle();
var Task2 =
{
"Id": Id,
"Name": Name,
"Age": Age
};
$.post("/Show/EditRow", Task2)
{
}
});
$('button[name=cancelbtn]').on('click', function () {
var tr = $(this).parents('tr');
tr.find('.edit-mode').toggle();
tr.find('.display-mode').toggle();
});
})
【问题讨论】：
标签： jquery asp.net-mvc-4