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"
});
}
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ドキュメントは こちら です。
クライアント側からアクションを呼び出す2つの方法を紹介します
最初の
アクションに移動したい場合は、次のように呼び出す必要があります
window.location = "/Home/Index/" + youid
注:アクションは、getタイプと呼ばれるものを処理する必要があること
2番目
ビューをレンダリングする必要がある場合は、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;
それはあなたが望む場所に行く必要があります。
サーバーの設定に関係なく正しい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の一部にまとめたり、それらを保持するために別のカミソリパーシャルを作成したりすると、コントローラーメソッドの呼び出しを簡単に変更できます。