Question

我在包含Javascript的对话框中加载了部分视图。当部分视图显示在对话框中时，部分视图显示，但部分视图中的任何Javascript都不存在。

我的问题：如何加载部分视图上的Javascript？

这是我的Javascript文件：

$(document).ready(function () 
{
    BindEvents();
});

function BindEvents()
{
    $('#Reassign').bind('click', function (event, ui) {
    GetReassign();
    return false;
    });

function GetReassign() {
    var checkeditems = $('input:checkbox[name="selectedObjects"]:checked').map(function () { return $(this).val() }).get().join(",");
    if (checkeditems) 
    {
        $("#DialogBox").dialog({
            width: 525,
            modal: true,
            draggable: false,
            resizable: false,
            open: function (event, ui) {
                $(this).load('/ControllerName/PartialView', function () {
                    var checkeditems = $('input:checkbox[name="selectedObjects"]:checked').map(function () { return $(this).val() }).get().join(",");
                    $('input.tasks').val(checkeditems);
                });
            },
            buttons: {
                "Cancel": function () {
                    $(this).dialog("close");
                }
            }
        });
    }
}

}

以下是我的部分视图：

@model SFB.SVP2.Objects.InterviewFollowup
@using SVP2UI.Helpers;

<script type="text/javascript">

    var ddlMailCodes;
    var ddlEmployees;

    function pageLoad() {
        ddlEmployees = $get("AssignedTo");
        ddlMailCodes = $get("MailCodes");
        $addHandler(ddlMailCodes, "change", bindOptions);
        bindOptions();
    }

    function bindOptions() {
        ddlEmployees.options.length = 0;
        var MC = ddlMailCodes.value;
        if (MC) {
            Sys.Net.WebServiceProxy.invoke(
                "/Services/BranchService.asmx",
                "Employees",
                false,
                { MC: MC },
                bindOptionResults
            );
        }
    }

    function bindOptionResults(data) {
        var newOption;
        for (var k = 0; k < data.length; k++) {
            newOption = new Option(data[k].LastName + ", " + data[k].FirstName, data[k].ADUser);
            ddlEmployees.options.add(newOption);
        }
    }

</script>

@using (Html.BeginForm("ReassignPost", "InterviewFollowup"))
{
    @Html.ValidationSummary(true)
    @Html.AntiForgeryToken()

<fieldset>
    <legend><strong>Re-Assign Task</strong></legend>

    <input type="hidden" value="" id="tasks" class="tasks" name="tasks" />

    <div style="display: table; float:left; position:relative; width: 50%">
        <div class="editor-label">
            Location:
        </div>
        <div class="editor-field">
            @Html.DropDownList("MailCodes", (IEnumerable<SelectListItem>)ViewData["MailCode"], "-- Select --")
            @Html.ValidationMessage("MailCodes")
        </div>
    </div>

    <div style="display: table; float:right; position:relative; width: 50%">
        <div class="editor-label">
            @Html.LabelFor(model => model.AssignedTo)
        </div>
        <div class="editor-field">
            <select name="AssignedTo" id="AssignedTo"></select>
        </div>
    </div>

    <div class="editor-label">
        Notes:
    </div>
    <div class="editor-field">
        <input type="text" name="Notes" id="Notes" />
        @Html.ValidationMessage("Notes") 
    </div>

    <p>
        <input type="submit" value="Submit" />
        <input type="button" value="Cancel" />
    </p>

</fieldset>
}

Answer 1

我建议你将所有的javascript外化到一个单独的js文件中。混合javascript和标记很糟糕。一旦你将其外化，你可以在显示部分后调用你喜欢的任何功能：

$("#DialogBox").dialog({
    width: 525,
    modal: true,
    draggable: false,
    resizable: false,
    open: function (event, ui) {
         $(this).load('/ControllerName/PartialView', function () {
             // OK, at this stage the partial is injected into the DOM
             // here you can call whatever function you like
             // for example the pageLoad(); function

             var checkeditems = $('input:checkbox[name="selectedObjects"]:checked').map(function () { return $(this).val() }).get().join(",");
             $('input.tasks').val(checkeditems);
        });
    },
    buttons: {
        "Cancel": function () {
            $(this).dialog("close");
        }
    }
});

哦，还有什么理由仍然使用MicrosoftAjax脚本吗？与jQuery相比，这些已经过时了，我很久以前就看到有人使用它们了。您可以使用jQuery完全调用启用脚本的.ASMX服务。

包含Javascript代码的JQuery Dialog加载页面

1 个答案: