0

我在 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>
}

查询文件

$(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();
    });
})
4

1 回答 1

0

编辑按钮实际上是将您的表单提交到服务器。试试return false;喜欢

$('button[name=editbtn]').click(function () {
    var tr = $(this).parents('tr');
    tr.find('.edit-mode').toggle();
    tr.find('.display-mode').toggle();
    return false;
});

保存和取消可能会遇到同样的问题，return false;也可以试试。它将停止发布表单的默认浏览器行为。

于 2013-07-18T12:46:47.130 回答