Javascript MVC在dropdownlistfor onchange ajax调用中的重新加载问题

我的DropDownListFor看起来像：

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

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

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

    }

我的onchange javascript看起来像：

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

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

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

    }

我选择的操作如下所示：

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

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

    [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确保视图get被放入一个id=“campaign”的div中。这个div是在您前面看到的dropdownlistfor下定义的，如下所示：

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

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

选择一个项目后，一切正常。再高兴不过了。但是，当您在浏览器上按“重新加载”时，所选项目仍然显示在dropdownlistfor中，但我不知道如何再次在该div中加载适当的局部视图。因为我对MVC还是有点陌生

---

有人能指出MVC通常是如何做到这一点的吗？提前感谢您的回答。

您可以模拟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中。

您可以模拟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中。

您也可以调用change方法，以避免重复代码，如下所示：

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

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

---

您也可以只调用change方法，以避免重复代码，如下所示：

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

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

试试这个

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

)

试试这个

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

---

)

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

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

---

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

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

---

没有完全理解您的问题..当您重新加载页面时，下拉列表中仍然填充着旧值（通过onchange添加的值）？请参阅：cache、outputcache，还是希望在刷新页面时从头开始重新填充下拉列表？请参阅：page.onload，而不是ele.onchange。很明显，问题非常简单，实际上没有问题。很抱歉，这个问题打扰了您。您还没有完全理解您的问题。当您重新加载页面时，下拉列表中仍然填充着旧值（通过onchange添加的值）？请参阅：cache、outputcache，还是希望在刷新页面时从头开始重新填充下拉列表？请参阅：page.onload，而不是ele.onchange。很明显，问题非常简单，实际上没有问题。很抱歉用这个问题打扰你。哦，天哪，当然。我可以简单地再次采取行动。我不太聪明。谢谢我将使用load函数。再次感谢。哦，天哪，当然。我可以简单地再次采取行动。我不太聪明。谢谢我将使用load函数。再次感谢。谢谢，你们当然是对的。只需在重新加载时再次调用该操作。哦，谢谢，你当然是对的。只需在重新加载时再次调用该操作。哦，是的。你是对的。我请客。很抱歉浪费你的时间。是的。你是对的。我请客。对不起，浪费了你的时间。