C# MVC中OnChange事件的AJAX调用
我必须对作为视图一部分的dropdownlist的onchange事件进行AJAX调用。在更改事件中,我需要调用数据库,执行一些计算以显示UI,然后使用这些计算填充图表控件。 UI显示按此顺序进行。 图表 下拉式类别列表 具有评级分数的子类别列表 因此,正如您可以看到的那样,我需要在变更事件的第3部分中显示类别评级,使用评级分数填充图表。 在.NET中很容易完成,但如何在MVC中完成??我能想到的唯一选择是创建带有代码隐藏的用户控件,但这与使用MVC的目的背道而驰。C# MVC中OnChange事件的AJAX调用,c#,asp.net-mvc,C#,Asp.net Mvc,我必须对作为视图一部分的dropdownlist的onchange事件进行AJAX调用。在更改事件中,我需要调用数据库,执行一些计算以显示UI,然后使用这些计算填充图表控件。 UI显示按此顺序进行。 图表 下拉式类别列表 具有评级分数的子类别列表 因此,正如您可以看到的那样,我需要在变更事件的第3部分中显示类别评级,使用评级分数填充图表。 在.NET中很容易完成,但如何在MVC中完成??我能想到的唯一选择是创建带有代码隐藏的用户控件,但这与使用MVC的目的背道而驰。 感谢您的帮助。使用局部视图查
感谢您的帮助。使用局部视图查看。如果你在谷歌上搜索ASP.NETMVC部分视图,会有很多链接,但这里有一个我发现的链接
我不确定我是否完全理解您的意图,但在MVC中,我可能会处理它的方式是将几个AJAX调用链接在一起。第一个根据选择更新类别评级。这可能会返回JSON,以便您可以轻松提取评分。第二种方法获取第一种方法返回的评分,并调用一个将图表呈现为HTML的操作——即,它呈现一个返回的局部视图,并将其插入文档中的适当位置。以下是如何实现此操作的一般思路
<script type="text/javascript">
// assuming you're using jQuery
$("#ddlAjax").change( function (event) {
$.ajax({
url: "Controller/GetPartialGraph/" + $(this).val(),
data: { id = $(this).val() /* add other additional parameters */ },
cache: false,
type: "POST",
dataType: "html",
success: function (data, textStatus, XMLHttpRequest) {
$("#divPartialView").html( data ); // HTML DOM replace
}
});
});
</script>
<select id="ddlAjax">
... list of options
</select>
<div id="divPartialView">
<!-- something like this in your ASP.NET View -->
<%= Html.RenderPartial("MyPartialView", Model) %>
</div>
我想这就是您要寻找的答案。好的,如果您想在dropdownlist发生更改时调用onchange事件,这可能会很有帮助:
@Html.DropDownListFor(
model => model.SelectedId,
new SelectList(ViewBag.Ids, "Id", "Name"),
"[All]",
new { onchange = "onChangeId();", @id ="municipalityDropDown" }
)
然后,您可以使用此javascript代码和ajax代码。下面是一个调用动作方法的jax代码示例
[HttpPost]
public PartialViewResult GetPartialGraph(int id /* drop down value */)
{
// do calculations whatever you need to do
// instantiate Model object
var model = myBusinessLogicService.DoCalculations(id);
return PartialView("MyPartialView", model);
}
function onChangeId() {
jQuery.ajax({
url: '@Url.Action("Action Method Name", "Controller Name")',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({ data: data2 }),
success: function (result) { }
});
}
是的,这是正确的–只有改变才能取代:
onchange = “this.form.submit();”
与:
在post中找到它您似乎没有阅读该问题。他没有问如何在更改代码或发送ajax请求时触发代码。对我来说,这是可行的,但我只需将“data:{id=$(this.val()}”更改为“data:{id:$(this.val()”-注意:“=”替换为“:”。谢谢。
onchange = “$(this.form).submit();”