Model is null in Kendo UI MVC in Microsoft Edge and Internet Explorer
<p>I am using jquery serializeObject to retrieve model binded textbox and dropdown values in my project. In chrome i get the value for both textbox and dropdown however in Microsoft Edge i am not getting any values for the model binded object. In the bottom code, the value of viewModel comes as null for both SupplierName and SelectedSearchType when I use Microsoft Edge however i get the entered value in Chrome.</p>

<p>Any clue why i am not getting any value in Microsoft Edge and IE?</p>

<pre><code>&lt;form id="formSupplierInvitation" class="form-horizontal"&gt;
    &lt;fieldset id="SupplierInvitation"&gt;
        &lt;p style="margin-bottom: 15px;"&gt;
            &lt;b&gt;Please enter your search criteria: &lt;/b&gt;
        &lt;/p&gt;
        &lt;div class="row"&gt;
            &lt;div class="col-sm-6"&gt;
                &lt;div class="form-group"&gt;
                    @Html.LabelFor(model =&gt; model.SupplierName, new { @class = "col-sm-4 control-label" })
                    &lt;div class="col-sm-8"&gt;
                        @Html.TextBoxFor(model =&gt; model.SupplierName, new { @class = "form-control", maxlength = 100, @data_toggle = "tooltip", @title = "Maximum length is 100", })
                        @Html.ValidationMessageFor(model =&gt; model.SupplierName, "", new { @class = "text-danger" })
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col-sm-6"&gt;
                &lt;div class="form-group required"&gt;
                    @Html.Label("Search Type", new { @class = "col-md-3 col-sm-4 control-label" })
                    &lt;div class="col-sm-8"&gt;
                        @Html.DropDownListFor(m =&gt; m.SelectedSearchType, new SelectList(Model.AllSearchTypeLists, "SearchTypeValue", "SearchTypeText"), new { @name = "DropDownSearchType", @class = "form-control", data_placeholder = "Choose Search Type..." })
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;input id="btnSearch" type="submit" value="Search" class="btn btn-default" /&gt;
        &lt;div class="col-sm-12"&gt;
            @(Html.Kendo().Grid&lt;SupplierPortal.ViewModels.SupplierInvitationResponseViewModel&gt;()
                .Name("GridSupplierInvitation")
                .Columns(columns =&gt;
                {
                    columns.Bound(e =&gt; e.SupplierNumber).Width("160px");
                    columns.Bound(e =&gt; e.SupplierName).Width("180px");                            
                })

                .DataSource(dataSource =&gt; dataSource
                            .Ajax()
                            .PageSize(10)
                            .ServerOperation(false)
                            .Read(read =&gt; read.Action("GetSuppliers", "Admin").Data("GetSearchParameters")))                        
            )
        &lt;/div&gt;
    &lt;/fieldset&gt;
&lt;/form&gt;

&lt;script type="text/javascript"&gt;
    function GetSearchParameters() {
        return {
            viewModel: $("#SupplierInvitation").serializeObject()
        };
    }

     $('#btnSearch').click(function (e) {
            e.preventDefault();     
            $('#GridSupplierInvitation').data('kendoGrid').dataSource.read();
        });
&lt;/script&gt;

public JsonResult GetSuppliers([DataSourceRequest] DataSourceRequest dataRequest, SupplierInvitationRequestViewModel viewModel)
{
    var responseViewModels = new List&lt;SupplierInvitationResponseViewModel&gt;();
    string supplierName = viewModel.SupplierName;
    string selectedSearchType = viewModel.SelectedSearchType;
    return Json(responseViewModels.ToDataSourceResult(dataRequest));
}
</code></pre>

<p><a href="https://i.stack.imgur.com/2JGgv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2JGgv.png" alt="enter image description here"></a></p>

<p>Update #1: Followed this post and found this fix. I needed to add 'input' attribute.
<a href="https://stackoverflow.com/questions/8336965/jquery-serialize-not-working-only-on-ie">Jquery Serialize not working only on IE</a></p>

<pre><code>function GetSearchParameters() {
            return {
                viewModel: $("#SupplierInvitation input").serializeObject()
            };
        }
</code></pre>

<p>Update #2: Need to update on my previous update. The previous solution adding 'input' only works for input attributes. (obviousuly). If you have a dropdownlist like above which will get converted to 'select' html attribute, you won't be able to get the value for your dropdown. I believe you can go two ways(?) to solve this. First, read the values by their id, set the values in variable and send those values as individual parameters. e.g. </p>

<pre><code>var supplierName = $("#SupplierName").val();
var selectedSearchType = $("#SelectedSearchType option:selected").val();
</code></pre>

<p>Secondly, use serializeObject and set the properties values in the serialized object.</p>

<pre><code>var supplierName = $("#SupplierName").val();
var selectedSearchType = $("#SelectedSearchType option:selected").val();

var supplierInvitationObject = $('#SupplierInvitation').serializeObject();
supplierInvitationObject.SupplierName = supplierName;
supplierInvitationObject.SelectedSearchType = selectedSearchType;
</code></pre>