Posting bootstrap modal containing partial view using jquery ajax post

Question

I have a bootstrap modal form code below

        @*Modal form Create*@
    <div class="modal" tabindex="-1" data-backdrop="static" role="dialog" id="DivCreateEnrolledDevices">
        <div class="modal-dialog" @*role="document"*@>
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Create New Devices</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="DivDevicesCreate">
                        <div id="sdvPartial" style="height:200px">

                        </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button id="btnSave" type="button" class="btn btn-secondary"  onclick="SaveChanges()" >Save Changes</button>

                </div>
            </div>
        </div>
    </div>
That I use to display a partial view code below

     <div class="form-horizontal">
            @*<h4>EnrolledDevicesModel</h4>
        <hr />*@
            <form id="dvCreateFrm">

                @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                <div class="form-group" style="display:none">
                    @Html.LabelFor(model => model.DeviceID, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.DeviceID, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.DeviceID, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="form-group" style="display:none">
                    @Html.LabelFor(model => model.DeviceKeyID, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.DeviceKeyID, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.DeviceKeyID, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group" style="display:none">
                    @Html.LabelFor(model => model.StoreBranchID, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.StoreBranchID, new { htmlAttributes = new { @class = "form-control" }, @value = "0" })
                        @Html.ValidationMessageFor(model => model.StoreBranchID, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group" style="display:none">
                    @Html.LabelFor(model => model.UserID, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.UserID, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.UserID, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group" style="display:none">
                    @Html.LabelFor(model => model.EnrolledDate, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.EnrolledDate, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.EnrolledDate, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.DeviceName, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.DeviceName, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.DeviceName, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.DeviceKey, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.DropDownList("ddlDeviceKey", TempData["DeviceKey"] as SelectList, "Click to select")

                        @*@Html.EditorFor(model => model.DeviceKey, new { htmlAttributes = new { @class = "form-control" } })*@
                        @Html.ValidationMessageFor(model => model.DeviceKey, "", new { @class = "text-danger" })
                    </div>
                </div>


                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        @*<input type="submit" value="Create" class="btn btn-default" />*@
                        @*<button id="btnCreateDv" type="submit" style="display:none">Submit</button>*@
                        @*@Html.ActionLink("Create","Create","EnrolledDevices",new{@class="btn btn-primary")*@
                    </div>
                </div>
            </form>
        </div>

And I use jquery ajax to post data whenever the save change button is clicked script below

    function SaveChanges() {
    $('#btnCreateDv').click()
    var token = $('input[name="__RequestVerificationToken"]').val();
    var urlCreateDev = $('#urlCreateDev').val()
    var frm = $('#dvCreateFrm').serialize();
    $.ajax({
        url: '/EnrolledDevices/Create' /*'@Url.Action("Create","EnrolledDevices")'*/ /**/,
        type: 'Post',
        contentType: 'apllication/html; charset-utf-8',
        data: { frm, token },
        datatype: 'html',
        success: function (response) {
            $('#DivCreateEnrolledDevices').modal('hide')
        },
        error: function (xhr, status, error) {

            alert(xhr.responseText);
            alert(xhr.status);
            alert(error);
        }
    })
}
and my controller code is like

            public ActionResult Create(FormCollection collection)
        {
            LoadFormData( collection);
            try
            {
                // TODO: Add insert logic here

                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }
but for some reason no data is being sent to the controller.

I just can't figure out what I have done wrong

Can I get some help here

Thanks in advance

Schleid