asp.net – 在MVC 4.0中使用部分视图中的节

当我遇到需要在特定元素上初始化jQuery ui的情况时,我想在部分视图中包含脚本.它确实属于部分而不是包含页面或布局.

据说有一种方法可以在MVC 4中完成,但我似乎无法找到任何信息.

解决方法

<ul>
    <li>
        @Ajax.ActionLink("Partial One","PartialOne",ajaxOptions: new AjaxOptions
                     {
                         HttpMethod = "Get",InsertionMode = InsertionMode.Replace,UpdateTargetId = "container",OnSuccess = "loadScriptsDynamically('PartialOne')"
                     })
    </li>
    <li>
        @Ajax.ActionLink("Partial Two","PartialTwo",OnSuccess = "loadScriptsDynamically('PartialTwo')"
                     })
    </li>
</ul>

<div id="container">
</div>

@section scripts
{
    <script src="@Url.Content("~/Scripts/app/Container.js")"></script>
    <div id="dynamicScripts"
         data-partial-one="@Url.Content("~/Scripts/App/PartialOne.js")"
         data-partial-two="@Url.Content("~/Scripts/App/PartialTwo.js")">
    </div>
}

来自控制器类的代码

public PartialViewResult PartialOne()
    {
        return PartialView("_PartialOne");
    }

    public PartialViewResult PartialTwo()
    {
        return PartialView("_PartialTwo");
    }

Container.js文件包含将为不同的部分视图动态加载必要脚本的逻辑.

function loadScriptsDynamically(name) {
    var script = document.createElement('script');
    var dynamicScriptsDiv = document.getElementById('dynamicScripts');
    var dynamicScriptDivJQuery = $('#dynamicScripts');
    dynamicScriptDivJQuery.empty();
    if (name === 'PartialOne') {
        script.src = dynamicScriptDivJQuery.data('partial-one');
        dynamicScriptsDiv.appendChild(script);
    } else if (name === 'PartialTwo'){
        script.src = dynamicScriptDivJQuery.data('partial-two');
        dynamicScriptsDiv.appendChild(script);
    }
}

由于某些限制,我们无法使用jQuery将脚本元素附加到div.但我们可以使用一些老式的JavaScript代码来创建一个脚本元素并将其附加到dynamicScriptsDiv.请注意我正在访问我以前附加到dynamicScriptsDivusing的脚本路径使用一些数据属性,因为我们的MVC应用程序在IIS服务器中运行,我们不想对它们进行硬编码.

动态加载脚本后附加到事件是我们的下一个挑战.通过使用立即调用函数,我能够注册所有我的事件绑定代码和我必须使用以下代码执行的任何初始化逻辑.

(function initPartialOne() {
    $('#myButton').click(function() {
        setLabelText();
    });
})();

function setLabelText() {
    $('#myLabel').text('One was clicked');
}

最后是我的部分观点之一的代码.

<label id="myLabel">[Message]</label>
<input type="button" id="myButton" value="Click me partial one"/>

（编辑：南阳站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!