Introduction
In this post, I am going to explain How to post data with validation in the ASP.NET Web API using Http Client- Part1 - How to retrieve data from the database in the ASP.NET Web API using Jquery
- Part 2 - How to retrieve data from the database in the ASP.NET Web API using Http Client
- Part 3 - How to post data with validation in the ASP.NET Web API using Jquery
- Part 4 - How to post data with validation in the ASP.NET Web API using Http Client
- Part 5 - How to upload files in the ASP.NET Web API using Jquery
- Part 6 - How to upload files in the ASP.NET Web API using Http Client
- Part 7 - How to retrieve and display data With Paging in the ASP.NET Web API using Jquery
Steps for Web Application (Client Application)
Here in this example, the client application is "WebApiClient.Web".Step-1: Add a new Action to the HomeController (in MVC Client application) for get view for Post data
public ActionResult Part4() { return View(); }
Step-2: Add view for the Action & design.
Right Click on Action Method (here right click on form action) > Add View... > Enter Name > Add.View
@model Entities.Employee @{ ViewBag.Title = "Part4"; } <style>span.field-validation-error { color: red; }</style> <h2>Part4 - Post data to Web API using HTTP Client (in MVC client application)</h2> <div style="max-width:600px;"> @using (Html.BeginForm("Part4","Home", FormMethod.Post, new{ role="form"})) { @Html.ValidationSummary(true) <div class="form-group"> @if (ViewBag.Result != null) { <div style="color:red">@ViewBag.Result</div> } </div> <div class="form-group"> @Html.LabelFor(a=>a.FirstName) @Html.TextBoxFor(a=>a.FirstName, new{@class="form-control"}) @Html.ValidationMessageFor(a=>a.FirstName) </div> <div class="form-group"> @Html.LabelFor(a=>a.LastName) @Html.TextBoxFor(a=>a.LastName, new{@class="form-control"}) @Html.ValidationMessageFor(a=>a.LastName) </div> <div class="form-group"> @Html.LabelFor(a=>a.EmailID) @Html.TextBoxFor(a=>a.EmailID, new{@class="form-control"}) @Html.ValidationMessageFor(a=>a.EmailID) </div> <div class="form-group"> @Html.LabelFor(a=>a.City) @Html.TextBoxFor(a=>a.City, new{@class="form-control"}) @Html.ValidationMessageFor(a=>a.City) </div> <div class="form-group"> @Html.LabelFor(a=>a.Country) @Html.TextBoxFor(a=>a.Country, new{@class="form-control"}) @Html.ValidationMessageFor(a=>a.Country) </div> <input type="submit" value="Create" class="btn btn-default" /> } </div> @section Scripts{ @Scripts.Render("~/bundles/jqueryval") }
Step-3: Add an another Action to the HomeController (in MVC Client application) for Post data using HTTP Client
[HttpPost] public ActionResult Part4(Employee emp) { if (ModelState.IsValid) { HttpClient client = new HttpClient(); var result = client.PostAsJsonAsync("http://localhost:1963/api/Example", emp).Result; if (result.IsSuccessStatusCode) { emp = result.Content.ReadAsAsync<Employee>().Result; ViewBag.Result = "Successfully saved!"; ModelState.Clear(); return View(new Employee()); } else { ViewBag.Result = "Error! Please try with valid data."; } } return View(emp); }
Step-4: Run Application.
Here we need to start both application as the client application will consume services from web api application.Download Live Demo