0

我正在学习 MVC3 并且我@Ajax.Actionlink在部分视图中有以下内容，我想将其转换为使用 ajax 调用的 jQuery 方法，但是我有两个主要问题我不太清楚：

  • 如何将参数输入到ajax调用中。（userID 很好，因为它在部分视图的 ViewModel 中，但我看不到如何从子集合的实例中获取 customerID。）
  • 如何将部分视图返回到指定的 div。（当我尝试这个时，它只是重定向到部分视图，而当前@Ajax.ActionLink确实正确更新了 div。）

以下是所有（我认为）相关代码：

局部视图

@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="customer-id-@item.CustomerID">
                @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>这是我部分视图中 a 实例的 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>
4

1 回答 1

1

生成的链接的属性为您提供正确执行 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-13T16:02:05.997 回答