Question

我在向模态对话框中添加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请求的任何其他位置调用模式。

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

Answer 1

我对@Html.RenderPartial()命令如何运作有一个基本的误解。我不知道如何从主视图访问局部视图的元素。而不是从局部视图中实例化颜色选择器，如果部分视图变为标记后，我能够成功地从索引中初始化颜色选择器。这样可以确保在对话框中只放置一个颜色选择器。

此解决方案避免了部分视图运行其javascript两次的问题。我假设MVC（在此上下文中）总是运行部分两次，一次在初始标记上，一次在实际创建对话框时再次运行。我想知道是否有办法指示Visual Studio 不运行部分视图，直到我告诉它？

MVC3部分视图模式对话框调用两次

1 个答案: