如何將json對象從jquery傳遞到mvc視圖

目前，我有一個列表視圖中顯示的所有待辦事項列表項的列表。我還爲列表中的每一行放置了Edit超鏈接。當我點擊編輯時，我使用jquery異步調用編輯操作，並希望顯示帶有在列表視圖頁面底部選擇的編輯視圖。如何將json對象從jquery傳遞到mvc視圖

下面是List.cshtml代碼 -

@using MvcToDoListItemsDemo.ViewModels 
@model TodoListViewModel 

<table> 
<thead> 
    <tr> 
     <th></th> 
     <th></th>   
     <th>TodoItem</th> 
     <th>Is Completed?</th> 
     <th>Target Date</th> 
     <th>Created Date</th> 
     <th>Completed Date</th> 
    </tr> 
</thead> 
<tbody>   
    @foreach (var item in Model.TodoListItems) 
    { 
     <tr>     
      <td>@Html.ActionLink("Edit", "Edit", new { id = item.Id }, new { @class = "edit", @id=item.Id })</td> 
      <td>@Html.ActionLink("Delete", "Delete", new { id = item.Id }, new { @class="delete", @id=item.Id })</td>     
      <td>@item.ActivityDescription </td> 
      <td>@item.IsCompleted </td> 
      <td>@item.ActivityDeadLine </td> 
      <td>@item.CreatedDate </td> 
      <td>@item.CompletionDate </td> 
     </tr>    
    }     
</tbody>  
</table>  
}

下面是編輯動作 -

public class TodoListController : Controller 
{ 
    [HttpGet] 
    public JsonResult Edit(int Id = 0) 
    {    
     var Item = _dbContext.TodoList.Find(Id); 
     if (Item == null) 
     { 
      return Json("No Data Found", JsonRequestBehavior.AllowGet); 
     } 
     else 
     {     
      return Json(Item,JsonRequestBehavior.AllowGet); 
     }    
    } 

    [HttpPost] 
    [ValidateAntiForgeryToken]   
    public ActionResult Edit(TodoListModel listItem) 
    {    
     TryUpdateModel(listItem); 
     if (ModelState.IsValid) 
     { 
      _dbContext.Entry<TodoListModel>(listItem).State = System.Data.EntityState.Modified; 
      _dbContext.SaveChanges(); 
      return RedirectToAction("Index"); 
     } 
     else return View(listItem);    
    } 
}

下面是將調用上述[HTTPGET]編輯動作asynchornously

的JavaScript

function OnEditClick(e) { 
var Id = e.target.id; 
if (Id != null) { 
    $.ajax({ 
     url: '/TodoList/Edit', 
     type: 'GET', 
     data: {Id: Id}, 
     dataType: 'json', 
     contentType: 'application/json; charset=utf-8', 
     success: function (result) {     
      //How to pass Json result to below Edit View. 
     }, 
     error: function() { alert('Error!'); } 
    }); 
} 
}

以下是Edit.cshtml局部視圖

<h2>Edit</h2> 

<fieldset> 
    <legend>TodoListModel</legend> 

    @Html.LabelFor(model => model.ActivityDescription) 
    @Html.EditorFor(model => model.ActivityDescription) 

    @Html.LabelFor(model => model.IsCompleted) 
    @Html.CheckBoxFor(model => model.IsCompleted) 

    @Html.LabelFor(model => model.ActivityDeadLine) 
    @Html.EditorFor(model => model.ActivityDeadLine) 

    <p> 
     <input type="submit" value="Save" /> 
    </p> 
    </fieldset>

所以我的問題是 - 我們如何通過將異步調用[HttpGet] Edit動作獲得的Json結果傳遞給Edit.cshtml？

請指教。可能嗎？

來源

2014-12-13 ram sudheer

真的不明確你想要的響應數據做什麼 – charlietfl 2014-12-13 13:43:26

你的AJAX請求返回JSON到'$ .ajax'回調，這是罰款。所以如果你設法調用Edit.cshtml，你想用生成的HTML做什麼？您可能想要忘掉JSON並執行類似'return PartialView（「Edit」，Item）;'所以您可以在ajax響應中獲得HTML並使用它來填充'div'或其他東西。 – Rhumborl 2014-12-13 13:43:41

我的觀點是我想重用Edit.cshtml。如果我們在javascript函數內部對html進行硬編碼，那麼它不能在我的項目中的其他任何地方重用。那麼，是否可以將JSON結果轉換爲C＃Model，並將Model對象從Jquery本身傳遞給Edit action？ – 2014-12-13 13:50:51

我已經使用下面的代碼解決了它。

@Ajax.ActionLink("Edit", "Edit", "TodoList", new { Id = item.Id }, new AjaxOptions 
      { 
       UpdateTargetId = "EditView", 
       HttpMethod = "Get"     
      }) 

and return PartialView("Item"); from the controller action.

來源

2014-12-13 23:50:24

如何將json對象從jquery傳遞到mvc視圖

回答

相關問題