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视图：

 @(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 this以将数据传递给动作

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端使用以下内容：

mailto:

如果要将参数传递给window.location.href = '@Url.Action("Index", "Controller")';，则可以执行以下操作：

@Url.Action

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

5 个答案: