onchange ajax调用的dropdownlistMVC重载问题
MVC reload issue with dropdownlistfor onchange ajax call
My 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)); });
});
});
我的竞选活动选择的行动看起来像:
[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>
当一个项目被选中时,一切都很好。再高兴不过了。但是,当您在浏览器上按reload时,所选项目仍然显示在dropdownlistfor中,但我不知道如何再次在该div中加载正确的局部视图。因为我对MVC还是有点陌生。
有人能指出MVC中通常是如何做到这一点的吗?提前感谢您的回答。
我建议您使用$.load()而不是$.post()关于将新的加载代码块放入函数中,并在页面加载时调用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));
})
您可以为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方法,如下所示:
$(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);
})
})
相关文章:
- 在指令控制器中使用$attrs时出现问题
- 将PHP变量传递给jQuery时遇到问题
- Canvas Html5绘图应用程序,移动画布会导致重大问题
- 参数变量出现ngTable指令问题
- 剑道网格jQuery动画()问题
- 我的jQuery插件参数没有正确启动,遇到了问题
- Phonegap-(安卓/iphone)多个图像的图像库出现问题
- TableExport jquery插件:文件名和扩展名问题
- JavaScript Pub/Sub属性访问问题
- JavaScript异步问题
- 如何解决Yii中的页面刷新问题
- Safari(Mac OS)上的jQuery平滑滚动问题
- jqGrid树网格问题
- 使用正则表达式评估电子邮件地址时出现性能问题
- 如何消除代码中的未定义和其他问题
- JavaScript代码问题:我正在将对象转换为数组
- onchange ajax调用的dropdownlistMVC重载问题
- javascript中潜在的函数重载:命名问题
- 解决HTML5历史中的页面重载问题
- 当使用html5Mode时,Angular路由ui重载问题