1

ユーザーがハイパーリンクをクリックすると、バックグラウンド プロセスを実行したいと考えています。それを実行する前に、jQuery ダイアログボックス (フォーム) を使用してユーザーの許可を求めたいと考えています。ユーザーがフォームで「OK」をクリックすると、jQuery ajax を使用してアクションを実行したいと考えています。プロセスが失敗した場合、そのポップアップを「エラー」で更新したいと思います。jQuery AJAXを使用してasp.net MVCでこれを行うにはどうすればよいですか。以下は私が試したコードです

これが私のMVC Ajax開始フォームコードです

@using (Ajax.BeginForm("Action1", "Controller1", new AjaxOptions { UpdateTargetId = "eProcess" }, new { id = "eProcess" }))
{
    @Html.Hidden("eID", eId);                                                                                  
    @Html.Hidden("processName", "processName");                                                                                                                                                
    <div class="hide" id="dialog" title="Confirmation Required">
        Are you sure you want to update this record? <br />                       
        <input type="button" value="Hit" id="btnHit" />                    
    </div>    
}

以下は私のダイアログコードです

$("#dialog").dialog
({
    dialogClass: "ee-detail-info",
    closeOnEscape: false,
    height: 200,
    width: 300,
    modal: true,
    autoOpen: false,
    open: function (event, ui) {

        $("#btnHit").click(function () {

            $('#processName')[0].value = processName;
            document.forms.eProcess.submit();  

        });
        }

});

.ajax メソッドを使用してみましたが、それでも完全なポストバックを行っています。jQueryファイルを再確認しました。それらはページ上で正しくリンクされています。

$("#eProcess")[0].submit(function () {
    $.ajax({
        url: $("#eProcess")[0].action,
        success: function (res) {
            alert("Success");
        }
    });
});

アップデート

あなたのソリューションで動作するようになりました。コードにバグがありました。

4

1 に答える 1

2

jQueryファイルを再確認しました。それらはページ上で正しくリンクされています。

jquery.unobtrusive-ajax.jsjquery の後にスクリプトが含まれていることを確認してください。

この場合、.click イベントを手動でサブスクライブする必要はありません。そのままにAjax.BeginFormして、AJAX 要求を送信します。

に依存したくない場合はAjax.BeginForm、単純に通常の形式を記述します。

@using (Html.BeginForm("Action1", "Controller1", FormMethod.Post, new { id = "eProcess" }))
{
    @Html.Hidden("eID", eId);                                                                                  
    @Html.Hidden("processName", "processName");                                                                                                                                                
    <div class="hide" id="dialog" title="Confirmation Required">
        Are you sure you want to update this record? <br />                       
        <input type="button" value="Hit" id="btnHit" />                    
    </div>    
}

その後：

$(function() {
    $("#dialog").dialog({
        dialogClass: "ee-detail-info",
        closeOnEscape: false,
        height: 200,
        width: 300,
        modal: true,
        autoOpen: false
    });

    $('#dialog').on('submit', '#eProcess', function() {
        // here you could set the value of the the hidden field
        // if you wanted to pass some additional information
        // to the controller

        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function(result) {
                $('#eProcess').html(result);
            }
        });
        return false;
    }); 
});
于 2013-07-20T09:32:46.133 に答える