1

在我的模态对话框中添加一个 jQuery 组件时，我遇到了一个有趣的问题。jQuery ui 元素（简单的颜色插件，位于http://recursive-design.com/projects/jquery-simple-color/）被渲染了两次！经过调查，我发现模态对话框（即部分视图）本身被渲染了两次。这是我主要观点的相关代码：

// Here is the jQuery:
@section Head
{
    <script type="text/javascript">
        $(document).ready(function () {
            $("#addUserDialog").dialog({ modal: true, autoOpen: false, buttons: [
            {
                text: "Submit",
                click: function() {
                    $("#addUserForm").submit();
                }
            },
            {
                text: "Cancel",
                click: function() {
                    $(this).dialog("close");
                }
            }]
        });

        $('#addUser').click(function () {
            $("#addUserDialog").dialog("open");
        });
    </script>
}

// And here is the rendering of the partial view:
<div id="addUserDialog" title="Add User" style="display:none">
    @Html.Partial("AddUserView", ViewData["user"])
</div>

局部视图模式对话框在这里：

@model UserModel
<script type="text/javascript">
    $(function () {
        alert("addUser");
        $.validator.unobtrusive.parse("#addUserForm");
        $(".colorPicker").simpleColor();
    });

    var closeAddUserDialog = function () {
        $("#addUserDialog").dialog("close");
    };
</script>

@using (@Ajax.BeginForm("addUser",
                        "OnCallControl",
                        new AjaxOptions
                        {
                            HttpMethod = "Post",
                            InsertionMode = InsertionMode.Replace,
                            UpdateTargetId = "userTable",
                            OnSuccess = "closeAddUserDialog"
                        },
                        new { id = "addUserForm" }))
{
    ... // Other form inputs
    <input class="colorPicker" value="#cc3333" />
}

首次打开页面时，警报语句会出现两次。有趣的现象：我有另一个格式相同的模态对话框，带有类似的警报语句（例如alert("editUser");），两个警报语句按顺序出现两次（addUser，editUser，addUser，editUser）。

我怀疑我在标题和局部视图中合并 jQuery 的方法很糟糕，但我不知道这是否是导致局部视图中的 jQuery 函数执行两次的原因。有没有人知道为什么会这样？如果我的怀疑是正确的，我该如何纠正这种情况？

附加信息：

我确信这个问题来自索引视图或部分对话框视图中的某个地方，因为在视图的初始 GET 请求中没有从其他任何地方调用模式。

当我将对话框声明移动到单击事件函数（替换dialog("open")命令，autoOpen: false删除选项）时，在初始 GET 上该对话框仅发生一次警报。重复的 jQuery colorPicker 小部件令人费解地仍然存在。

4

1 回答 1

0

我对命令的运作方式存在根本性的误解@Html.RenderPartial()。我不知道如何从主视图访问局部视图的元素。如果在部分视图转换为标记之后完成，我可以从索引中成功初始化颜色选择器，而不是从部分视图中实例化颜色选择器。这可确保对话框中仅放置一个颜色选择器。

此解决方案规避了部分视图运行其 javascript 两次的问题。我假设 MVC（在这种情况下）总是通过部分运行两次，一次是在初始标记上，一次是在实际创建对话框时。我想知道是否有一种方法可以指示 Visual Studio在我告诉它之前不要运行局部视图？

于 2012-07-27T13:16:21.347 回答