여러 HttpPost 메서드를 사용하는 방법

MVC4에서 SQL 서버 compact에서 Webgrid로 이름과 나이를 포함하는 데이터를 표시하는 간단한 응용 프로그램을 만들었습니다. 나는 목적을 정렬하기위한 두 개의 버튼을 가지고있다. (나는 Webgrid에 기능이 이미 있지만 작업 목적을 위해 그것을하고있다.) 그런 다음 행을 편집하는 데 도움이 될 모든 행 옆에있는 편집 단추가 있습니다. 편집 단추를 클릭하면 텍스트 상자의 행 변경이 저장 및 취소 단추로 바뀝니다.이 단추는 JQuery를 사용하고 있습니다. 컨트롤러에서 나는 2 Actionresult 메서드 (INDEX & editRow)를 가지고 있는데 하나는 정렬 목적으로 클릭 할 때 호출되고 다른 하나는 편집을 위해 클릭 될 때 호출되지만 편집 버튼을 클릭 할 때마다 버튼 값을 묻는 INDEX가 호출됩니다. Null 포인터 예외를 던집니다. 문제를 해결할 때 도와주세요. 나는 사전에 내 코드를여러 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(); 
    }); 
})

출처

2013-07-18 Piyush

편집 버튼을 실제로 서버에 양식을 제출한다. 당신은 저장과 같은 문제에 직면하고 취소뿐만 아니라이 return false;을 시도 할 수 return false;

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

같은 시도 . 양식 게시의 기본 브라우저 동작이 중지됩니다.

출처

2013-07-18 12:46:47

답장을 보내 주셔서 감사합니다.하지만 저장 단추에 대한 ActionResult를 지정한 후에도 여기에 의문의 여지가 있습니다. 여전히 인덱스로 이동합니다. 왜냐하면 내가 저장 한 데이터베이스에서 업데이트 된 값을 얻을 수 있도록 저장 버튼을 클릭 할 때 양식을 제출해야하기 때문입니다. 누구나 똑같이 내 의심을 분명히 할 수 있을까요? – Piyush

저장 기능은 AJAX를 사용합니다. 즉, 페이지를 새로 고치지 않고 DB가 업데이트됩니다. 즉, 페이지에 이미 최신 (사용자가 입력 한) 페이지가 있으므로 색인을 클릭하여 최신 값을 가져올 필요가 없습니다. 추신 : 내 대답이 원래의 문제에 도움이된다면 받아 들일 수있는 답을 자유롭게 표시하십시오. –

DB가 업데이트되고 있지만 페이지에 표시되지 않습니다. 수동으로 페이지를 새로 고쳐 업데이트 된 값을 확인해야합니다. 나는 심지어 모든 데이터를 가져 오는 Index 액션으로 리다이렉션을 시도했지만 여전히 아무것도 가지고 있지 않다. 어쨌든 이걸 도와 줄 수 있니? – Piyush

여러 HttpPost 메서드를 사용하는 방법

답변

관련 문제