通过 Ajax 将 ViewModel(对象)传递给 MVC 控制器时如何忽略空值
How to ignore empty values when passing a ViewModel (object) via Ajax to an MVC controller
在接下来的 view
中,我将对象 (ViewModel) 传递给控制器。如果用户在表单中输入所有值,它就可以正常工作。通过 LINQ 查询生成的带有 querystring
的请求 URL 示例如下:
Request URL:http://localhost:50507/OrdCtrl/OrdAction?OrdYear=2016&OrderNumber=CE123&OrderName=testOrder&hasOrdered=true&_=1489509308855
但是如果用户跳过在搜索表单中输入一个值,比如说 orderName
,用户会得到预期的错误:
NullReferenceException: Object reference not set to an instance of an object.
我认为出现上述错误是因为生成的 Requested URL 缺少 orderName
的参数值,如下所示:
Request URL:http://localhost:50507/OrdCtrl/OrdAction?OrdYear=2016&OrderNumber=CE123&OrderName=&hasOrdered=true&_=1489509308855
问题: 在下面的dataObj
inside Ajax调用中,如果输入参数的值为空字符串,我们如何跳过输入参数 - 所以生成querystring 不包括那些参数。 注意:这是一个搜索表单,允许用户仅根据他们在表单中输入的值进行搜索。
测试视图模型:
public class UsetListViewModel
{
public int OrdYear { get; set; }
public string OrderNumber { get; set; }
public string OrderName { get; set; }
public bool hasOrdered { get; set; }
}
查看:
@model TestProj.Models.TestViewModel
....<!--Some html here-->
<div>
<form asp-controller="OrdCtrl" asp-action="OrdAction" method="get">
<input type="hidden" asp-for="OrdID" />
<div ><button type="button" id="SearchBtn">Search</button></div>
</form>
</div>
<div id="searchResults"></div>
@section scripts
{
<script>
$(document).ready(function () {
$('#SearchView').on('click', '#SearchBtn', function (event) {
var dataObj = {
OrdYear: $('#yearID').val(),
OrderNumber: $('#OrdNumb').val(),
OrderName: $('#OrdName').val(),
hasOrdered : $('[name=hasOrd]:checked').val()
}
$.ajax({
url: '@Url.Action("OrdAction", "OrdCtrl")',
data: dataObj,
contentType: 'application/json',
dataType: 'html',
type: 'GET',
cache: false,
success: function (data) {
$('#searchResults').html(data);
},
error: function (jqXHR, textStatus) {
alert('jqXHR.statusCode');
}
});
});
});
</script>
}
只是不要在 javascript 中填充 dataObj 中的值,除非设置了表单字段值。
因此将 dataObj 的声明更新为如下内容:
var dataObj = {};
if ($('#yearID').val() !== '') {
dataObj.OrdYear = $('#yearID').val();
}
if ($('#OrdNumb').val() !== '') {
dataObj.OrderNumber = $('#OrdNumb').val();
}
... etc ...
应删除 GET 请求中的空查询参数。
在接下来的 view
中,我将对象 (ViewModel) 传递给控制器。如果用户在表单中输入所有值,它就可以正常工作。通过 LINQ 查询生成的带有 querystring
的请求 URL 示例如下:
Request URL:http://localhost:50507/OrdCtrl/OrdAction?OrdYear=2016&OrderNumber=CE123&OrderName=testOrder&hasOrdered=true&_=1489509308855
但是如果用户跳过在搜索表单中输入一个值,比如说 orderName
,用户会得到预期的错误:
NullReferenceException: Object reference not set to an instance of an object.
我认为出现上述错误是因为生成的 Requested URL 缺少 orderName
的参数值,如下所示:
Request URL:http://localhost:50507/OrdCtrl/OrdAction?OrdYear=2016&OrderNumber=CE123&OrderName=&hasOrdered=true&_=1489509308855
问题: 在下面的dataObj
inside Ajax调用中,如果输入参数的值为空字符串,我们如何跳过输入参数 - 所以生成querystring 不包括那些参数。 注意:这是一个搜索表单,允许用户仅根据他们在表单中输入的值进行搜索。
测试视图模型:
public class UsetListViewModel
{
public int OrdYear { get; set; }
public string OrderNumber { get; set; }
public string OrderName { get; set; }
public bool hasOrdered { get; set; }
}
查看:
@model TestProj.Models.TestViewModel
....<!--Some html here-->
<div>
<form asp-controller="OrdCtrl" asp-action="OrdAction" method="get">
<input type="hidden" asp-for="OrdID" />
<div ><button type="button" id="SearchBtn">Search</button></div>
</form>
</div>
<div id="searchResults"></div>
@section scripts
{
<script>
$(document).ready(function () {
$('#SearchView').on('click', '#SearchBtn', function (event) {
var dataObj = {
OrdYear: $('#yearID').val(),
OrderNumber: $('#OrdNumb').val(),
OrderName: $('#OrdName').val(),
hasOrdered : $('[name=hasOrd]:checked').val()
}
$.ajax({
url: '@Url.Action("OrdAction", "OrdCtrl")',
data: dataObj,
contentType: 'application/json',
dataType: 'html',
type: 'GET',
cache: false,
success: function (data) {
$('#searchResults').html(data);
},
error: function (jqXHR, textStatus) {
alert('jqXHR.statusCode');
}
});
});
});
</script>
}
只是不要在 javascript 中填充 dataObj 中的值,除非设置了表单字段值。
因此将 dataObj 的声明更新为如下内容:
var dataObj = {};
if ($('#yearID').val() !== '') {
dataObj.OrdYear = $('#yearID').val();
}
if ($('#OrdNumb').val() !== '') {
dataObj.OrderNumber = $('#OrdNumb').val();
}
... etc ...
应删除 GET 请求中的空查询参数。