MVC局部視圖使用ajax

Question

我做了一個MVC應用程序，我試圖爲用戶點擊「細節」按鈕時創建一個局部視圖。我目前有一個局部視圖用於「刪除」按鈕。當我使用斷點逐句通過我的代碼時，它將我帶到了我的任務控制器，並進入了我的PartialViewResult方法，但是不再進一步。當我點擊「詳情」按鈕時，什麼也沒有發生。不知道這裏缺少什麼。

Index.cshtml

 <span class="btn btn-success btn-sm" onclick="showTask('@item.TaskId')">Details</span> 

<div id="Detail"></div> 

<Script> 
     function showTask(showTaskID) { 

     $.ajax({ 
      url: '@Url.Action("ShowTaskByID")', 
      data: { id: showTaskID }, 
      success: function (data) { 
       $('#Detail').hide(); 
       $('#Detail').html(data); 
       $('#Detail').animate({ 
        opacity: 1, 
        left: "+=50", 
        height: "toggle" 
       }, 3000, function() { 
        // Animation complete. 
       }); 

       $('#Edit').hide(); 
       $('#Delete').hide(); 
      }, 
      error: function (data) { $('#Details').html('<h3>Error</h3>'); } 
     }); 
    } 



</script> 

_ShowTask

@model IEnumerable<WebApplication4.Models.Task> 
<div class="panel panel-info"> 
    <div class="panel-heading" style="font-size:20px"> 
     <h2>List of Actors</h2> 
    </div> 
    <p> 
     @Html.ActionLink("Create New Task", "CreateTask", null, new { @class = "btn btn-sm btn-primary" }) 
    </p> 
    @if (Model.Any()) 
    { 
     <table class="table table-condensed table-striped"> 
      <tr> 
       <th> 
        @Html.DisplayNameFor(model => model.First().TaskName) 
       </th> 
       <th> 
        @Html.DisplayNameFor(model => model.First().StartDate) 
       </th> 
       <th> 
        @Html.DisplayNameFor(model => model.First().FinishDate) 
       </th> 
       <th></th> 
      </tr> 

      @if (Model != null) 
      { 
       foreach (var item in Model) 
       { 
        <tr> 
         <td> 
          @Html.DisplayFor(modelItem => item.TaskName) 
         </td> 
         <td> 
          @Html.DisplayFor(modelItem => item.StartDate) 
         </td> 
         <td> 
          @Html.DisplayFor(modelItem => item.FinishDate) 
         </td> 
         <td> 
          @Html.ActionLink("Edit", "EditTask", new { id = item.TaskId }, new { @class = "btn btn-info btn-xs" }) 
          @*<a onclick="showEditActor('@item.MovieID','@item.ActorID','@item.ActorName','@item.age')" class="btn btn-xs btn-info">Edit</a>*@ 
          @Html.ActionLink("Delete", "DeleteTask", new { id = item.TaskId }, new { @class = "btn btn-danger btn-xs" }) 
         </td> 
        </tr> 
       } 
      } @* closing of if *@ 
     </table> 
    } 
    else 
    { 
     <div><strong>No Actors in Movie</strong></div> 
    } 
</div> 

任務控制器

public ActionResult Details(int id) 
{ 
    var q = db.Tasks.Find(id); 
    if (q == null) 
    { 
    } 
    return View(q); 
} 

public PartialViewResult ShowTaskByID(int id) 
{ 

    return PartialView("_ShowTask", db.Tasks.Find(id).TaskName); 
} 

Answer 1

HTML

<input id="btnDetail" type="button" class="btn btn-success btn-sm" value="Details" /> 

<div id="Detail"></div> 

JS

$('#btnDetail').on('click', function(){ 
    $.ajax({ 
     url: '@Url.Action("ShowTaskByID")', 
     data: { id: showTaskID }, 
    }).done(function (data) { 
     $('#Detail').html(data); 
     $('#Detail').animate({ 
      opacity: 1, 
      left: "+=50", 
      height: "toggle" 
     }, 3000, function() { 
      // Animation complete. 
     }); 

     $('#Edit').hide(); 
     $('#Delete').hide(); 
    }).fail(function (jqXHR, textStatus) { 
     $('#Detail').html('<h3>Error :' + jqXHR.responseText + '</h3>'); 
    }); 
}); 

C＃

public ActionResult Details(int id) 
{ 
    try 
    { 
     var task = db.Tasks.Find(id); 
    } 
    catch(HttpException e) 
    { 
     throw new HttpException(404, "Task not found.") 
    } 

    return View(task); 
} 

public PartialViewResult ShowTaskByID(int id) 
{ 
    try 
    { 
     var tasks = db.Tasks.Find(id).TaskName;  
    } 
    catch(HttpException e) 
    { 
     throw new HttpException(404, "Task nout found.") 
    } 

    return PartialView("_ShowTask", tasks); 
} 

如果你期待的任務列表試試這個：

public PartialViewResult ShowTaskByID() 
{ 
    try 
    { 
     var tasks = db.Tasks.ToList(); 
    } 
    catch(HttpException e) 
    { 
     throw new HttpException(404, "Task nout found.") 
    } 

    return PartialView("_ShowTask", tasks); 
} 

或者相反，你可以編輯_ShowTask模型類型到任務：

@model WebApplication4.Models.Task 

<div class="panel panel-info"> 
    <div class="panel-heading" style="font-size:20px"> 
     <h2>List of Actors</h2> 
    </div> 
    <p> 
     @Html.ActionLink("Create New Task", "CreateTask", null, new { @class = "btn btn-sm btn-primary" }) 
    </p> 
    @if (Model.Any()) 
    { 
     <table class="table table-condensed table-striped"> 
      <thead> 
       <tr> 
        <th> 
         @Html.DisplayNameFor(model => model.TaskName) 
        </th> 
        <th> 
         @Html.DisplayNameFor(model => model.StartDate) 
        </th> 
        <th> 
         @Html.DisplayNameFor(model => model.FinishDate) 
        </th> 
        <th></th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td> 
         @Html.DisplayFor(model => model.TaskName) 
        </td> 
        <td> 
         @Html.DisplayFor(model => model.StartDate) 
        </td> 
        <td> 
         @Html.DisplayFor(model => model.FinishDate) 
        </td> 
        <td> 
         @Html.ActionLink("Edit", "EditTask", new { id = Model.TaskId }, new { @class = "btn btn-info btn-xs" }) 
         @*<a onclick="showEditActor('@item.MovieID','@item.ActorID','@item.ActorName','@item.age')" class="btn btn-xs btn-info">Edit</a>*@ 
         @Html.ActionLink("Delete", "DeleteTask", new { id = Model.TaskId }, new { @class = "btn btn-danger btn-xs" }) 
        </td> 
       </tr> 
      </tbody>  
      } @* closing of if *@ 
     </table> 
    } 
    else 
    { 
     <div><strong>No Actors in Movie</strong></div> 
    } 
</div> 

Answer 2

[HTTPGET] 標籤添加到您的public PartialViewResult ShowTaskByID(int id)

所以，它應該像結果：

[HttpGet] public PartialViewResult ShowTaskByID(int id)