text 从angular发送表单到.net核心

Posted 2021-05-01

HTML:

<form id="addressenduser" class="address-form profile-sub-panel">
  <div class="form-field">
    <label for="DOMAIN_PREFIX_" class="domainprefix">DOMAIN PREFIX*</label>
    <input type="text" id="prefixField" name="prefixField" [(ngModel)]="prefixText" class="input no-border"
      maxlength="25" (blur)="checkPrefix()" />
    <span>.onmicrosoft.com</span>
  </div>
  <div class="form-field">
    <label for="USER_NAME_" class="username">USER NAME*</label>
    <input type="text" id="userNameField" name="userNameField" value="admin" readonly class="input no-border"
      maxlength="30" />
    <i title="Password will be generated by Microsoft and will be sent in email" class="master-tooltip info-icon info-icon-red"></i>
  </div>
  <div class="form-field">
    <label for="FIRST_NAME_">FIRST NAME*</label>
    <input type="text" id="firstNameField" name="firstNameField" class="input no-border" maxlength="30" />
  </div>
  <div class="form-field">
    <label for="LAST_NAME_">LAST NAME*</label>
    <input type="text" id="lastNameField" name="lastNameField" class="input no-border" maxlength="30" />
  </div>
  <div class="form-field">
    <label for="COMPANY_NAME_">COMPANY NAME*</label>
    <input type="text" id="companyNameField" name="companyNameField" class="input no-border" maxlength="30" />
  </div>

  <div class="form-field">
    <label for="EMAIL_">EMAIL*</label>
    <input type="text" id="emailField" name="emailField" class="input no-border" maxlength="50" />
  </div>
  <div class="form-field">
    <label for="ADDRESS_LINE_1_">ADDRESS LINE 1*</label>
    <input type="text" id="addressLine1Field" name="addressLine1Field" class="input no-border" maxlength="30" />
  </div>
  <div class="form-field">
    <label for="ADDRESS_LINE_2">ADDRESS LINE 2</label>
    <input type="text" id="addressLine2Field" name="addressline2field" class="input no-border" maxlength="30" />
  </div>
  <div class="form-field">
    <label for="ADDRESS_LINE_3">ADDRESS LINE 3</label>
    <input type="text" id="addressLine3Field" name="addressLine3Field" class="input no-border" maxlength="30" />
  </div>
  <div class="form-field">
    <label for="SUBURB_">SUBURB*</label>
    <input type="text" id="suburbField" name="suburbField" class="input no-border suburbField" maxlength="30" />
  </div>
  <div class="form-field">
    <label for="STATE">STATE</label>
    <select class="form-control custom-dropdown stateMaintainValidate" id="stateMaintain">
      <option value="">CHOOSE A STATE</option>
      <option *ngFor="let state of stateList" value="{{state}}">{{state}}</option>
    </select>
  </div>
  <div class="form-field">
    <label for="POST_CODE_">POST CODE*</label>
    <input type="text" id="postCodeField" name="postCodeField" class="input no-border postCodeField" maxlength="4" />
  </div>
  <div class="form-field">
    <label for="PHONE_">PHONE*</label>
    <input type="number" id="phoneField" name="phoneField" class="input no-border" maxlength="15" />
  </div>
  <input style="visibility:hidden; display: inline" id="addressTypeField" />
  <div id="progress" class="form-field" style="display: inline;color: white; padding-bottom: 10px; padding-top: 10px;">
    <label></label>
    <span id="currentProgress" class="animated-progress fadeIn"></span>
  </div>
  <div class="create-end-user" id="btnCreateEndUser">
    <div class="button button-red button-mid" style="margin-left: 220px;" (click)="createEndUser()">CREATE NEW END USER</div>
  </div>
</form>

Javascript in Angular:

$.ajax({
    type: "POST",
    url: 'api/Checkout/CreateCSPTenant',
    data: { formCollection: $('#addressenduser').serialize() },
    success: function (data) {
        
    }
});

in .net api controller

[HttpGet("CreateCSPTenant")]
[NoCache]
[ProducesResponseType(typeof(ApiResponse), 400)]
[ProducesResponseType(typeof(TenantResponse), 200)]
public IActionResult CreateCSPTenant([FromForm]IFormCollection data)
{
  //get value from IFormCollection
  data["companyNameField"]
}