Как вызвать действие URL в MVC с функцией JavaScript?
Я пытаюсь сделать действие URL с помощью JavaScript в проекте MVC. Я фиксирую на своей странице событие, которое вызывает эту функцию, но я не уверен, как вызвать этот определенный 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));
}
}
Я использую расширение Telerik для моего DropDownList, который запускает функцию 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"
});
}
3 ответа
В вашем 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'); }
});
}
Документация по jJuery AJAX находится здесь.
Я собираюсь дать вам 2 способа вызвать действие со стороны клиента
первый
Если вы просто хотите перейти к действию, которое вы должны вызвать, просто используйте следующую
window.location = "/Home/Index/" + youid
Примечания: что вам нужно выполнить действие для получения типа get
второй
Если вам нужно отрендерить View, вы можете сделать call by 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);
}
});
}
С этим я думаю, что вы решаете свою проблему
Пытаться:
var url = '/Home/Index/' + e.value;
window.location = window.location.host + url;
Это должно привести вас туда, куда вы хотите.
Попробуйте использовать на стороне 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);
Другой способ убедиться, что вы получаете правильный 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 или делаете отдельную частичку бритвы для их хранения.