Jak wywołać akcję URL w MVC z funkcją javascript?

Question

Próbuję renderować akcję z użyciem javascript w projekcie MVC. Przechwytywam zdarzenie na mojej stronie, które wywołuje tę funkcję, ale nie wiem, jak nazwać ten konkretny adres URL.

Czy ktoś może mi pomóc? :)

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

----------- Zmieniano -----------------------

Here' moje działania kontrolera:

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

#

jestem używając rozszerzenia Telerik dla mojego DropDownList który odpala funkcję javaScript, to jest w rzeczywistości Razor Widok:

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

Here's skryptu:

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

Answer 1

W ramach obsługi onDropDownChange wystarczy wykonać wywołanie AJAX jQuery, przekazując wszelkie dane, które należy przekazać do adresu URL. Za pomocą opcji success i error można obsłużyć udane i nieudane połączenia. W opcji success użyj danych zawartych w argumencie data, aby wykonać renderowanie, które trzeba wykonać. Pamiętaj, że są one domyślnie asynchroniczne!

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

Dokumentacja AJAX jQuery to here.

Answer 2

try:

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

To powinno cię tam, gdzie chcesz.

Answer 3

Zamierzam dać 2 sposób, aby wywołać akcję od strony klienta

pierwszej

Jeśli chcesz po prostu przejść do działania, należy zadzwonić po prostu użyć śledzić

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

Uwagi:, że działania muszą obsługiwać typ sprawdzony

drugie

Jeśli trzeba renderować View można zrobić wywoływany przez ajax

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

a klient tak zwany "Zakładając, że używasz jQuery"

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

lub

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

lub

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

Aktualizacja

W swojej ajax nazwie wprowadzić tę zmianę, aby przekazać dane do działania

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

UPDATE 2

Nie można tego zrobić w swoim zwrotnego "windows.location", jeśli chcesz, aby go wyświetlić render, musisz umieścić div w widoku i zrobić coś takiego

w widoku, w którym jesteś, że mają combo w jakimś miejscu

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

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

Z tego Myślę, że rozwiązałeś swój problem