0

私は MVC3 を学習している最中であり@Ajax.Actionlink、ajax 呼び出しの jQuery メソッドを使用するように変換したい部分的なビューに次のようなものがありますが、よくわからない 2 つの主な問題があります。

  • パラメーターを 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);
}

これをやってみましたが、上記の問題に悩まされ続けています。私の試みの1つは、次のjQueryでした：

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

これをjQueryに変換するのに役立つポインタ@Ajax.ActionLinkは大歓迎です。

どうもありがとう、

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>
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 に答える