如何使用javascript函数调用MVC中的URL操作？

I´m trying to render url action with javascript in an MVC project. I capture an event on my page which calls this function but I´m not sure how to call this certain URL.

我试图在MVC项目中使用javascript渲染url动作。我在我的页面上捕获了一个调用此函数的事件，但我不知道如何调用此特定URL。

Can anyone help me please? :)

有人可以帮我吗？ :)

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

-----------Edited-----------------------

-----------编辑-----------------------

Here´s my controller action:

这是我的控制器动作：

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

#

I´m using Telerik extension for my DropDownList which fires the javascript function, this is in fact a Razor View:

我在我的DropDownList中使用Telerik扩展来激活javascript函数，这实际上是一个Razor View：

 @(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 the script:

这是脚本：

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

3 个解决方案

#1

Within your onDropDownChange handler, just make a jQuery AJAX call, passing in any data you need to pass up to your URL. You can handle successful and failure calls with the success and error options. In the success option, use the data contained in the data argument to do whatever rendering you need to do. Remember these are asynchronous by default!

在你的onDropDownChange处理程序中，只需进行一次jQuery AJAX调用，传入你需要传递给你的URL的任何数据。您可以使用成功和错误选项处理成功和失败调用。在success选项中，使用data参数中包含的数据来执行您需要执行的任何渲染。请记住，这些是默认的异步！

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

jQuery's AJAX documentation is here.

jQuery的AJAX文档就在这里。

#2

I'm going to give you 2 way's to call an action from the client side

我将给你两种方式从客户端调用一个动作

first

第一

If you just want to navigate to an action you should call just use the follow

如果您只想导航到一个动作，您应该调用只需使用跟随

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

Notes: that you action need to handle a get type called

注意：您的操作需要处理调用的get类型

Second

第二

If you need to render a View you could make the called by ajax

如果你需要渲染一个View，你可以通过ajax进行调用

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

And the client called like this "Assuming that you're using jquery"

客户端称之为“假设你正在使用jquery”

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

or

要么

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

or

要么

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

Update

更新

In your ajax called make this change to pass the data to the action

在你的ajax中调用make，将数据传递给动作

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

更新2

You cannot do this in your callback 'windows.location ' if you want it's go render a view, you need to put a div in your view and do something like this

你不能在你的回调'windows.location'中做这个，如果你想要渲染一个视图，你需要在你的视图中放一个div并做这样的事情

in the view where you are that have the combo in some place

在视图中你在某个地方有组合

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

in the javascript 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);
        }
    });
}

With this i think that you solve your problem

有了这个我认为你解决了你的问题

#3

try:

尝试：

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

That should get you where you want.

这应该可以让你到达你想要的地方。