將@ Ajax.ActionLink轉換爲jQuery

我正在學習MVC3的過程中，並且在局部視圖中我有以下@Ajax.Actionlink，我想轉換爲使用ajax調用的jQuery方法，但是我有兩個主要問題我不能弄清楚：將@ Ajax.ActionLink轉換爲jQuery

如何獲取參數到ajax調用。（userID很好，因爲它在部分視圖的ViewModel中，但我看不到如何從子集合的實例中獲取customerID。）
如何將局部視圖返回到指定的div。（當我嘗試這只是重定向到局部視圖，而目前@Ajax.ActionLink不正確更新專區）

下面是所有的（我認爲）的相關代碼：

局部視圖

@model ..snip../CustomerViewModel 

<div id="updatedablediv"> 
<table class="customers" style="width: 50%"> 
    <thead> 
     <tr> 
      <th> 
       Name 
      </th> 
      <th> 
       Actions 
      </th> 
     </tr> 
    </thead>  
    <tbody> 
    @if (Model != null) 
    { 
     foreach (Customer item in Model.Customers) 
     { 
      <tr id="[email protected]"> 
       @Html.HiddenFor(i => item.CustomerID) 
       <td> 
        @Html.DisplayTextFor(i => item.Name) 
       </td> 
       <td> 
        @Ajax.ActionLink("Delete", "DeleteCustomer", "MyController", new { userID = Model.UserID, customerID = item.CustomerID }, 
         new AjaxOptions() { UpdateTargetId = "updatedablediv", HttpMethod = "Get" }, new { @class = "standardbutton" }) 
       </td>  
      </tr> 
      } 
     }  
     </tbody>  
    </table> 
</div>

控制器動作

[HttpGet] 
public PartialViewResult DeleteCustomer(int userID, int customerID) 
{ 
    try 
    { 
     //Delete code 
    } 
    catch (DataException) 
    { 
     ModelState.AddModelError("", "Unable to save changes."); 
    } 

    CustomerViewModel returnViewModel = new CustomerViewModel() 
    { 
     UserID = userID, 
     Customers = repository.Customers 
    }; 

    return PartialView("CustomerPartial", returnViewModel); 
}

我已經嘗試過這樣做，但我不斷遇到上述問題。我的一個嘗試的是用下面的jQuery：

$("#buttonid").click(function(){ 
    var loadUrl = $('#buttonid').attr('href'); 
    $("#updatedablediv") 
     .html(DeleteCustomer) 
     .load(loadUrl, {userID: @model.UserID); 
});

任何指針，以幫助我這個轉換成@Ajax.ActionLink jQuery的，將不勝感激。

非常感謝，

更新HTML

這是一個<tr>的一個實例，在我的局部視圖的HTML。

<tr id="customer-id-1003"> 
    <input id="item_CustomerID" name="item.CustomerID" type="hidden" value="1003" /> 
    <td> 
     James 
    </td> 
    <td> 
     <a class="standardbutton" data-ajax="true" data-ajax-method="Get" data-ajax-mode="replace" data-ajax-update="#updatedablediv" href="/MyController/DeleteCustomer?userID=12&amp;customerID=1003">Delete</a> 
    </td>  
</tr>

來源

2012-09-13 XN16

這將是，如果你非常有幫助HTML代碼在瀏覽器中發佈時發佈。這將允許任何不熟悉ASP.NET的人正確回答您的問題。 – ThiefMaster

我按照你的建議完成了併發布了HTML的一部分，希望這是所需的部分！ – XN16

生成的鏈接的屬性給你的一切，你需要正確地執行AJAX請求：

<a class="standardbutton" 
    data-ajax="true" 
    data-ajax-method="Get" 
    data-ajax-mode="replace" 
    data-ajax-update="#updatedablediv" 
    href="/MyController/DeleteCustomer?userID=12&amp;customerID=1003" 
>

因此，讓我們做到這一點：

$('.standardbutton[data-ajax="true"]').click(function(e) { 
    e.preventDefault(); 
    var $this = $(this); 
    $.ajax({ 
     method: $this.data('ajaxMethod').toUpperCase(), 
     cache: false, 
     url: $this.attr('href'), 
     dataType: 'html', 
     success: function(resp) { 
      // this assumes that the data-ajax-mode is always "replace": 
      $($this.data('ajaxUpdate')).html(resp); 
     } 
    }); 
});

來源

2012-09-13 16:02:05 ThiefMaster

我忘了添加preventDefault，那個jQuery的內容來自內存！問題仍然存在，我不知道如何傳遞模型的子對象的第二個參數。謝謝。 – XN16

答覆已更新。雖然沒有測試過 – ThiefMaster

將@ Ajax.ActionLink轉換爲jQuery

回答

相關問題