In this article, we are going to learn how to insert a record into database using ajax in ASP.NET MVC.
Introduction
We all know the benefit of database record using ajax in ASP.NET Web Form. To know more about Ajax and how it works, read our jQuery Tips & Tricks ebook and watch the videos. After installing Microsoft jQuery Unobtrusive Ajax, scaffold Create view as we do normally for the model. In the Create view, we need to make few changes and below are the code highlighted that needs to be added/modified.
Using the code
To explain, how to insert a record into database using Ajax in ASP.NET MVC, we have a sample Controller code.
The first action method simply returns the Create view.
// GET: /AjaxStuff/Create
public ActionResult Create()
{
return View();
}
// POST: /AjaxStuff/Create
[HttpPost]
public ActionResult Create(PersonalDetail personalDetail)
{
if (!Request.IsAjaxRequest())
{
Response.StatusCode = (int)System.Net.HttpStatusCode.BadRequest;
return Content("Sorry, this method can't be called only from AJAX.");
}
try
{
if (ModelState.IsValid)
{
db.PersonalDetails.Add(personalDetail);
db.SaveChanges();
return Content("Record added successfully !");
}
else
{
StringBuilder strB = new StringBuilder(500);
foreach (ModelState modelState in ModelState.Values)
{
foreach (ModelError error in modelState.Errors)
{
strB.Append(error.ErrorMessage + ".");
}
}
Response.StatusCode = (int)System.Net.HttpStatusCode.BadRequest;
return Content(strB.ToString());
}
}
catch (Exception ee)
{
Response.StatusCode = (int)System.Net.HttpStatusCode.BadRequest;
return Content("Sorry, an error occured." + ee.Message);
}
} The second method executes when Create button is clicked on the form. We are doing following in this Create method.
Checking whether the request to this method is Ajax or normal. We do not want normal request to this method so if the current request is not Ajax request we are throwing error.
In the try block
We are checking for the ModelState.IsValid, if it is then saving the record into the database by using normal approach that we have already seen.
And returns the success message.
If ModelState is not valid then looping through each error and adding into the StringBuilder and then returning it.
If any error occurs, in the catch block also we are returning error.
Note that setting the Status Code of the Response is important to raise the OnFailure event of Ajax (we will see it later).
View Code
Notice the below view code , we have first created the instance of the AjaxOptions and set following properties
@model MVCTraining5.Models.PersonalDetail
@{
ViewBag.Title = "Create";
AjaxOptions options = new AjaxOptions
{
Confirm = "Are you sure to save record?",
OnBegin = "OnBeginMethod",
OnFailure = "OnFailtureMethod",
OnSuccess = "OnSuccessMethod",
OnComplete = "OnCompleteMethod"
};
}
<h2>Create</h2>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
@using (Ajax.BeginForm(options))
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Personal Detail - Ajax</h4>
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.LastName, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Age, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Age, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Age, "", new { @class = "text-danger" }) </div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Active, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div class="checkbox">
@Html.EditorFor(model => model.Active)
@Html.ValidationMessageFor(model => model.Active, "", new { @class = "text-danger" }) </div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
<label id="labelAjaxStatus" class="alert-warning"></label>
</div>
</div>
</div>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>
@section Scripts
{
<script type="text/javascript">
var isError = false; function OnBeginMethod()
{
$("#labelAjaxStatus").text("Loading ....");
}
function OnFailtureMethod(error)
{
$("#labelAjaxStatus").text("Sorry, an error occured." + error.responseText); isError = true; }
function OnSuccessMethod(data)
{
$("#labelAjaxStatus").text("Processed the data Successfully!");
$("#FirstName").val('');
$("#LastName").val('');
$("#Age").val('');
}
function OnCompleteMethod(data, status)
{
if (!isError)
{
$("#labelAjaxStatus").text("Request completed. Here is the status: " + status);
}
}
</script>
@Scripts.Render("~/bundles/jqueryval")
}- Confirm - the message to ask from the user before actually submitting the form
- OnBegin – function to call when OnBegin event executes (starts sending Ajax request)
- OnFailure – function to call when any error occurs on the server side while processing the request . OnSuccess – function to call when request was processed successfully by server v. OnComplete – function to call when the ajax operation is completed whether after failure or success
The next highlighted line is the reference of the jquery.unobtrusive-ajax.min.js file that is important In order to work with @Ajax helper method otherwise @Ajax helper method works as if it is @Html helper methods.
Now pass the AjaxOptions object as parameter to the @Ajax.BeginForm method.
Now add a <label> element nearby Create button so that we will be displaying the status of the ajax request.
The last part of the highlighted code is the <script> block where isError variable is declared and used as a flag to write messages in the OnCompleteMethod.
In
OnBeginMethod – we are writing “Loading …” text to the label just beside Create button.
OnFailureMethod – we are writing error message returned from the server and also setting the isError to true
OnSuccessMethod – we are writing success message and resetting the value of textboxes
OnCompleteMethod – we are checking isError and if it is false (no error occurred, otherwise it will override the error message written in the OnFailureMethod), writing the complete message and the status returned from the server.
Conclusion
You can see that how easy it is now to insert a record into database using Ajax in ASP.NET MVC.
Thanks
for reading, do write your comments or suggestions about this article
by responding it. For more ASP.NET Real time problem solutions,
click here.