jQuery将数据发布到webapi

时间:2018-06-12 15:53:10

标签: javascript jquery typescript asp.net-web-api

我的问题有两个:1。从客户端向我的webapi控制器发送数据时,名称必须相同吗?

如果我有这样的模型:

public class Donation
{
    public string DonorType { get; set; }
    //etc
}

但我的网页上的表单是这样的:

<div class="button-group grid-x align-center" id='sz-gift-source-group'>
    <a class="hollow button cell small-6" id="sz-donate-individual" sz-data-toggle-button required>A family or individual</a>
    <a class="hollow button cell small-6" id="sz-donate-corporate" sz-data-toggle-button>A business or company</a>
</div>

使用我的事件处理程序:

$('form button[type=submit]').on('click', () => {
    const donation = getDonation();

    $.post(
        '//localhost:61012/api/Donation',
        $("#sz-donate-form").serialize(),
        (data) => {
            console.log(`post succeeded:[${JSON.stringify(data)}]`); 
        })
        .fail((data) => {
            console.log(`post failed:[${JSON.stringify(data)}]`);
        })
        .always((data) => {
            console.log(`post complete:[${JSON.stringify(data)}]`);
        });

    return false;
});

其次,我需要做些什么才能将表单中的数据传输到Donation对象?

我看过的所有教程似乎都错过了我的第一个问题,而我想知道的部分内容是我在这里得到的表格不完整......

1 个答案:

答案 0 :(得分:1)

请注意,您必须对数据进行序列化,然后将输入放在表单标记内,例如:

<form action="/" method="post" id="sz-donate-form">
    <input name="DonorType" type="text">
</form>
  

注意使用按输入名称序列化的serialize()表单数据时   属性!

name属性应与Donation class property相同。

我认为您使用了 typescript

您的javascript代码应该是正确的。

请在webapi中发布您的操作代码以获取它。