I am trying to get the value of PoHeaderIds from the input box but I always get the null value of it. I've logged in the console and there's a value. But when PoHeaderIds gets passed to the controller, the value becomes null.

namespace Test.Web.Models.ViewModels.POViewModel
{
    public class IndexViewModel : BaseViewModel
    {
        public string PoHeaderIds { get; set; }

        public string PoReleaseIds { get; set; }


        public DateTime? SyncStartTime { get; set; }

        public DateTime? SyncEndTime { get; set; }

        public bool IsCreate { get; set; }

    }
}

@model Test.Web.Models.ViewModels.SSISPOViewModel.IndexViewModel

@section scripts{
    <script src="~/Theme/js/jquery.datepicker.min.js" type="text/javascript"></script>
    <script src="~/Theme/js/jquery-ui-timepicker-addon.js" type="text/javascript"></script

    <script>
        $(function () {


            $(".buttonClicked").click(function (e) {

                e.preventDefault();
                showLoading();

                
                var isCreate = $('.buttonClicked').val() == 'Create' ? true : false;
                console.log($('#POHeaderIds').val());

                $.ajax({
                    url: "@Url.Action("Test")",
                    type: "POST",
                    async: true,
                    data: "Json="   $("#MainForm").serialize()   "&IsCreate="   isCreate  "",
                    success: function (res) {
                        $.when(alertBox.show("Success", false)).then(function () {
                            location.href="@Url.Action("Index")"
                        })
                    },
                    error: function (res) {
                        console.log(res)
                    },
                    complete: function () {
                        hideLoading();
                    }
                })
            })

        });
    </script>
}

@section AlertBox{
    <partial name="Common/_AlertBox" />
}

<div id="Content" >
    <div id="MainBar">
        <h2></h2>
        <div id="Breadcrumbs">
            <ul>
                <li><a href="/"></a></li>
                <li><a href="#"></a></li>
            </ul>
        </div>
    </div>

    <div id="ColumnCenter">
        <form asp-controller="SSISPO" asp-action="Index" method="POST" id="MainForm" >
            <div >
                <div >
                    <div >
                        <div >
                            <div >PO_HEADER_ID</div>
                            <div ><input type="text" asp-for="PoHeaderIds" ></div>
                            <span asp-validation-for="PoHeaderIds" ></span>
                        </div>
                        <div >
                            <div >PO_RELEASE_ID</div>
                            <div ><input type="text" asp-for="PoReleaseIds"></div>
                            <span asp-validation-for="PoReleaseIds" ></span>
                        </div>
                        <div >
                            <div >Start Time</div>
                            <div >
                                @Html.TextBoxFor(m => m.SyncStartTime, "{0:yyyy/MM/dd HH:mm:ss}",
                                    new {@placeholder = "YYYY/MM/DD HH:mm:ss", @title = "Start Time", @class = "date dev-calendar", @autocomplete = "off" })<span >~</span>@Html.TextBoxFor(m => m.SyncEndTime, "{0:yyyy/MM/dd HH:mm:ss}", new { @placeholder = "YYYY/MM/DD HH:mm:ss", @title = "End Time", @class = "date dev-calendar dateAfterTo", @autocomplete = "off" })
                            </div>
                        </div>
                    </div>

                    <div >
                        <div><span><input type="button"  value="Create"></span></div>
                        <div><span><input type="button"  value="Update"></span></div>
                    </div>

                </div>
            </div>
        </form>
    </div>
</div>

        [HttpPost]
        [AuthorizeRoles(UserRole.Admin)]
        public ActionResult Test(IndexViewModel model)
        {

            return View();
        }

Picture of debugging

CodePudding user response：

Just change your ajax to:

data:  $("#MainForm").serialize()   "&IsCreate="   isCreate ,

Besides, it is better to modify your code below, $('.buttonClicked').val() will always get the first button value:

var isCreate = $(this).val() == 'Create' ? true : false;