web-dev-qa-db-ja.com

javascript関数を使用してMVCでURLアクションを呼び出す方法は？

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"
        });
}
jqueryasp.net-mvcrazor
9
gardarvalur

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ドキュメントは こちら です。

12
David Hoerster

クライアント側からアクションを呼び出す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);
        }
    });
}

これで私はあなたの問題を解決すると思う

13
Jorge

試してください：

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

それはあなたが望む場所に行く必要があります。

4
scrappedcola

サーバーの設定に関係なく正しい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の一部にまとめたり、それらを保持するために別のカミソリパーシャルを作成したりすると、コントローラーメソッドの呼び出しを簡単に変更できます。

1
davaus