web-dev-qa-db-fra.com

Comment appeler l'action d'URL dans MVC avec la fonction javascript?

J'essaie de rendre l'action url avec javascript dans un projet MVC. Je capture un événement sur ma page qui appelle cette fonction mais je ne sais pas comment appeler cette URL.

Quelqu'un peut-il m'aider s'il-vous-plaît? :)

function onDropDownChange(e) {
    var url = '/Home/Index/' + e.value;
    //What now...?
}

-----------Édité-----------------------

Voici l'action de mon contrôleur:

    public ActionResult Index(int? id)
    {
        var tmpToday = DateTime.Now;
        var today = new DateTime(tmpToday.Year, tmpToday.Month, tmpToday.Day, 0, 0, 0);

        if (id != null)
        {
            var num = id.GetValueOrDefault();
            var rentableUnits = new List<Unit>();
            _unitLogic.GetAllRentableUnitsByArea(num, rentableUnits);

            var allAvailabilities = new ShowAvailability[rentableUnits.Count];

            for (int i = 0; i < rentableUnits.Count; i++)
            {
                var sTime = GetFirstDayOfMonth(today);
                var eTime = GetLastDayOfMonth(today);
                allAvailabilities[i] = new ShowAvailability(sTime, eTime.AddHours(23.0).AddMinutes(59.0), rentableUnits);
                today = today.AddMonths(1);
            }

            var showAvailability = new List<ShowAvailability>(allAvailabilities);

            return View(new HomeFormViewModel(showAvailability));
        }
        else
        {
            var allAvailabilities = new ShowAvailability[12];

            for (int i = 0; i < 12; i++)
            {
                var sTime = GetFirstDayOfMonth(today);
                var eTime = GetLastDayOfMonth(today);
                allAvailabilities[i] = new ShowAvailability(sTime, eTime.AddHours(23.0).AddMinutes(59.0));
                today = today.AddMonths(1);
            }

            var showAvailability = new List<ShowAvailability>(allAvailabilities);

            return View(new HomeFormViewModel(showAvailability));
        }
    }

J'utilise l'extension Telerik pour ma liste déroulante DropDownList, qui active la fonction javascript. Il s'agit en fait d'une vue Razor:

 @(Html.Telerik().DropDownList()
     .Name("DropDownList")
     .Items(area =>
         {
             area.Add().Text("Öll svæði").Value("0").Selected(true);
             foreach (Unit a in Model.Areas)
                {
                     area.Add().Text(a.Name).Value(a.UnitID.ToString());
                }
         })
     .HtmlAttributes(new { style = "width: 130px;" })
     .ClientEvents(clev => clev.OnChange("onDropDownChange"))
     )

Voici le script:

function onDropDownChange(e) {
    var url = '/Home/Index/' + e.value;
    $.ajax({
            type: "GET",
            url: url,
            data: {},
            dataType: "html"
        });
}
jqueryasp.net-mvcrazor
9
gardarvalur

Dans votre gestionnaire onDropDownChange, passez simplement un appel jQuery AJAX en transmettant toutes les données dont vous avez besoin pour transmettre votre URL. Vous pouvez gérer les appels ayant abouti ou échoué avec les options success et error. Dans l'option success, utilisez les données contenues dans l'argument data pour effectuer le rendu que vous devez effectuer. Rappelez-vous qu'ils sont asynchrones par défaut!

function onDropDownChange(e) {
    var url = '/Home/Index/' + e.value;
    $.ajax({
      url: url,
      data: {}, //parameters go here in object literal form
      type: 'GET',
      datatype: 'json',
      success: function(data) { alert('got here with data'); },
      error: function() { alert('something bad happened'); }
    });
}

la documentation de AJAX de jQuery est ici .

12
David Hoerster

Je vais vous donner 2 moyens d'appeler une action du côté client

premier

Si vous souhaitez simplement naviguer vers une action, vous devez appeler simplement le code suivant. 

window.location = "/Home/Index/" + youid

Notes: dont vous avez besoin pour gérer un type get appelé

Seconde

Si vous avez besoin de rendre une vue, vous pouvez le faire appelé par ajax

//this if you want get the html by get
public ActionResult Foo()
{
    return View(); //this return the render html   
}

Et le client a appelé comme ceci "En supposant que vous utilisez jQuery"

$.get('your controller path', parameters to the controler , function callback)

ou

$.ajax({
    type: "GET",
    url: "your controller path",
    data: parameters to the controler
    dataType: "html",
    success: your function
});

ou 

$('your selector').load('your controller path')

Mettre à jour

Dans votre ajax appelé effectuez cette modification pour transmettre les données à l'action

function onDropDownChange(e) {
var url = '/Home/Index' 
$.ajax({
        type: "GET",
        url: url,
        data: { id = e.value}, <--sending the values to the server
        dataType: "html",
        success : function (data) {
            //put your code here
        }
    });
}

MISE À JOUR 2

Vous ne pouvez pas faire cela dans votre callback 'windows.location' si vous voulez qu'il rende une vue, vous devez mettre une div à votre vue et faire quelque chose comme ça 

dans la vue où vous êtes qui ont le combo à un endroit  

<div id="theNewView"> </div> <---you're going to load the other view here

dans le client javascript 

$.ajax({
        type: "GET",
        url: url,
        data: { id = e.value}, <--sending the values to the server
        dataType: "html",
        success : function (data) {
            $('div#theNewView').html(data);
        }
    });
}

Avec cela, je pense que vous résolvez votre problème

13
Jorge

essayer: 

var url = '/Home/Index/' + e.value;
 window.location = window.location.Host + url;

Cela devrait vous amener où vous voulez.

4
scrappedcola

Une autre façon de vous assurer d'obtenir l'URL correcte, quels que soient les paramètres du serveur, consiste à la placer dans un champ caché de votre page et à la référencer pour le chemin: 

 <input type="hidden" id="GetIndexDataPath" value="@Url.Action("Index","Home")" />

Ensuite, vous obtenez juste la valeur dans votre appel ajax:

var path = $("#GetIndexDataPath").val();
$.ajax({
        type: "GET",
        url: path,
        data: { id = e.value},  
        dataType: "html",
        success : function (data) {
            $('div#theNewView').html(data);
        }
    });
}

J'utilise cela depuis des années pour faire face à l'étrangeté des serveurs, car il crée toujours l'URL correcte. Il facilite également le suivi des modifications d’appel aux méthodes du contrôleur si vous rassemblez tous les champs cachés dans une partie du code HTML ou créez un rasoir partiel pour les conserver.

0
davaus