如何在MVC 3中的PartialView加载上执行JavaScript函数

Question

\\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函数来渲染我的地图。 控制器中的partial方法返回一个字符串，该字符串在JS函数中用作参数。 希望它有意义。

Answer 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。 像上面那样手动执行它被认为是一种不好的做法。

Answer 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。

Answer 3

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

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

                //Do your stuffs here
            }
        });
}

Answer 4

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

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" })

Answer 5

我们实施了一个更简单的解决方案。

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

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

然后，在您的局部视图中：

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

这确保了以下内容：

• jQuery已加载
• 加载所有主视图脚本
• DOM准备好了

Answer 6

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