Bagikan melalui

Mengirim Data Formulir HTML di ASP.NET Web API: Data yang dikodekan url formulir

Bagian 1: Data yang dikodekan url formulir

Artikel ini memperlihatkan cara memposting data yang dikodekan url formulir ke pengontrol API Web.

Catatan

Unduh proyek yang telah selesai.

Gambaran Umum Formulir HTML

Formulir HTML menggunakan GET atau POST untuk mengirim data ke server. Atribut metode dari elemen formulir memberikan metode HTTP:

<form action="api/values" method="post">

Metode defaultnya adalah GET. Jika formulir menggunakan GET, data formulir dikodekan dalam URI sebagai string kueri. Jika formulir menggunakan POST, data formulir ditempatkan di isi permintaan. Untuk data POSTed, atribut enctype menentukan format isi permintaan:

enctype Deskripsi
application/x-www-form-urlencoded Data formulir dikodekan sebagai pasangan nama/nilai, mirip dengan string kueri URI. Ini adalah format default untuk POST.
multipart/form-data Data formulir dikodekan sebagai pesan MIME multipihak. Gunakan format ini jika Anda mengunggah file ke server.

Bagian 1 dari artikel ini melihat format x-www-form-urlencoded. Bagian 2 menjelaskan MIME multipihak.

Mengirim Tipe Kompleks

Biasanya, Anda akan mengirim jenis kompleks, yang terdiri dari nilai yang diambil dari beberapa kontrol formulir. Pertimbangkan model berikut yang mewakili pembaruan status:

namespace FormEncode.Models
{
    using System;
    using System.ComponentModel.DataAnnotations;

    public class Update
    {
        [Required]
        [MaxLength(140)]
        public string Status { get; set; }

        public DateTime Date { get; set; }
    }
}

Berikut adalah pengontrol API Web yang menerima Update objek melalui POST.

namespace FormEncode.Controllers
{
    using FormEncode.Models;
    using System;
    using System.Collections.Generic;
    using System.Net;
    using System.Net.Http;
    using System.Web;
    using System.Web.Http;

    public class UpdatesController : ApiController
    {
        static readonly Dictionary<Guid, Update> updates = new Dictionary<Guid, Update>();

        [HttpPost]
        [ActionName("Complex")]
        public HttpResponseMessage PostComplex(Update update)
        {
            if (ModelState.IsValid && update != null)
            {
                // Convert any HTML markup in the status text.
                update.Status = HttpUtility.HtmlEncode(update.Status);

                // Assign a new ID.
                var id = Guid.NewGuid();
                updates[id] = update;

                // Create a 201 response.
                var response = new HttpResponseMessage(HttpStatusCode.Created)
                {
                    Content = new StringContent(update.Status)
                };
                response.Headers.Location = 
                    new Uri(Url.Link("DefaultApi", new { action = "status", id = id }));
                return response;
            }
            else
            {
                return Request.CreateResponse(HttpStatusCode.BadRequest);
            }
        }

        [HttpGet]
        public Update Status(Guid id)
        {
            Update update;
            if (updates.TryGetValue(id, out update))
            {
                return update;
            }
            else
            {
                throw new HttpResponseException(HttpStatusCode.NotFound);
            }
        }

    }
}

Catatan

Pengontrol ini menggunakan perutean berbasis tindakan, sehingga templat rute adalah "api/{controller}/{action}/{id}". Klien akan memposting data ke "/api/update/complex".

Sekarang mari kita tulis formulir HTML bagi pengguna untuk mengirimkan pembaruan status.

<h1>Complex Type</h1>
<form id="form1" method="post" action="api/updates/complex" 
    enctype="application/x-www-form-urlencoded">
    <div>
        <label for="status">Status</label>
    </div>
    <div>
        <input name="status" 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>

Perhatikan bahwa atribut tindakan pada formulir adalah URI tindakan pengontrol kami. Berikut adalah formulir dengan beberapa nilai yang dimasukkan dalam:

Cuplikan layar formulir Tipe Kompleks H T M L dengan bidang Status dan bidang Tanggal yang diisi dengan nilai.

Saat pengguna mengklik Kirim, browser mengirimkan permintaan HTTP yang mirip dengan yang berikut ini:

