如何使用 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));
        }
    }

#

我正在为触发 javascript 函数的 DropDownList 使用 Telerik 扩展，这实际上是一个 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"))
     )

这是脚本：

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 中进行此更改以将数据传递给操作

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 文档是here。

Answer 3

试试：

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

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

Answer 4

无论服务器设置如何，确保您获得正确 url 的另一种方法是将 url 放入页面上的隐藏字段并引用它作为路径：

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

然后您只需在 ajax 调用中获取值：

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

多年来，我一直在使用它来应对服务器的怪异问题，因为它总是构建正确的 url。如果您将所有隐藏字段放在 html 的一个部分中，或者制作一个单独的 razor 部分来保存它们，它还可以轻松跟踪更改的控制器方法调用。

Answer 5

尝试在 JavaScript 端使用以下代码：

window.location.href = '@Url.Action("Index", "Controller")';

如果你想将参数传递给@Url.Action，你可以这样做：

var reportDate = $("#inputDateId").val();//parameter
var url = '@Url.Action("Index", "Controller", new {dateRequested = "findme"})';
window.location.href = url.replace('findme', reportDate);