¿Cómo llamar acción de URL en MVC con la función javascript?

Question

Estoy tratando de renderizar la acción de url con javascript en un proyecto de MVC. Capturo un evento en mi página que llama a esta función, pero no estoy seguro de cómo llamar a esta URL determinada.

¿Alguien me puede ayudar, por favor? :)

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

----------- ----------------------- Editado

Here' es mi acción del controlador:

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

#

Estoy usando la extensión Telerik para mi DropDownList que dispara la función Javascript, esto es, de hecho, una vista de la maquinilla de afeitar:

@(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")) 
    ) 

tope aquí tienes el script:

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

Answer 1

Dentro de su controlador onDropDownChange, solo haga una llamada jQuery AJAX, pasando los datos que necesita para pasar a su URL. Puede gestionar llamadas exitosas y fallidas con las opciones success y error. En la opción success, use los datos contenidos en el argumento data para hacer cualquier representación que necesite hacer. Recuerde que estos son asíncronos por defecto.

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'); } 
    }); 
} 

documentación AJAX de jQuery es here.

Answer 2

intento:

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

Eso debería llegar a donde desee.

Answer 3

Voy a darle 2 de forma de llamar a una acción desde el lado del cliente

primera

Si lo que desea es navegar a una acción debe llamar sólo tiene que utilizar el seguimiento

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

Notas: que la acción necesita para manejar un tipo llamado get

Segunda

Si necesita hacer una vista que podría hacer que la llama de ajax

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

y el cliente llama así "Suponiendo que está usando jQuery"

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

o

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

o

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

actualización

En su ajax llamado make este cambio para pasar los datos a la acción

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

ACTUALIZACIÓN 2

No se puede hacer esto en su devolución de llamada 'windows.location' si quiere que vaya a renderizar una vista, necesita poner un div, en su opinión y hacer algo como esto

en la vista donde se encuentre que tiene el combo en algún lugar

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

en el cliente de 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); 
     } 
    }); 
} 

Con esta Creo que resuelve su problema