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

Question

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

有人可以帮我吗？:)

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

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

这是我的控制器动作:

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

#

我在我的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"))
     )

这是脚本:

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

Answer 1

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

第一

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

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

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

第二

如果需要渲染视图,可以通过ajax进行调用

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

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

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

要么

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

要么

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

更新

在你的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
        }
    });
}

更新2

你不能在你的回调'windows.location'中做这个,如果你想要渲染一个视图,你需要div在你的视图中放一个像这样的东西

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

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

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

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

Answer 2

在你的onDropDownChange处理程序中,只需进行jQuery AJAX调用,传入你需要传递给你的URL的任何数据.您可以使用success和error选项处理成功和失败调用.在该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的AJAX文档就在这里.