In my Asp.Net MVC web application, there is a partial view, there I'm using Ajax.BeginForm to submit the data to the controller using Ajax.

On the view, there is a place to add attachments.

The current code saves the data without attachment.

I have checked in the controller and there also not passing the attachment from the view.

Is there any way of passing this to the controller using Ajax.BeginForm?

This is my current Code.

@model Data.ViewModels.TaskPaymentsVM
@using Data.Infrastructure

<li style="padding-bottom:15px">
    @using (Ajax.BeginForm("UpdatePayments", "TaskMains", new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, UpdateTargetId = "PartialViewPaymentHistory" }, new { id = "frmPayments", enctype = "multipart/form-data" }))
    {
        @Html.HiddenFor(model => model.TempId)

        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="row">
            @Html.HiddenFor(model=>model.Task_Id)
            <div class="col-md-4 col-sm-4">
                <div class="form-group row">
                    @Html.LabelFor(model => model.Payment_Type, htmlAttributes: new { @class = "control-label col-md-3" })
                    <div class="col-sm-8">
                        @Html.DropDownList("Payment_Type", null, "Select Payment Type", new { @class = "form-control js-dropdown js-PaymentType", @Id = "PayType", @data_map = Model.TempId })
                        @Html.ValidationMessageFor(model => model.Payment_Type, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>
            <div class="col-md-2 col-sm-3">
                <div class="form-group row">
                    @Html.LabelFor(model => model.Cash_Direction, htmlAttributes: new { @class = "control-label col-md-6" })
                    <div class="col-sm-4">
                        @Html.EditorFor(model => model.Cash_Direction, new { htmlAttributes = new { @class = "form-control", @id = "txtCashDirection" + Model.TempId, @disabled = "disabled" } })
                        @Html.ValidationMessageFor(model => model.Cash_Direction, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>
            <div class="col-md-2 col-sm-4">
                <div class="form-group row">
                    @Html.LabelFor(model => model.Amount, htmlAttributes: new { @class = "control-label col-md-3" })
                    <div class="col-sm-8">
                        @Html.EditorFor(model => model.Amount, new { htmlAttributes = new { @class = "form-control", placeholder = "Type Bill Amount" } })
                        @Html.ValidationMessageFor(model => model.Amount, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-4">
                <div class="form-group row">
                    @Html.LabelFor(model => model.Note, htmlAttributes: new { @class = "control-label col-md-3" })
                    <div class="col-sm-8">
                        @Html.EditorFor(model => model.Note, new { htmlAttributes = new { @class = "form-control", placeholder = "Type Additional Notes here" } })
                        @Html.ValidationMessageFor(model => model.Note, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-2 col-sm-4">
                <div class="form-group row">
                    @Html.Label("Attachment")
                    <div class="col-md-10">
                        <input type="file" name="ImageData@(Model.TempId.ToString())" id="ImageData@(Model.TempId.ToString())" multiple="multiple" data-id="Img@(Model.TempId.ToString())" onchange="checkImage(this)" />
                        @Html.ValidationMessageFor(model => model.Attachment, "", new { @class = "text-danger" })
                    </div>
                </div>
                <img id="Img@(Model.TempId.ToString())" src="" alt="" width="100" height="100" class="ml-1" />
            </div>
        </div>

            <br />

            <button type="button" class="btn btn-success" onclick="Update();">Update Payments</button>
            <button type="button" class="btn btn-danger" onclick="$(this).parent().remove();">Remove Record</button>

     }

</li>

This is the code that used to send form data to model

function Update() {
    try {
        var $form = $("#frmPayments");
        var xModel = $form.serialize();
        $.ajax({
            url: '../UpdatePayments',
            type: 'POST',
            dataType: 'html',
            cache: false,
            async: false,
            data: xModel,
            success: function (data) {
                $("#PartialViewId").html(data);
            }
        });
    }
    catch (err) {
        console.log(err.message)
    }
}