0

MVC4 で単純なアプリケーションを作成しました。このアプリケーションでは、SQL サーバー コンパクトからのデータを、列として Name と Age を含む Webgrid に表示しています。並べ替えの目的で 2 つのボタンがあります (機能が既に Webgrid にあることはわかっていますが、タスクの目的でそれを行っています)。次に、すべての行の横に編集ボタンがあり、行の編集に役立ちます。編集ボタンをクリックするとすぐに行がテキストボックスに変わり、編集ボタンが保存およびキャンセルボタンに置​​き換えられます。この目的のためにJQueryを使用しています。コントローラーには2つのActionresultメソッド(INDEXとeditRow)があり、1つはソート目的でクリックすると呼び出され、もう1つは目的を編集するためにクリックすると呼び出されますが、編集ボタンをクリックするたびにINDEXが呼び出され、ボタンの値を要求します。 Null ポインター例外をスローします。問題を整理するのを手伝ってください。

コントローラ クラス

 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();
    });
})
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 に答える