Data binding in ASP.NET Core

Question

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" class="inner">
    <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 class="SearchWrap">
                <div class="SearchBox FormElmt">
                    <div class="SearchItems">
                        <div class="item">
                            <div class="label">PO_HEADER_ID</div>
                            <div class="cont"><input type="text" asp-for="PoHeaderIds" ></div>
                            <span asp-validation-for="PoHeaderIds" class="text-danger"></span>
                        </div>
                        <div class="item">
                            <div class="label">PO_RELEASE_ID</div>
                            <div class="cont"><input type="text" asp-for="PoReleaseIds"></div>
                            <span asp-validation-for="PoReleaseIds" class="text-danger"></span>
                        </div>
                        <div class="item">
                            <div class="label">Start Time</div>
                            <div class="cont deadline sub">
                                @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 class="dash">~</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 class="BtnCommon mid">
                        <div><span><input type="button" class="buttonClicked" value="Create"></span></div>
                        <div><span><input type="button" class="buttonClicked" value="Update"></span></div>
                    </div>

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

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

            return View();
        }

Picture of debugging

"Json=" + $("#MainForm").serialize() + " this does not translate to the JSON reflecting IndexViewModel class. — Chetan
– Chetan, Commented Aug 1, 2022 at 1:42

Rena · Accepted Answer · 2022-08-01 02:02:36Z

1

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;

edited Aug 1, 2022 at 2:02

answered Aug 1, 2022 at 1:56

Rena

37.2k7 gold badges50 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Data binding in ASP.NET Core

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related