ASP.. NET MVC -加载分部视图时的Ajax旋转器
本文关键字:Ajax 旋转 视图 MVC NET 加载 ASP | 更新日期: 2023-09-27 18:11:39
我正在使用ASP。. NET MVC和我试图使用Ajax旋转器。当用户提交一个已定义的按钮时,在构建和显示我的局部视图时,应该显示一个ajax旋转器。这就是我正在做的。
这是我的按钮和jQuery代码链接到这个按钮。建议容器表示将呈现局部视图的容器:
<input type="button" value="Suggérer rdv" id="SuggestBtn" disabled ="disabled"/>
<div id="suggestionsContainer">
</div>
$('#SuggestBtn').click(function() {
var intervals = scheduler.GetSelectedInterval();
//var $hiddenInput = jQuery('input:hidden', jQuery(this));
//$hiddenInput.val(intervals.ToString());
var chk = $('#chbxPADC').is(':checked');
var chk1 = $('#chbxPADP').is(':checked');
var chk2 = $('#chbxPremPADC').is(':checked');
var chk3 = $('#chbxPremPADP').is(':checked');
var chk4 = $('#chbxOther').is(':checked');
var chkMan = $('#Homme').is(':checked');
var chkWoman = $('#Femme').is(':checked');
var NbPADC = $('#NbPADC').val();
var NbPADP = $('#NbPADP').val();
var isFemale = true;
if (chkMan == true)
isFemale = false;
PADP = chk1;
PADC = chk;
PremedicationPADC = chk2;
PremedicationPADP = chk3;
autre = chk4;
$.get('/Home/GetSuggestions', { PADP: PADP, PADC: PADC, isFemale : isFemale, PremedicationPADP: PremedicationPADP, PremedicationPADC: PremedicationPADC, NbPADC: NbPADC, NbPADP: NbPADP, autre: autre, intervals: intervals.ToString() }).success(function (html) {
$('#suggestionsContainer').html(html);
});
});
我已经读过这个StackOverflow Q&A,但你可以看到我没有使用@Ajax.ActionLink。
知道该怎么做了吗?
假设所有控件都在一个ID为myForm的表单中你可以这样写
$('#SuggestBtn').click(function() {
//maybe check if form is valid first... eg if ($('#myForm').validate().form()){...
//start client side spin/progress bar
$.ajax(
type: "POST",
url: "/Controller/Method",
data: $('#myForm').serialize(),
success: function (response){
$('#suggestionsContainer').html(response);
//end client side spin/progress bar
}
)
}
我们使用jQuery的ajax
函数来请求部分视图。(url
参数应该设置为返回局部视图的操作方法)发布到您的部分视图的表单数据是从$('#myForm').serialize()
获得的。您应该注意,除非在这里显式地执行验证,否则不会在客户端执行不显眼的验证。
一旦它从服务器返回,success
函数就会被调用(假设它的状态为200 http响应),在本例中,它将用返回的HTML替换建议容器的内容。