Introduction
In this article you will learn about
Send the HTML Form Data by using ASP. NET web API. The method of HTML is
specified the how to send form data, the form data is send to page specified in
the action attribute. The HTML forms is used two methods for sending the
data to the server that are GET and Post Methods.
GET method
- It appends the data into the URL in name
/values pairs.
- The Get method is used for only sending
the non secure data. such as query string in Google.
- The length of URL is limited.
- It is useful for submissions where the
user want to bookmarks the result.
POST method
- It is useful for appending the data
inside the body of the HTTP request.
- There is no Size limitations of the URL.
- It can not be bookmarked when we use the
POST method for the Submission form.
For creating this application follow this
procedure.
Step1
Create the Web API application.
- Start Visual Studio 2012.
- Select "File"->"New"->"Project".
- On the template window select "Installed"
-> "Template" -> "Other Languages" -> "Visual C#" -> "Web".
- Now choose "ASP. NET MVC4 Web
Application" and change the name to "CodeHtml".
- Click on the "OK" button.
![htm1.jpg]()
Now a New ASP .NET MVC4 Project window is
opened, then:
![12345.jpg]()
- In this window select the "Web API".
- And click on the "OK" button.
Step2
Create the Model Class
- In "Solution Explorer" Right click on
"Model Folder"->"Add"->"Class".
![htm2.jpg]()
- In "template window" select
"Installed"->"Visual C#".
- Choose "Class" change its name as
"Change".
- Click on "OK" button.
![htm6.jpg]()
Write this code in the "Model class" "Change.cs"
namespace
CodeHtml.Models
{
using
System;
using
System.ComponentModel.DataAnnotations;
public
class
Change
{
[Required]
[MaxLength(140)]
public
string
Type {
get;
set;
}
public
DateTime
Date {
get;
set;
}
}
}
Step3
Create the "Controller" Class
- In the "Solution Explorer" right click on
the "Controller Folder"->"Add"->"Controller".
![htm3.jpg]()
- In "Controller" window Change the name of
Controller.
- In template choose "Empty API
Controller".
![htm5.jpg]()
Write this code in the "ChangesController"
class.
namespace
CodeHtml.Controllers
{
using
System;
using
System.Collections.Generic;
using
System.Net;
using
System.Net.Http;
using
System.Web;
using
System.Web.Http;
using
CodeHtml.Models;
public
class
ChangesController
:
ApiController
{
static
readonly
Dictionary<Guid,
Change>
changes =
new
Dictionary<Guid,
Change>();
[HttpPost]
[ActionName("Code")]
public
HttpResponseMessage
PostComplex(Change
change)
{
if
(ModelState.IsValid && change !=
null)
{
change.Type =
HttpUtility.HtmlEncode(change.Type);
var
Id =
Guid.NewGuid();
changes[Id] = change;
var
response =
new
HttpResponseMessage(HttpStatusCode.Created)
{
Content =
new
StringContent(change.Type)
};
response.Headers.Location =
new
Uri(Url.Link("DefaultApi",
new
{ action =
"type",
Id = Id }));
return
response;
}
else
{
return
Request.CreateResponse(HttpStatusCode.BadRequest);
}
}
[HttpPost]
[ActionName("Decode")]
public
HttpResponseMessage
PostSimple([FromBody]
string
value)
{
if
(value !=
null)
{
Change
change =
new
Change()
{
Type =
HttpUtility.HtmlEncode(value),
Date =
DateTime.UtcNow
};
var
Id =
Guid.NewGuid();
changes[Id] = change;
var
response =
new
HttpResponseMessage(HttpStatusCode.Created)
{
Content =
new
StringContent(change.Type)
};
response.Headers.Location =
new
Uri(Url.Link("DefaultApi",
new
{ action =
"type",
Id = Id }));
return
response;
}
else
{
return
Request.CreateResponse(HttpStatusCode.BadRequest);
}
}
[HttpGet]
public
Change
Type(Guid
Id)
{
Change
change;
if
(changes.TryGetValue(Id,
out
change))
{
return
change;
}
else
{
throw
new
HttpResponseException(HttpStatusCode.NotFound);
}
}
}
}
Step4
Write the code in the "Index.cshtml" file. The
file is found in.
- In the "Solution Explorer" .
- IN "View folder"->"Home"->"Index.cshtml".
![htm4.jpg]()
Write this code in the "Index.cshtml".
@section Scripts {
<script
type="text/javascript">
$("#form1").submit(function
() {
var
Serial = $.post('api/changes/code',
$('#form1').serialize())
.success(function
() {
var
path = Serial.getResponseHeader('Location');
var
i = $('<a/>',
{ href: path, text: path });
$('#message').html(i);
})
.error(function
() {
$('#message').html("Error
for changes.");
});
return
false;
});
$('#form2').submit(function
() {
var
Serial = $.post('api/changes/decode',
{
"":
$('#type1').val()
})
.success(function
() {
var
path = Serial.getResponseHeader('Location');
var
i = $('<a/>',
{ href: path, text: path });
$('#message').html(i);
})
.error(function
() {
$('#message').html("Error
for changes.");
});
return
false;
});
</script>
}
<header>
<div
class="content-wrapper">
<div
class="float-left">
<p
class="site-title">
<a
href="~/">HTML
Form Data</a></p>
</div>
</div>
</header>
<div
id="body">
<section
class="content-wrapper
main-content clear-fix">
<h1>Data
with Date</h1>
<form
id="form1"
method="post"
action="api/changes/code"
enctype="application/x-www-form-urlencoded">
<div>
<label
for="type">Code</label>
</div>
<div>
<input
name="type"
type="text"
/>
</div>
<div>
<label
for="date">Date</label>
</div>
<div>
<input
name="date"
type="text"
/>
</div>
<div>
<input
type="submit"
value="Submit"
/>
</div>
</form>
<h1>Data
without Date</h1>
<form
id="form2">
<div>
<label
for="type">Decode</label>
</div>
<div>
<input
id="type1"
type="text"
/>
</div>
<div>
<input
type="submit"
value="Submit"
/>
</div>
</form>
<h3
id="message"
/>
</section>
</div>
Step5
Change the following code in the "WebApiConfig.cs" file.
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web.Http;
namespace
wpfWebAPi
{
public
static
class
WebApiConfig
{
public
static
void
Register(HttpConfiguration
config)
{
config.Routes.MapHttpRoute(
name:
"DefaultApi",
routeTemplate:
"api/{controller}/{id}",
defaults:
new
{ id =
RouteParameter.Optional
}
);
Output
Execute the application Press F5
![htmout.jpg]()
Insert the data into the the Textboxes.
![htmout1.jpg]()
When the user clicks on the Submit Button then the action is
performe and the browser sends the HTTP request and generates a URL.
![htmout2.jpg]()
When the URL is clicked it shows the data that is
inserted by the user.
![htmout3.jpg]()
It generates by default the current Date.
![htmout4.jpg]()