How to execute JavaScript function on PartialView load in MVC 3

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>

How can i call the JS function immediately to render my map when the partial view is loaded. The partial method in the controller returns a string which is used as parameter in the JS function. Hope it makes sense.

marteljn · Accepted Answer · 2013-12-20 16:35:06Z

4

Since you appear to be using JQuery why not:

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

I also changed how you referenced your ViewBag value since the way you have it, it won't be be a string literal in JavaScript.

Also, as a side note consider using JSON serializer to convert your data into JSON. It is considered a bad practice to do it manually like you did above.

answered Dec 20, 2013 at 16:35

marteljn

6,5263 gold badges32 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Andy T Over a year ago

If this is in a partial, it probably was not loaded when the page was included, so the $(document).ready() method might have already executed by the time the partial was rendered.

marteljn Over a year ago

@QuetiM.Porta That is a good point. This only makes sense if it is consumed by a regular view and not via AJAX. Since it accepts a DataTable I don't know how it would be loaded via AJAX.

user2906420 Over a year ago

I can also create the JSON code in partial view in razor but then after getting the JSON string how to call the JS function

Andy T · Accepted Answer · 2013-12-20 16:49:35Z

3

After you define it, you just call it. However, it looks like you are including the MVC Viewbag values in the JS function definition. You should be passing those values when you call the JS method:

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

Note: This assumes you have jQuery loaded.

edited Dec 20, 2013 at 16:49

answered Dec 20, 2013 at 16:35

Andy T

9,9315 gold badges56 silver badges97 bronze badges

4 Comments

user2906420 Over a year ago

Yes Porta but how does it execute the JS function automatically when partial view is loaded

Andy T Over a year ago

The mapInit(@(Viewbag.locpoints)); is a call to your method. So once this code is loaded into the browser, it executes it.

user2906420 Over a year ago

tried it does not work - nothing appears when partial view is loaded.

Ben Junior Over a year ago

For what I've read in another post (and experienced myself), you cannot use sections in partial views. They simple don't work

Shalin · Accepted Answer · 2015-09-13 04:07:20Z

Consider using the onSuccess Ajax Option and wire up a javascript function where your jquery is written. For example you have following script written in your mainView that calls the partial View. Suppose you want do something when the anchor tag in your partial view is clicked

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

Now in your partial view the anchor tag is created as shown below

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

Informitics · Accepted Answer · 2017-08-18 15:37:39Z

2

We have implemented a much simpler solution.

_Layout.cshtml after @RenderSection("scripts", required: false) (and Jquery,etc.)

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

Then, in your partial view:

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

This ensures the following:

jQuery is loaded
All main view scripts are loaded
DOM is ready

answered Aug 18, 2017 at 15:37

Informitics

3142 silver badges4 bronze badges

Comments

Carlos Coelho · Accepted Answer · 2013-12-20 16:41:52Z

1

Try to call your controller via JQuery.

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

                //Do your stuffs here
            }
        });
}

answered Dec 20, 2013 at 16:41

Carlos Coelho

5961 gold badge5 silver badges14 bronze badges

1 Comment

user2906420 Over a year ago

Carlos in the above way the problem is the controller action takes a parameter which is the @model. I do not want to pass the model back to the action. there must be another way

Gjohn · Accepted Answer · 2014-09-22 14:12:12Z

1

The only way you can do this is by calling your controller action using JQuery and have it return your partial view. Use Jquery to update whatever section of the page the partial view goes to and then call the javascript method you want to render the map

answered Sep 22, 2014 at 14:12

Gjohn

1,2811 gold badge8 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to execute JavaScript function on PartialView load in MVC 3

6 Answers 6

3 Comments

4 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

4 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related