[英]empty response from a jquery ajax over an mvc action method
我在这样的布局中有一个清单应用程序:
<body>
<div class="container" style="width: 100%">
<div id="header"> blahblahblah </div>
<div class="row">
<div id="rendermenu" class="col-sm-2">
@Html.Action("Menu", "Nav")
</div>
<div id="renderbody" class="col-sm-10">
@RenderBody()
</div>
</div>
</div>
在Home
控制器中,有一个用于过滤发送到视图的存储库的操作方法:
public ActionResult Index(string categoria, string marca)
{
InventarioViewModel viewModel = new InventarioViewModel
{
Inventario = repository.GetInventario()
.Where(i => (categoria == null || i.Item.Categoria == categoria)
&& (marca == null || i.Item.Marca == marca))
.OrderBy(i => i.Qta > 0)
.ThenBy(i => i.Item.Categoria)
.ThenBy(i => i.Item.Marca)
.ThenBy(i => i.Item.Modello).ToList(),
CategoriaCorrente = categoria,
MarcaCorrente = marca
};
return View(viewModel);
}
它可以正常工作,但只能在浏览器中键入所需的路由。 因此,我开始编写一个过滤器,方法是放置一个<select>
元素,该元素为用户提供项目类别,然后将AJAX调用绑定到其change
事件。 这是菜单视图的标记:
@using Magazzino.Domain.Infrastructure
@using Magazzino.Domain.Entities
@model List<Item>
@{ IEnumerable<Item> items = Model.DistinctBy(x => x.Categoria); }
<div class="text-center">Filtra per:</div>
<hr />
<div class="text-center">Categoria</div>
<select class="form-control lista-categorie" id="lista-categorie" data-action-url="@Url.Action("Index", "Home")" name="categoria">
<option value>-- seleziona --</option>
@foreach (Item item in items)
{
<option value="@item.Categoria">@item.Categoria</option>
}
</select>
这是AJAX调用,放在通常的$(document).ready(...)中:
$('#lista-categorie').on('change', function () {
var e = $(this)[0];
if (e.selectedIndex > 0) {
var ajaxRequest = $.ajax({
url: "/",
type: "get",
data: {
categoria: e.options[e.selectedIndex].value,
marca: null
}
})
ajaxRequest.done(function (response) {
$('#renderbody').html(response);
});
}
});
我还更改了呈现视图的控制器部分:
if (Request.IsAjaxRequest())
{
return PartialView(viewModel);
}
else
{
return View(viewModel);
}
但是我只有一个空字符串。 如果尝试获取完整视图 ,则可以看到响应具有整个页面(布局和菜单), 但具有索引视图:
// previous markups from layout and menu
<div id="renderbody" class="col-sm-10">
</div>
</div>
</div>
// other markups
我确定因为放置了断点而触发了索引操作方法。 但是,当我以这种方式更改AJAX调用本身时,它可以正常工作:
var ajaxRequest = $.ajax({
url: "/" + e.options[e.selectedIndex].value,
type: "get"
})
但是我真的不喜欢这种解决方法,我想有一种更简单有效的方式将数据传递到控制器。
我该如何改变这种行为?
完全不好:我重新编辑了问题,因为当我说“我确定ViewModel已填充”时,它是真实的。 我只检查了动作方法是否已触发。
现在,我检查了ViewModel并发现了问题:我没有考虑到AJAX调用发送的“ null”值实际上不是null
,而是空字符串 。 我已经相应地更改了LINQ表达式,并且可以正常工作
InventarioViewModel viewModel = new InventarioViewModel
{
Inventario = repository.GetInventario()
.Where(i => (string.IsNullOrEmpty(categoria) || i.Item.Categoria == categoria)
&& (string.IsNullOrEmpty(marca) || i.Item.Marca == marca))
.OrderBy(i => i.Qta > 0)
.ThenBy(i => i.Item.Categoria)
.ThenBy(i => i.Item.Marca)
.ThenBy(i => i.Item.Modello).ToList(),
CategoriaCorrente = categoria,
MarcaCorrente = marca
};
尽管是一个琐碎的错误(以及令人难以置信的尴尬时刻),但我还是想回答我自己的问题,并保留给那些可能遇到相同问题的人。
干杯。
$('#lista-categorie').on('change',method_attached_to_event);
function method_attached_to_event(){
var e = $(this)[0];
if (e.selectedIndex > 0) {
var url = '/';
var obj = {};
obj.categoria= e.options[e.selectedIndex].value;
$.ajax({
url:url,
method:'POST',
data:obj,
success:success,
error:error
});
}else{
// Do something else
}
}
function success(data,status,jqxhr){
console.log(data);
}
function error( jqxhr, status, error ){
console.log(status);
console.log(error);
console.log(jqxhr);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.