通过Ajax将ViewModel（对象）传递给MVC控制器时，如何忽略空值

Question

In the following view I'm passing an Object (ViewModel) to controller. It works fine if user enters all the values in the form. The sample Requested URL with querystring generated via LINQ query is as follows:

Request URL:http://localhost:50507/OrdCtrl/OrdAction?OrdYear=2016&OrderNumber=CE123&OrderName=testOrder&hasOrdered=true&_=1489509308855

But if the user skips entering one value in the search form, say, orderName the user gets the expected error:

NullReferenceException: Object reference not set to an instance of an object.

I think the above error occurs since the generated Requested URL is missing the parameter value for orderName as shown below:

Request URL:http://localhost:50507/OrdCtrl/OrdAction?OrdYear=2016&OrderNumber=CE123&OrderName=&hasOrdered=true&_=1489509308855

Question : In the dataObj inside Ajax call below, how can we skip the input parameters if their values are empty strings - so the generated querystring does not include those parameters. NOTE : This is a search form and users are allowed to search based only on the values they enter inside form.

TestViewModel:

public class UsetListViewModel
{
    public int OrdYear { get; set; }
    public string OrderNumber { get; set; }
    public string OrderName { get; set; }
    public bool hasOrdered { get; set; }
}

View :

@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>
}

Answer 1

just don't populate the values in dataObj in your javascript unless the form field values are set.

so updating the declaration of dataObj to something like:

var dataObj = {};
if ($('#yearID').val() !== '') {
    dataObj.OrdYear = $('#yearID').val();
}
if ($('#OrdNumb').val() !== '') {
    dataObj.OrderNumber = $('#OrdNumb').val();
}
... etc ...

Should remove the empty query parameters on the GET request.