如何在ASP .Net MVC中將剃鬚刀視圖中的ID傳遞給控制器​​的操作方法？

Question

所以，這裏有什麼困擾我與我的第一個演示MVC項目。在我的主視圖MyAction.cshtml中，單擊Student UserName超鏈接時，包含Student Details的部分視圖將在StudentDetails <div>中呈現。

這裏是我的主視圖：

@model IEnumerable<MvcApplication4.ViewModels.StudentViewModel> 
@{ 
    ViewBag.Title = "MyAction"; 
    Layout = "~/Views/Shared/_myTemplateLayoutPage.cshtml"; 
    } 

<script> 
    function RegisterClickHanders() { 

     var url = '@Url.Action("DisplayClickedView","Private")'; 
     $('.editDetails').click(function() { 
      var btnvalue = $('.editDetails').attr("value"); 
      var srchvalue = $(this).closest("tr").children().first().text(); 
      $('#Add_Update_Details').load(url, { searchText: btnvalue, searchValue: srchvalue }); 
     }); 
    } 
</script> 

<div id="content"> 
    <div id="mainpage"> 

    <h2>Registration Details</h2> 
     <ul> 
     @foreach(var item in Model) 
     { 
      <li> 
       @Ajax.ActionLink(item.UserName, 
       "GetUserDetails", 
       new { id = item.Student.StudentId }, 
        new AjaxOptions 
        { 
         UpdateTargetId = "StudentDetails", 
         InsertionMode = InsertionMode.Replace, 
         HttpMethod = "GET", 
         OnComplete="RegisterClickHanders" 
        } 
       ) 
      </li> 
     } 
     </ul> 
     <div id ="StudentDetails"></div> 
     <div id ="Add_Update_Details"></div> 
    </div> 

    <div id="sidebarbottom"></div> 
</div> 

這裏是獲取呈現局部視圖：

@model MvcApplication4.ViewModels.StudentViewModel 

<h2>Student Details</h2> 
<table border="1"> 
    <tr> 
     <th> 
      Name 
     </th> 
     <th> 
      User Name 
     </th> 
     <th> 
      Department 
     </th> 
     <th colspan="2"> 
      Actions 
     </th> 
    </tr> 
    <tr> 
     <td> 
      @Html.DisplayFor(x => x.StudentFullName) 
     </td> 
     <td> 
      @Html.DisplayFor(x => x.UserName) 
     </td> 
     <td> 
      @Html.DisplayFor(x => x.DepartmentName) 
     </td> 
     <td> 
      <input type="submit" class="editDetails" value="Edit Details" name="Command" /> 
     </td> 
     <td> 
      <input type="submit" class="addDetails" value="Add Details" name="Command" /> 
     </td> 
    </tr> 
</table> 

現在，我從StudentViewModel顯示詳細信息包含StudentId了。這裏是StudentViewModel類：

//View Model 
public class StudentViewModel 
{ 
    public Student Student { get; set; } 

    public int StudentId { get; set; } 

    [Display(Name = "StudentName")] 
    [Required(ErrorMessage = "Student Name cannot be left blank")] 
    public String StudentFullName 
    { 
     get 
     { 
      return String.Format("{0} {1}", Student.FirstName, Student.LastName); 
     } 
    } 

    public String UserName { get; set; } 

    [DataType(DataType.Password)] 
    public String Password { get; set; } 

    [DataType(DataType.Password)] 
    [Compare("Password",ErrorMessage="Passwords do not match")] 
    [Display(Name="Confirm Password")] 
    public String C_Password { get; set; } 

    [Display(Name = "Department Name")] 
    public String DepartmentName { get; set; } 

} 

但我只在視圖中顯示StudentFullName，UserName和DepartmentName。

 [HttpGet] 
    public PartialViewResult GetUserDetails(int? id) 
    { 
     StudentContext context = new StudentContext(); 

     var result = context.Students.Where(s => s.StudentId == id) 
      .Include(s => s.Department) 
      .Select(s => new StudentViewModel 
       { 
        Student = s, 
        UserName = s.UserName, 
        DepartmentName = s.Department.DepartmentName 
       }).First(); 

     return PartialView("_StudentDetails",result); 

    } 

但是，當點擊Edit Details按鈕時，我想爲該記錄呈現一個視圖。我所試圖做的是：

var url = '@Url.Action("DisplayClickedView","Private")'; 
     $('.editDetails').click(function() { 
      var btnvalue = $('.editDetails').attr("value"); 
      var srchvalue = $(this).closest("tr").children().first().text(); 
      $('#Add_Update_Details').load(url, { searchText: btnvalue, searchValue: srchvalue }); 
     }); 

但是，這會得到StudentFullName在srchvalue並基於該局部視圖將呈現。但是我希望它能夠基於StudentId本身呈現，而這在視圖中並不存在。

我怎樣才能通過StudentId到行動DisplayClickedView，以便更新或編輯偏偏根據id本身？

Answer 1

當我想有一個html屬性裏面的一些價值和訪問它在JavaScript，我喜歡用data-*屬性。

所以，你可以做這樣的事情：

<input type="submit" class="editDetails" value="Edit Details" name="Command" data-student-id="@Model.StudentId"/>

，並得到它在你的JavaScript：

var studentId = $('.editDetails').data("student-id"); 

這樣你就不必添加新的 「隱藏」表格中的列既不會更改按鈕的默認屬性。

Answer 2

<input type="hidden" name="id" value="@Model.Id" /> 

Answer 3

將StudentID添加到您的視圖模型中。然後你就可以通過剃刀其中包括學生證添加href到您的按鈕：

@model MvcApplication4.ViewModels.StudentViewModel 

<h2>Student Details</h2> 
<table border="1"> 
    <tr> 
     <th> 
      Name 
     </th> 
     <th> 
      User Name 
     </th> 
     <th> 
      Department 
     </th> 
     <th colspan="2"> 
      Actions 
     </th> 
    </tr> 
    <tr> 
     <td> 
      @Html.DisplayFor(x => x.StudentFullName) 
     </td> 
     <td> 
      @Html.DisplayFor(x => x.UserName) 
     </td> 
     <td> 
      @Html.DisplayFor(x => x.DepartmentName) 
     </td> 
     <td> 
      <a class="btn btn-default btn-sm" href="@Url.Content(~/Controller/Action")/@(x => x.StudentID)" type="submit">Edit</a> 
     </td> 
     <td> 
      <a class="btn btn-default btn-sm" href="@Url.Content(~/Controller/Action")/@(x => x.StudentID)" type="submit">Add Details</a> 
     </td> 
    </tr> 
</table> 

如果控制器和動作與您的控制器和動作所取代。