.Net core MVC - submit a form through a controller doesn't return ajax

I have an index page with a table and a simple form with just two dropdowns. The page also has several divs with partial views on it. On submit, I need it to refresh just those divs and not the whole page.

Someone helped me with the ajax and controller. The form submit works great. It submits the form and does almost everything it should. But on submit, instead of going back to ajax to refresh the divs, it redirects me to the controller's URL with a line that says whatever I pass in the return section. Kind of confusing. I hope the sections below help it make sense.

Form Partial View:

<form id="ajax_submit" asp-controller="Home" asp-action="CreateBreak" >
<div  style="margin-left:-1rem">
    <select  style="width: 7.4em;" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="EmployeeId" asp-for="EmployeeId">
        <option>Dispatcher</option>
        @foreach (var item in Model.Employees)
        {
            <option  value="@item.Id">@item.DisplayName</option>
        }
    </select>
</div>

<div >
    <select  style="width: 7.3em" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="EmpPosition" asp-for="EmpPosition">
        <option>Position</option>
        @foreach (var item in Model.Positions)
        {
            <option  value="@item.Id">@item.PositionName</option>
        }
    </select>
</div>
<button type="submit"  id="break-submit" style="margin-left: -1rem; width:15rem;">Submit</button>

Controller:

        [HttpPost]
    public async Task<JsonResult> CreateBreak(int EmployeeId, int EmpPosition)
    {
        Break newBreak = new Break();

        newBreak.EmployeeId = EmployeeId;
        newBreak.EmpPosition = EmpPosition;
        newBreak.TimeEntered = DateTime.Now;

        _context.Add(newBreak);
        await _context.SaveChangesAsync();

        return Json(new { success = true, });
    }

Javascript:

$(document).on("submit", "#ajax_submit", function () {

// prevent regular form submit
e.preventDefault();

var data = {
    EmployeeId: $("#EmployeeId").val(),
    EmpPosition: $("#EmpPosition").val()
}

$.ajax({
    type: "Post",
    url: "/Home/CreateBreak",
    dataType: 'json',
    data: data,
    success: function () {
        $(" #headerRefresh ").load(window.location.href   " #headerRefresh ");
        $(" .breakRefresh ").load(window.location.href   " .breakRefresh ");
    },
});

})

Part of the code from one of the partials to see how I have the partials set up:

    <div >
        <table >
            <tbody>
                @foreach (var item in Model.Dths)
                {
                    @*////EMPLOYEE SENT////*@
                    @if (item.EmpSent == true)
                    {
                        <tr style="background-color:lightgreen; font-size:large">
                            <td >
                                <input type="hidden"  value="@item.Id" />
                                <a href="Javascript:;"  style="color:black">@[email protected]</a>
                            <td  style="font-size:large">@item.EmpPositionNavigation.PositionName</td>
                            <td >
                                <input type="checkbox" value="" id="flexCheckChecked" checked>
                            </td>
                        </tr>
                    }

The form submits just fine but when I submit it returns this:

So instead of refreshing those divs and staying on the index page, it changes the URL to Home/CreateBreak. It should stay on Index and just refresh those divs that are on the index page. I've been stuck for days. I really appreciate anyone's help.

CodePudding user response：

But on submit, instead of going back to ajax to refresh the divs, it redirects me to the controller's URL with a line that says whatever I pass in the return section. Kind of confusing.

That is because you fail to prevent regular form submit.

You miss e in function (), change like below:

$(document).on("submit", "#ajax_submit", function (e) {

    // prevent regular form submit
    e.preventDefault();
    //...
})