MVC重新加载问题与onchange ajax调用的dropdownlist

Question

我的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 =“广告系列”的div中。 该div是在您之前看到的dropdownlist下定义的，如下所示：

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

选择一个项目后，一切正常。 再开心不过了。 但是，当您在浏览器上按reload时，所选项目仍显示在dropdownlistfor中，但是我不知道如何再次在该div中加载适当的局部视图。 因为我还是MVC的新手。

有人可以指出在MVC中通常是如何完成的吗？ 预先感谢您的答复。

Answer 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中。

Answer 2

您也可以只调用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();
}); 

Answer 3

尝试这个，

$(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);
        })
    })

;

Answer 4

我建议您使用$ .load（）而不是$ .post（）关于将新的加载代码块放入函数中，并在页面加载时和事件触发时调用一次一次。

$(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));
})