Question

我已经构建了一个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
    });

});

Answer 1

我的猜测是你错放了按钮点击处理程序中的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;
});

部分视图的jQuery对话框不是打开模态

1 个答案: