如何在 MVC 3 中对 PartialView 加载执行 JavaScript 函数答案

【问题标题】：How to execute JavaScript function on PartialView load in MVC 3如何在 MVC 3 中对 PartialView 加载执行 JavaScript 函数
【发布时间】：2014-01-09 13:30:08
【问题描述】：

\\code
public ActionResult mapPartial(DataTable dt)
        {
            string strEvents = "[";
            foreach (DataRow row in dt.Rows)
            {
                strEvents += "[" + row["Lat"].ToString() + ", " + row["Long"].ToString() + ", " + "\"" +
                row["LastName"].ToString() + row["DateOfBirth"].ToString() + "\"" + "],";
            }
            strEvents = strEvents.Remove(strEvents.LastIndexOf(","));
            strEvents += "]";

            ViewBag.locpoints = strEvents;

            return PartialView(dt);
        }

//in the partial view page
<script type="text/javascript">
       function mapInit(Viewbag.locpoints) {

              var arr = $.parseJSON(Viewbag.locpoints);
              //more code which assigns a map to div map below 
       }
</script>

<div id="map" class="map"></div>

如何在加载局部视图时立即调用 JS 函数来渲染我的地图。控制器中的部分方法返回一个字符串，该字符串用作 JS 函数中的参数。希望这是有道理的。

【问题讨论】：

标签： javascript asp.net-mvc partial-views

【解决方案1】：

既然你似乎在使用 JQuery，为什么不呢：

<script type="text/javascript">
       $(document).ready(function(){
              var arr = $.parseJSON("@Viewbag.locpoints");
              //more code which assigns a map to div map below 
       });
</script>

我还更改了您引用 ViewBag 值的方式，因为您拥有它的方式，它不会是 JavaScript 中的字符串文字。

另外，作为旁注，请考虑使用 JSON 序列化程序将您的数据转换为 JSON。像上面那样手动操作被认为是一种不好的做法。

【讨论】：

如果这是一个部分，它可能在页面被包含时没有加载，所以$(document).ready()方法可能在部分被渲染时已经执行了。
@QuetiM.Porta 这是一个很好的观点。这只有在被常规视图而不是通过 AJAX 使用时才有意义。由于它接受DataTable，我不知道如何通过 AJAX 加载它。
我也可以在razor的部分视图中创建JSON代码，但是在获取JSON字符串之后如何调用JS函数

【解决方案2】：

定义它之后，你只需调用它。但是，您似乎在 JS 函数定义中包含了 MVC Viewbag 值。你应该在调用 JS 方法时传递这些值：

<script type="text/javascript">
       function mapInit(locPoints) {    
              var arr = $.parseJSON(locPoints);
              //more code which assigns a map to div map below 
       }
       mapInit(@(Viewbag.locpoints));
</script>

注意：这里假设你已经加载了 jQuery。

【讨论】：

是的Porta，但是加载部分视图时它如何自动执行JS功能
mapInit(@(Viewbag.locpoints)); 是对您的方法的调用。所以一旦这段代码被加载到浏览器中，它就会执行它。
试过它不起作用 - 加载部分视图时没有任何显示。
对于我在另一篇文章中读到的内容（并且亲身体验过），您不能在局部视图中使用部分。它们根本不起作用

【解决方案3】：

考虑使用 onSuccess Ajax 选项并在编写 jquery 的地方连接一个 javascript 函数。例如，您在 mainView 中编写了以下脚本，该脚本调用了部分视图。假设您想要在单击局部视图中的锚标记时执行某些操作

var fromPartial=function()
            {
                var v = $(this).closest("div");
                var mId = v.attr('id');
                if (mId == 'divDetail') {
                    event.preventDefault();
                    //what you want to achieve
                }
            }

现在在您的局部视图中，锚标记的创建如下所示

           @Ajax.ActionLink("Select", "AssignSpeaker", new { 
        conferenceId = ViewBag.ConferenceId, sessionId = session.Id },
                                 new AjaxOptions() { HttpMethod="Get",
     InsertionMode= InsertionMode.Replace, UpdateTargetId="yourTarget",
 OnSuccess="fromPartial" })

【讨论】：

【解决方案4】：

我们已经实现了一个更简单的解决方案。

@RenderSection("scripts", required: false)（和Jquery等）之后的_Layout.cshtml

<script>
    $(document).ready(function () { if (typeof partialScript !== "undefined") partialScript();});
</script>

那么，在你的部分观点中：

<script type="text/javascript">
function partialScript() {
    alert("hi");
}
</script>

这确保了以下几点：

jQuery 已加载
所有主视图脚本都已加载
DOM 准备就绪

【讨论】：

【解决方案5】：

尝试通过 JQuery 调用您的控制器。

$(document).ready(function () {
 $.ajax({
            type: 'GET',
            url: 'your_controller_url',
            success: function (data) {

                //Do your stuffs here
            }
        });
}

【讨论】：

Carlos 在上述方式中的问题是控制器动作需要一个参数，即@model。我不想将模型传递回操作。一定有别的办法

【解决方案6】：

您可以做到这一点的唯一方法是使用 JQuery 调用您的控制器操作并让它返回您的局部视图。使用 Jquery 更新局部视图进入的页面的任何部分，然后调用您要呈现地图的 javascript 方法

【讨论】：