I am trying to do an AJax form post, and when it is succesfull update a table with the results.
here is my code:
@using (Ajax.BeginForm("AddTagToSubject", "Subjects", null, new AjaxOptions() { OnSuccess = "UpdateTableData();" }, null))
{
@Html.AntiForgeryToken()
<div class="form-">
<div class="form-horizontal">
@Html.Hidden("SubjectId", Model.Id)
<div class="form-group">
@Html.Label("Add Tag", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-4">
@Html.TextBox("Tag", "", new { @class = "form-control" })
</div>
<div class="col-md-2">
<input type="submit" value="Add" class="btn btn-default" />
</div>
</div>
</div>
</div>
}
<script type="text/javascript">
//Get the latest tags
function UpdateTableData() {
console.log("Called fucntion");
}
</script>
[HttpPost]
public async Task<JsonResult> AddTagToSubject(AddTagToSubjectViewModel model)
{
model.Tag = model.Tag.ToLowerInvariant();
var tags = await db.Tags.FirstOrDefaultAsync(x => x.Name == model.Tag);
if (tags == null)
{
tags = new Tag { CreatedBy = User.Identity.GetUserId(), DateCreated = DateTime.UtcNow, Name = model.Tag };
db.Tags.Add(tags);
await db.SaveChangesAsync();
}
var subject = await db.Subjects.FirstOrDefaultAsync(x => x.Id == model.SubjectId);
subject.Tags.Add(tags);
await db.SaveChangesAsync();
return Json(subject.Tags.Select(x => new { Id = x.Id, Name = x.Name }).ToList(), JsonRequestBehavior.AllowGet);
}
OnSuccess' function. It just reloads the whole webpage and displays my
[{"Id":3,"Name":"Zulu"},{"Id":7,"Name":"accounting"},{"Id":6,"Name":"High School"}]
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/jquery.unobtrusive-ajax.js"
));
You have to include jquery.unobtrusive-ajax.js
and maybe you have change your Ajax.BeginForm's OnSuccess function like this:
@using (Ajax.BeginForm("AddTagToSubject", "Subjects", null,
new AjaxOptions() { OnSuccess = "UpdateTableData" }, null)){...}