I want to add new item by send form Ajax to controller and then return json response this is form to submit putting in partial view "_AddSubAccount"
@model EndSubAccountVM
@using Microsoft.AspNetCore.Mvc.Localization
@inject IViewLocalizer localizer
<form method="post" onsubmit="sendAjax();">
<!-- Modal -->
<div id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div >
<div >
<div >
<h5 id="exampleModalLabel"><i ></i> @localizer["AddSubAccount"]</h5>
<button type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div >
<div >
<label >@localizer["AccountNameAR"]</label>
<input type="text" asp-for="Name" id="nameAr"
/>
<span asp-validation-for="Name"></span>
</div>
<div >
<label >@localizer["AccountNameEN"]</label>
<input type="text" asp-for="NameEN" id="nameEn" />
<span asp-validation-for="NameEN"></span>
</div>
<input type="hidden" asp-for="AccountTreeId" value="@ViewBag.mainAccountID" id="mainAcc" />
</div>
<div >
<button type="button" data-dismiss="modal"><i ></i> @localizer["Cancel"]</button>
<button type="submit" ><i ></i> @localizer["Save"]</button>
</div>
</div>
</div>
</div>
</form>
and this is View which i inject partial view in call "Add"
@model IEnumerable<EndSubAccount>
@using Microsoft.AspNetCore.Mvc.Localization
@using System.Globalization
@using NToastNotify;
@inject IViewLocalizer localizer
@inject IToastNotification toaster
<h3 >
<i ></i> @localizer["subAccountFor"]
@(CultureInfo.CurrentCulture.Name.StartsWith("ar") ? ViewBag.mainAccountAR : ViewBag.mainAccountEN)
</h3>
<div >
<!-- Button trigger modal -->
<button type="button" data-toggle="modal" data-target="#exampleModal">
<i ></i> @localizer["addSubAccount"]
</button>
</div>
<table >
<thead >
<tr>
<th>@localizer["AccountName"]</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
@if (CultureInfo.CurrentCulture.Name.StartsWith("ar"))
{
<td>@item.Name</td>
}
else
{
<td>@item.NameEN</td>
}
<td >
<a asp-rout-id="@item.Id" asp-action="Edit" ><i ></i> @localizer["Edit"]</a>
<a asp-route-id="@item.Id" id="del-btn" ><i ></i> @localizer["Delete"]</a>
</td>
</tr>
}
</tbody>
</table>
<partial name="_AddSubAccount" model="new EndSubAccountVM()" />
<!--! Template To add row in Table -->
<div id="template">
<tr>
@if (CultureInfo.CurrentCulture.Name.StartsWith("ar"))
{
<td>{nameAr}</td>
}
else
{
<td>{nameEn}</td>
}
<td >
<a asp-rout-id="{id}" asp-action="Edit" ><i ></i> @localizer["Edit"]</a>
<a asp-route-id="{id}" id="del-btn" ><i ></i> @localizer["Delete"]</a>
</td>
</tr>
</div>
@section Scripts{
@{ await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script>
function sendAjax() {
let form = $('form').serialize();
var row2Append = $('table tbody tr:last');
var nameAr = $('#nameAr').val();
var nameEn = $('#nameEn').val();
$.ajax({
url: @Url.Action("Add", "EndSubAccount"),
type: 'post',
data: form,
dataType: 'json',
success: function (response) {
var accountName = CultureInfo.CurrentCulture.Name.StartsWith("ar") ? response.Name : response.NameEN;
var data2Add = $('#template').html().replace('{nameAr}', response.Name)
.replace('{nameEn}', response.NameEN)
.replace('{id}', response.Id);
row2Append.append(data2Add).fadeIn();
toaster.success(localizer["accountSaved", ViewBag.AccountName]);
},
error: function () {
alert({@localizer["someThingError"]});
}
//end of Ajax
});
}
</script>
}
and this is post action to save item and retrun json
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Add(EndSubAccountVM accountVM)
{
var nameArExist = await _context.AccountsTrees.FirstOrDefaultAsync(x => x.Name == accountVM.Name);
var nameEnExist = await _context.AccountsTrees.FirstOrDefaultAsync(x => x.NameEN == accountVM.NameEN);
var AccountIdExist = await _context.AccountsTrees.FirstOrDefaultAsync(x => x.Id == accountVM.AccountTreeId);
// validate Data
if (nameArExist != null)
{
ModelState.AddModelError("Name", _localizer["nameExist"]);
}
if (nameEnExist != null)
{
ModelState.AddModelError("NameEN", _localizer["nameExist"]);
}
if (AccountIdExist == null)
{
ModelState.AddModelError("AccountId", _localizer["AccountIdExist"]);
}
var accountName = CultureInfo.CurrentCulture.Name.StartsWith("ar")? accountVM.Name : accountVM.NameEN;
if (!ModelState.IsValid)
{
_notify.AddErrorToastMessage(_localizer["accountNotSave", accountName]);
return new JsonResult(accountVM);
}
var account2Add = new EndSubAccount()
{
Name = accountVM.Name,
NameEN = accountVM.NameEN,
_lastUpdate = DateTime.Now,
_UserId = Convert.ToInt32(User.FindFirst("UserId").Value),
AccountTreeId = accountVM.AccountTreeId
};
var accountSaved = CultureInfo.CurrentCulture.Name.StartsWith("ar") ? account2Add.Name : account2Add.NameEN;
ViewBag.AccountName = accountName;
await _context.EndSubAccounts.AddAsync(account2Add);
await _context.SaveChangesAsync();
return new JsonResult(accountSaved);
}
when i click on submit it go to action directly without call AJAX so action return response as json in view page not return to AJAX code
so why AJAX Not Work ?
CodePudding user response：
your form is posting back to server before onsubmit="sendAjax();" fires so try this :
$("form").submit(function(e){
return false;
});
or :
$('form').on('submit', function(e){
e.preventDefault();
});
further you can remove
onsubmit="sendAjax();"
from form and change
type="submit"
to
type="button"
for save button and add
onclick="sendAjax();"
to save button
CodePudding user response：
Firstly,try to remove onsubmit="sendAjax();" and change your button to:
<button type="button" onclick="sendAjax()"><i ></i> @localizer["Save"]</button>
Then the ajax will be called.Since you use [ValidateAntiForgeryToken] in your action,you need to add Antiforgery token to your ajax like this:
function sendAjax() {
let form = $('form').serialize();
var row2Append = $('table tbody tr:last');
var nameAr = $('#nameAr').val();
var nameEn = $('#nameEn').val();
$.ajax({
url: @Url.Action("Add", "EndSubAccount"),
type: 'post',
data: form,
headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
dataType: 'json',
success: function (response) {
var accountName = CultureInfo.CurrentCulture.Name.StartsWith("ar") ? response.Name : response.NameEN;
var data2Add = $('#template').html().replace('{nameAr}', response.Name)
.replace('{nameEn}', response.NameEN)
.replace('{id}', response.Id);
row2Append.append(data2Add).fadeIn();
toaster.success(localizer["accountSaved", ViewBag.AccountName]);
},
error: function () {
alert({@localizer["someThingError"]});
}
//end of Ajax
});
----------
}