web-dev-qa-db-fra.com

Comment exécuter la fonction JavaScript lors du chargement de la vue partielle dans MVC 3

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

Comment puis-je appeler la fonction JS immédiatement pour rendre ma carte lorsque la vue partielle est chargée. La méthode partielle dans l'automate renvoie une chaîne qui est utilisée comme paramètre dans la fonction JS. J'espère que cela a du sens. 

javascriptasp.net-mvcpartial-views
11
user2906420

Puisque vous semblez utiliser JQuery, pourquoi pas:

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

J'ai également changé la façon dont vous avez référencé votre valeur ViewBag car, telle que vous la définissez, il ne s'agira pas d'un littéral de chaîne en JavaScript.

En outre, pensez également à l’utilisation du sérialiseur JSON pour convertir vos données en JSON. C'est une mauvaise pratique de le faire manuellement comme vous l'avez fait ci-dessus.

4
marteljn

Une fois que vous l'avez défini, il vous suffit de l'appeler. Cependant, il semble que vous incluez les valeurs de MVC Viewbag dans la définition de la fonction JS. Vous devriez transmettre ces valeurs lorsque vous appelez la méthode 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>

Remarque: Cela suppose que jQuery soit chargé.

2
Andrés Nava - .NET

Essayez d'appeler votre contrôleur via JQuery.

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

                //Do your stuffs here
            }
        });
}
1
Carlos Coelho

Nous avons mis en place une solution beaucoup plus simple.

_Layout.cshtml après @RenderSection("scripts", required: false) (et Jquery, etc.)

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

Ensuite, dans votre vue partielle:

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

Cela garantit les éléments suivants:

  • jQuery est chargé
  • Tous les scripts de vue principale sont chargés
  • DOM est prêt
1
Informitics

Pensez à utiliser l'option onSuccess Ajax et connectez une fonction javascript sur laquelle votre jquery est écrit. Par exemple, vous avez un script suivant écrit dans votre mainView qui appelle la vue partielle. Supposons que vous souhaitiez faire quelque chose lorsque l'utilisateur clique sur la balise d'ancrage de votre vue partielle

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

Maintenant, dans votre vue partielle, la balise d'ancrage est créée comme indiqué ci-dessous

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