Question

我在MVC4中创建了一个简单的应用程序，其中我将数据从SQL Server compact显示到Webgrid中，其中包含Name和Age作为列。我有两个按钮用于排序目的（我知道功能已经存在于Webgrid中但仍然用于任务目的我正在这样做）。然后我在每行旁边都有编辑按钮，这将有助于编辑行，只要我点击编辑按钮行更改为文本框，编辑按钮替换为保存和取消按钮为此我使用JQuery。在控制器中我有2个Actionresult方法（INDEX＆amp; editRow）当我点击进行排序时将调用一个，当点击编辑pupose时会调用其他一个但是每当我点击编辑按钮时，会调用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();
    });
})

Answer 1

“编辑”按钮实际上是将表单提交给服务器。试试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;。它将停止发布表单的默认浏览器行为。

如何使用多个HttpPost方法

1 个答案: