javascript - onchange ajax 调用的下拉列表的 MVC 重新加载问题

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

    }

正如你所看到的，我传递的是部分 View 。 javascript 确保将 View 放入 id =“campaign”的 div 中。这个 div 是在您之前看到的下拉列表下定义的，如下所示:

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

当选择一个项目时，一切正常。高兴极了。但是，当您在浏览器上按“重新加载”时，所选项目仍显示在下拉列表中，但我不知道如何再次在该 div 中加载正确的部分 View 。因为我对 MVC 还是有点陌生​​。

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

Answer 1

我建议您使用$.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));
})