0

私の DropDownListFor は次のようになります。

@Html.DropDownListFor(
        m => m.CampaignID,
        new SelectList(Model.Campaigns, "ID", "Name"),
        "---Geen---",
        new {
            id = "campaignDdl",
            data_url = Url.Action("CampaignChosen", "Nomination")
        }
    )

私の onchange JavaScript は次のようになります。

$(function () {
    $('#campaignDdl').change(function () {
        //alert('Template knop geklikt');
        var $campaignDdl = $('#campaignDdl');
        var selCampID = $campaignDdl.val();
        var url = $campaignDdl.data('url');
        $.post(url, { selectedCampaignID: selCampID }, function (data) {
            $('#campaign').html(data);
        })
    .fail(function (jqxhr) { alert(JSON.stringify(jqxhr)); });
    });
});

私の CampaignChosen アクションは次のようになります。

    [AcceptVerbs("POST")]
    public ActionResult CampaignChosen(string selectedCampaignID) {

        if (!string.IsNullOrEmpty(selectedCampaignID)) {
            int campaignID = Convert.ToInt32(selectedCampaignID);
            Models.Campaign campaign = Models.Campaign.GetCampaignByID(campaignID);

            return PartialView("ShowCampaignOverview", campaign);
        } else {
            return PartialView("ShowCampaignOverview", null);
        }

    }

ご覧のとおり、私は部分的なビューを通過しています。JavaScript は、id = "campaign" の div にビューが確実に配置されるようにします。この div は、前に見たドロップダウン リストの下で次のように定義されます。

<div id="campaign"></div>

アイテムが選択されると、すべて正常に動作します。これ以上ないほど幸せです。しかし、ブラウザでリロードを押すと、選択したアイテムはまだドロップダウンリストに表示されていますが、その div に適切な部分ビューを再度ロードする方法がわかりません。私はまだMVCに少し慣れていないからです。

これが通常MVCでどのように行われるかを誰かが指摘できますか? お答えいただきありがとうございます。

4

4 に答える 4

1

jquery.ready 関数の onchange 関数を模倣できます。

$(document).ready(function() {
  //alert('Template knop geklikt');
    var $campaignDdl = $('#campaignDdl');
    var selCampID = $campaignDdl.val();
    var url = $campaignDdl.data('url');
    $.post(url, { selectedCampaignID: selCampID }, function (data) {
        $('#campaign').html(data);
    })
});

これは、ddl が変更されたときとまったく同じことを行う必要がありますが、代わりに、既に選択されている値を取得し、対応するビューを div に配置します。

于 2013-08-23T13:09:07.013 に答える
1

これを試して、

$(document).ready(function() {
  //alert('Template knop geklikt');
    var $campaignDdl = $('#campaignDdl');
    var selCampID = $campaignDdl.val();
    var url = $campaignDdl.data('url');
    $.post(url, { selectedCampaignID: selCampID }, function (data) {
    $('#campaign').html('');            
    $('#campaign').append(data.Data);
        })
    })

;

于 2013-08-23T13:17:39.833 に答える
1

次のように、コードを複製しないために change メソッドを呼び出すこともできます。

$(function () {
    $('#campaignDdl').change(function () {
        //alert('Template knop geklikt');
        var $campaignDdl = $('#campaignDdl');
        var selCampID = $campaignDdl.val();
        var url = $campaignDdl.data('url');
        $.post(url, { selectedCampaignID: selCampID }, function (data) {
            $('#campaign').html(data);
        });
    })
    .fail(function (jqxhr) { 
        alert(JSON.stringify(jqxhr)); 
    })
    .change();
});
于 2013-08-23T13:14:45.023 に答える
1

$.post() の代わりに$.load()を使用することをお勧めします。それに関しては、新しいロード コード チャンクを関数に入れ、ページのロード時に onece を呼び出し、イベントがトリガーされたときに 1 回呼び出します。

$(document).ready(function() {
    $('#campaignDdl').change(function () {
      loadCampaignById();
    .fail(function (jqxhr) { alert(JSON.stringify(jqxhr)); });
    });

   loadCampaignById();
});

function loadCampaignById()
{
   var $campaignDdl = $('#campaignDdl');
   var selCampID = $campaignDdl.val();
   var url = $campaignDdl.data('url');
   $('#campaign').load(url + "/" + selCampID));
})
于 2013-08-23T13:18:59.063 に答える