1

データを入力するための部分的なビューを表示するjqueryダイアログを作成しました。

アクションリンクを作成しました：

    @Html.ActionLink("Add New Service Provider", "PartialNewCust", "Customer", null,    new { @class = "addServiceProviderLink" })

私はコントローラーアクションを持っています：

public ActionResult PartialNewCust()
        {
        return PartialView();
        }

そして、div / jQueryコード：

<div id="AddServiceProvDialog" title="Add Service Provider"></div>


<script type="text/javascript">
var linkObj;
$(function () {
    $(".addServiceProviderLink").button();

    $('#AddServiceProvDialog').dialog(
    {
        autoOpen: false,
        width: 400,
        resizable: false,
        modal: true,
        buttons:
        {
            "Add": function () {
                $("#addProviderForm").submit();
            },
            "Cancel": function () {
                $(this).dialog("close");
            }
        }
    });

    $(".addServiceProviderLink").click(function () {
        linkObj = $(this);
        var dialogDiv = $('#AddServiceProvDialog');
        var viewUrl = linkObj.attr('href');
        $.get(viewUrl, function (data) {
            dialogDiv.html(data);
            //validation
            var $form = $("#addProviderForm");
            // Unbind existing validation
            $form.unbind();
            $form.data("validator", null);
            // Check document for changes
            $.validator.unobtrusive.parse(document);
            // Re add validation with changes
            $form.validate($form.data("unobtrusiveValidation").options);
            //open dialog
            dialogDiv.dialog('open');
            return false;
        });

    });

});

部分ビューは正常にレンダリングされますが、新しいページが開き、モーダルダイアログとして表示されません。

私は何を間違っているのですか。

ちなみに、オートコンプリートコードもjQuery日時ピッカーで機能していません...

$(document).ready(function() 
{
$(".date").datepicker();
}
);


$(document).ready(function () {
$("#CustByName").autocomplete(
    {
        source: function (request, response) {
            $.ajax(
            {
                url: "/Cases/FindByName", type: "GET", dataType: "json",
                data: { searchText: request.term, maxResults: 10 },
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    response($.map(data, function (item) {
                        return {
                            label: item.CustomerName,
                            value: item.CustomerName,
                            id: item.CustomerID
                        }
                    })
                    );
                }
            });
        },
        minLength: 3
    });

});
4

1 に答える 1

2

私の推測ではreturn false、ボタンのクリック ハンドラーでステートメントを誤って配置したため、デフォルトの動作が期待どおりに妨げられず、リンクが単純にたどられた可能性があります。

$(".addServiceProviderLink").click(function () {
    ...
    $.get(viewUrl, function (data) {
        dialogDiv.html(data);
        ...
        dialogDiv.dialog('open');

        // this return statement should be in the "click" handler,
        // not in success callback of the .get() method !
        return false;
    });

});

コードは次のようになります。

$(".addServiceProviderLink").click(function () {
    ...
    $.get(viewUrl, function (data) {
        ...
    });

    // return here to prevent default click behavior
    return false;
});
于 2012-06-05T08:26:36.703 に答える