2013-07-18 23 views
0

我已经创造了MVC4一个简单的应用程序中,我从显示的SQL Server Compact数据到包含名字和年龄的柱子的WebGrid。我有两个按钮用于排序目的(我知道功能已经存在于Webgrid中,但仍然用于任务目的,我正在这样做)。然后我有编辑按钮旁边的每一行,这将有助于编辑行,只要我点击编辑按钮行更改为文本框和编辑按钮替换为保存和取消按钮为此目的我正在使用JQuery。在控制器我有2 ActionResult的方法(INDEX & editRow),当我点击排序的目的,并点击编辑章节目标时,其他将被调用,但每当我点击编辑按钮INDEX被称为该请求按钮值这么一个会叫的抛出空指针异常。请帮我解决问题。下面我为我提供的代码 由于事先如何使用多个HttpPost方法

控制器类

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

回答

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;那里。它会停止发布表单的默认浏览器行为。

+0

感谢您的答复,它的工作,但我甚至指定的保存按钮它仍然会指数的ActionResult后在这里有一个疑问。因为我需要在点击保存按钮时提交表单,以便从保存的数据库中获取更新后的值。任何人都可以澄清我对此的怀疑。 – Piyush

+0

您的保存功能使用AJAX,这意味着无需刷新页面即可更新数据库。即您无需点击索引即可获取最新值,因为该页面已具有最新(由用户输入)。 PS如果我的回答可以帮助你与你原来的问题,那么随意,以纪念我的回答是接受 –

+0

我的DB是得到更新,但它没有得到我必须手动刷新页面才能看到更新后的值显示在页面上。我甚至尝试重定向到索引操作,该操作获取所有数据,但仍然没有得到任何数据。无论如何,你可以帮助我解决这个问题。 – Piyush