1

MVC 4 で Ajax.Actionlink を使用してフォーム値 "CustomerID" (iedropdownlist で選択された値) を渡そうとしています。

<div class="editor-label">
    @Html.LabelFor(model => model.CustomerID, "Customer Name")
</div>
<div class="editor-field">
    @Html.DropDownListFor(model => model.CustomerID, Model.CustomersList, "-- Select --")
    @Html.ValidationMessageFor(model => model.CustomerID)
</div>

<div id="ApptsForSelectedDate">
   @Ajax.ActionLink("Click here to view appointments",
                    "AppointmentsList",
                    new {id = Model.CustomerID},
                    new AjaxOptions
                    {
                       UpdateTargetId = "ApptsForSelectedDate",
                       HttpMethod = "GET",
                       InsertionMode = InsertionMode.Replace,
                       LoadingElementId = "progress"
                    }
                  )            
</div>
<div id="progress">
   <img src="../../Images/ajax-loader.gif" alt="loader image" />
</div>

私のコントローラーメソッドは次のようになります。

public PartialViewResult AppointmentsList(int id)
{   ... }
4

1 に答える 1

3

を使用してAjax.BeginForm、ドロップダウンをフォーム内に配置する必要があります。このように、値は自動的に渡されます。

残念ながら、このマークアップをラップする別のフォームが既にある場合、html フォームをネストできないため、ネストされたフォームを使用することはできません。

この場合、通常のリンクを使用できます。

@Html.ActionLink(
    "Click here to view appointments", 
    "AppointmentsList", 
    null, 
    new { id = "applink" }
)

別の JavaScript ファイルでそれを AJAXify し、AJAX 要求が送信された時点で選択されたドロップダウン値を読み取って、必要な情報をクエリ文字列に追加します。

$(function() {
    $('#applink').click(function() {
        $('#progress').show();
        $.ajax({
            url: this.href,
            type: 'GET',
            data: { id: $('#CustomerID').val() },
            complete: function() {
                $('#progress').hide();
            },
            success: function(result) {
                $('#ApptsForSelectedDate').html(result);
            }
        });
        return false;
    });
});
于 2012-08-27T10:16:47.883 に答える