POST http://localhost:38899/api/updates/complex HTTP/1.1
Accept: text/html, application/xhtml+xml, */*
User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)
Content-Type: application/x-www-form-urlencoded
Content-Length: 47

status=Shopping+at+the+mall.&date=6%2F15%2F2012

Perhatikan bahwa isi permintaan berisi data formulir, yang diformat sebagai pasangan nama/nilai. WEB API secara otomatis mengonversi pasangan nama/nilai menjadi instans Update kelas.

Mengirim Data Formulir melalui AJAX

Saat pengguna mengirimkan formulir, browser menavigasi jauh dari halaman saat ini dan merender isi pesan respons. Tidak apa-apa jika responsnya adalah halaman HTML. Namun, dengan API web, isi respons biasanya kosong atau berisi data terstruktur, seperti JSON. Dalam hal ini, lebih masuk akal untuk mengirim data formulir menggunakan permintaan AJAX, sehingga halaman dapat memproses respons.

Kode berikut menunjukkan cara memposting data formulir menggunakan jQuery.

<script type="text/javascript">
    $("#form1").submit(function () {
        var jqxhr = $.post('api/updates/complex', $('#form1').serialize())
            .success(function () {
                var loc = jqxhr.getResponseHeader('Location');
                var a = $('<a/>', { href: loc, text: loc });
                $('#message').html(a);
            })
            .error(function () {
                $('#message').html("Error posting the update.");
            });
        return false;
    });
</script>

Fungsi kirim jQuery menggantikan tindakan formulir dengan fungsi baru. Ini mengambil alih perilaku default tombol Kirim. Fungsi serialisasi menserialisasikan data formulir ke dalam pasangan nama/nilai. Untuk mengirim data formulir ke server, panggil $.post().

Ketika permintaan selesai, handler .success() atau .error() menampilkan pesan yang sesuai kepada pengguna.

Cuplikan layar formulir Jenis Kompleks H T M L dengan kesalahan host lokal ditampilkan dalam teks tebal kepada pengguna.

Mengirim Jenis Sederhana

Di bagian sebelumnya, kami mengirim jenis kompleks, yang dideserialisasi API Web ke instans kelas model. Anda juga dapat mengirim jenis sederhana, seperti string.

Catatan

Sebelum mengirim jenis sederhana, pertimbangkan untuk membungkus nilai dalam jenis kompleks sebagai gantinya. Ini memberi Anda manfaat validasi model di sisi server, dan memudahkan untuk memperluas model Anda jika diperlukan.

Langkah-langkah dasar untuk mengirim jenis sederhana sama, tetapi ada dua perbedaan halang. Pertama, di pengontrol, Anda harus menghias nama parameter dengan atribut FromBody .

[HttpPost]
[ActionName("Simple")]
public HttpResponseMessage PostSimple([FromBody] string value)
{
    if (value != null)
    {
        Update update = new Update()
        {
            Status = HttpUtility.HtmlEncode(value),
            Date = DateTime.UtcNow
        };

        var id = Guid.NewGuid();
        updates[id] = update;

        var response = new HttpResponseMessage(HttpStatusCode.Created)
        {
            Content = new StringContent(update.Status)
        };
        response.Headers.Location = 
            new Uri(Url.Link("DefaultApi", new { action = "status", id = id }));
        return response;
    }
    else
    {
        return Request.CreateResponse(HttpStatusCode.BadRequest);
    }

Secara default, Web API mencoba mendapatkan jenis sederhana dari URI permintaan. Atribut FromBody memberi tahu Web API untuk membaca nilai dari isi permintaan.

Catatan

WEB API membaca isi respons paling banyak sekali, sehingga hanya satu parameter tindakan yang dapat berasal dari isi permintaan. Jika Anda perlu mendapatkan beberapa nilai dari isi permintaan, tentukan jenis kompleks.

Kedua, klien perlu mengirim nilai dengan format berikut:

=value

Secara khusus, bagian nama pasangan nama/nilai harus kosong untuk jenis sederhana. Tidak semua browser mendukung ini untuk formulir HTML, tetapi Anda membuat format ini dalam skrip sebagai berikut:

$.post('api/updates/simple', { "": $('#status1').val() });

Berikut adalah contoh formulir:

<h1>Simple Type</h1>
<form id="form2">
    <div>
        <label for="status">Status</label>
    </div>
    <div>
        <input id="status1" type="text" />
    </div>
    <div>
        <input type="submit" value="Submit" />
    </div>
</form>

Dan berikut adalah skrip untuk mengirimkan nilai formulir. Satu-satunya perbedaan dari skrip sebelumnya adalah argumen yang diteruskan ke fungsi posting .

$('#form2').submit(function () {
    var jqxhr = $.post('api/updates/simple', { "": $('#status1').val() })
        .success(function () {
            var loc = jqxhr.getResponseHeader('Location');
            var a = $('<a/>', { href: loc, text: loc });
            $('#message').html(a);
        })
        .error(function () {
            $('#message').html("Error posting the update.");
        });
    return false;
});

Anda dapat menggunakan pendekatan yang sama untuk mengirim array jenis sederhana:

$.post('api/updates/postlist', { "": ["update one", "update two", "update three"] });

Sumber Daya Tambahan

Bagian 2: Unggah File dan MIME Multipart