0
Garysund created
Hi There
I have a view with many file upload controls on it with alot of other form fields aswell.
I am trying to post to a controller using ajax but I not sure how to post all the form fields without explicitly sending them. Any ideas?
controller
[HttpPost]
[UnitOfWork]
[DisableValidation]
public virtual async Task<JsonResult> UpdateProfile4(UpdateProfile4Model model)
{
var filestest = Request.Files["CompanyRegDoc"].FileName;
var supplierDetail = await _supplierDetailRepository.GetAsync(model.SupplierDetailId.GetValueOrDefault());
supplierDetail.CompanyRegDocId = await UpdateFile(Request.Files["CompanyRegDoc"], supplierDetail.CompanyRegDocId);
await _supplierDetailRepository.UpdateAsync(supplierDetail);
return Json(new AjaxResponse { TargetUrl = "Terms" });
}
Ajax call
var $loginForm = $('.profile4-form');
var formdata = new FormData($loginForm.get(0))
$loginForm.submit(function (e) {
e.preventDefault();
abp.ui.setBusy(
null,
abp.ajax({
contentType: false,
processData: false,
url: $loginForm.attr('action'),
data: formdata.serialize()
})
);
});
view
@using Abp.Application.Services.Dto
@using Clarity.BabcockCRM.Web.Areas.Mpa.Models.Common.Modals
@using Abp.Web.Mvc.Extensions
@using Clarity.BabcockCRM.Authorization
@using Clarity.BabcockCRM.Web.Navigation
@using Clarity.BabcockCRM.Web.Areas.Mpa.Models.Company
@model Clarity.BabcockCRM.Web.Areas.Mpa.Models.Company.Page4ViewModel
@{
ViewBag.CurrentPageName = PageNames.App.Common.Profile;
}
@section Styles
{
@Html.IncludeStyle("~/Areas/Mpa/Views/CompanyAdmin/Index.min.css")
@Html.IncludeStyle("~/libs/jasny-bootstrap/css/jasny-bootstrap.min.css")
@Html.IncludeStyle("~/libs/bootstrap-datepicker/css/bootstrap-datetimepicker.min.css")
@Html.IncludeStyle("~/libs/pace/pace-theme-center-radar.css")
}
@section Scripts
{
<script src="~/libs/bootstrap-datepicker/js/bootstrap-datetimepicker.min.js"></script>
@Html.IncludeScript("~/libs/jasny-bootstrap/js/jasny-bootstrap.min.js")
@Html.IncludeScript("~/libs/bootstrap-datepicker/js/bootstrap-datetimepicker.min.js")
@Html.IncludeScript("~/Areas/Mpa/Views/CompanyAdmin/_CompanyDetails.js")
@Html.IncludeScript("~/libs/pace/pace.min.js")
}
<form class="profile4-form" enctype="multipart/form-data" action="@Url.Action("UpdateProfile4")" method="post">
@Html.AntiForgeryToken()
<div id="CompanyDetails">
<div class="row row-eq-height">
<div class="portlet light col-lg-9 col-md-12">
<div class="portlet-body">
<div>
<p class="list-group-item-text">
<h4>My Profile | @Model.UserDetails.CompanyName - @Model.UserDetails.EmailAddress</h4>
</p>
<div class="form-group">
<label>@L("UploadCompanyRegDoc")</label>
<div class="fileinput fileinput-new input-group" data-provides="fileinput">
<div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>
<span class="input-group-addon btn btn-default btn-file">
<span class="fileinput-new"><i class="glyphicon glyphicon-open"></i></span><span class="fileinput-exists">Change</span>
<input type="file" name="CompanyRegDoc">
</span>
<a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>
@if (Model.SupplierDetails.SupplierDetail.CompanyRegDocId != null)
{
@Html.ActionLink("Downlaod", "DownLoadFile", new { id = Model.SupplierDetails.SupplierDetail.CompanyRegDocId,filename = Model.SupplierDetails.SupplierDetail.CompanyRegDocId + ".pdf" })
}
</div>
<div class="form-group">
<label>@L("UploadExperianReport")</label>
<div class="fileinput fileinput-new input-group" data-provides="fileinput">
<div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>
<span class="input-group-addon btn btn-default btn-file">
<span class="fileinput-new"><i class="glyphicon glyphicon-open"></i></span><span class="fileinput-exists">Change</span>
<input type="file" name="ExperianReport">
</span>
<a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>
</div>
<div class="form-group">
<label>@L("UploadSLA")</label>
<div class="fileinput fileinput-new input-group" data-provides="fileinput">
<div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>
<span class="input-group-addon btn btn-default btn-file">
<span class="fileinput-new"><i class="glyphicon glyphicon-open"></i></span><span class="fileinput-exists">Change</span>
<input type="file" name="SLA">
</span>
<a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>
</div>
<div class="form-group">
<label>@L("UploadConfidentialityAgreement")</label>
<div class="fileinput fileinput-new input-group" data-provides="fileinput">
<div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>
<span class="input-group-addon btn btn-default btn-file">
<span class="fileinput-new"><i class="glyphicon glyphicon-open"></i></span><span class="fileinput-exists">Change</span>
<input type="file" name="ConfidentialityAgreement">
</span>
<a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>
</div>
<div class="form-group">
<label>@L("UploadConfidentialityAgreement")</label>
<div class="fileinput fileinput-new input-group" data-provides="fileinput">
<div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>
<span class="input-group-addon btn btn-default btn-file">
<span class="fileinput-new"><i class="glyphicon glyphicon-open"></i></span><span class="fileinput-exists">Change</span>
<input type="file" name="ConfidentialityAgreement">
</span>
<a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>
</div>
<div class="form-group">
<label>@L("UploadCQIDA")</label>
<div class="fileinput fileinput-new input-group" data-provides="fileinput">
<div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>
<span class="input-group-addon btn btn-default btn-file">
<span class="fileinput-new"><i class="glyphicon glyphicon-open"></i></span><span class="fileinput-exists">Change</span>
<input type="file" name="CQIDA">
</span>
<a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>
</div>
<div class="form-group">
<label>@L("UploadPublicLiability")</label>
<div class="fileinput fileinput-new input-group" data-provides="fileinput">
<div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>
<span class="input-group-addon btn btn-default btn-file">
<span class="fileinput-new"><i class="glyphicon glyphicon-open"></i></span><span class="fileinput-exists">Change</span>
<input type="file" name="CQIDA">
</span>
<a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>
</div>
<div class="form-group">
<label for="PaymentTermId">@L("BeeLevel")</label>
@Html.DropDownList("BeeLevelId", Model.BeeLevel.Select(i => i.ToSelectListItem()), new { @class = "form-control edited" })
</div>
<div class="form-group form-md-line-input form-md-floating-label">
<input class="form-control placeholder-no-fix" type="text" name="BlackOwnedPercentage" value="@Model.SupplierDetails.SupplierDetail.BlackOwnedPercentage" />
<label>@L("BlackOwnedPercentage")</label>
</div>
<div class="form-group form-md-line-input form-md-floating-label">
<input class="form-control placeholder-no-fix" type="text" name="WomanBlackOwnedPercentage" value="@Model.SupplierDetails.SupplierDetail.WomanBlackOwnedPercentage" />
<label>@L("WomanBlackOwnedPercentage")</label>
</div>
<div class="form-group">
<label>@L("BeeCertificateExpiryDate")</label>
<div class='input-group date' id='BeeCertificateExpiryDate'>
<input type='text' class="form-control"name="BeeCertificateExpiryDate" value="@Model.SupplierDetails.SupplierDetail.BeeCertificateExpiryDate" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="form-group">
<label>@L("UploadBeeCertificate")</label>
<div class="fileinput fileinput-new input-group" data-provides="fileinput">
<div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>
<span class="input-group-addon btn btn-default btn-file">
<span class="fileinput-new"><i class="glyphicon glyphicon-open"></i></span><span class="fileinput-exists">Change</span>
<input type="file" name="BeeCertificate">
</span>
<a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>
</div>
<div class="md-checkbox-list">
<div class="md-checkbox">
<input id="VatRegistered" class="md-check" type="checkbox" name="IsVatRegistered" value="true" @(Model.SupplierDetails.SupplierDetail.IsVatRegistered ? "checked=\"checked\"" : "")>
<label for="VatRegistered">
<span class=""></span>
<span class="check"></span>
<span class="box"></span>
@L("VatRegistered")
</label>
</div>
</div>
<div class="form-group form-md-line-input form-md-floating-label">
<input class="form-control placeholder-no-fix" type="text" name="VatRegistrationNumber" value="@Model.SupplierDetails.SupplierDetail.VatRegistrationNumber" />
<label>@L("VatRegistrationNumber")</label>
</div>
<div class="md-checkbox-list">
<div class="md-checkbox">
<input id="TaxClearance" class="md-check" type="checkbox" name="HasTaxClearanceCertificate" value="true" @(Model.SupplierDetails.SupplierDetail.HasTaxClearanceCertificate ? "checked=\"checked\"" : "")>
<label for="TaxClearance">
<span class=""></span>
<span class="check"></span>
<span class="box"></span>
@L("TaxClearanceCertificate")
</label>
</div>
</div>
<div class="form-group">
<label>@L("TaxClearanceExpiryDate")</label>
<div class='input-group date' id='BeeCertificateExpiryDate'>
<input type='text' class="form-control" name="TaxClearanceCertificateExpiryDate" value="@Model.SupplierDetails.SupplierDetail.TaxClearanceCertificateExpiryDate" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="form-group">
<label>@L("UploadTaxClearanceCertificate")</label>
<div class="fileinput fileinput-new input-group" data-provides="fileinput">
<div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>
<span class="input-group-addon btn btn-default btn-file">
<span class="fileinput-new"><i class="glyphicon glyphicon-open"></i></span><span class="fileinput-exists">Change</span>
<input type="file" name="TaxClearanceCertificate">
</span>
<a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>
</div>
<div class="md-checkbox-list">
<div class="md-checkbox">
<input id="QualityAudit" class="md-check" type="checkbox" name="HasQualityAudit" value="true" @(Model.SupplierDetails.SupplierDetail.HasQualityAudit ? "checked=\"checked\"" : "")>
<label for="QualityAudit">
<span class=""></span>
<span class="check"></span>
<span class="box"></span>
@L("QualityAudit")
</label>
</div>
</div>
<div class="form-group">
<label>@L("QualityAuditDate")</label>
<div class='input-group date' id='BeeCertificateExpiryDate'>
<input type='text' class="form-control" name="QualityAuditExpiryDate" value="@Model.SupplierDetails.SupplierDetail.QualityAuditExpiryDate" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="form-group">
<label>@L("UploadQualityAuditReport")</label>
<div class="fileinput fileinput-new input-group" data-provides="fileinput">
<div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>
<span class="input-group-addon btn btn-default btn-file">
<span class="fileinput-new"><i class="glyphicon glyphicon-open"></i></span><span class="fileinput-exists">Change</span>
<input type="file" name="QualityAuditReport">
</span>
<a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>
</div>
<div class="md-checkbox-list">
<div class="md-checkbox">
<input id="VendorAudit" class="md-check" type="checkbox" name="HasVendorAudit" value="true" @(Model.SupplierDetails.SupplierDetail.HasVendorAudit ? "checked=\"checked\"" : "")>
<label for="VendorAudit">
<span class=""></span>
<span class="check"></span>
<span class="box"></span>
@L("VendorAudit")
</label>
</div>
</div>
<div class="form-group">
<label>@L("HasVendorAuditDate")</label>
<div class='input-group date' id='BeeCertificateExpiryDate'>
<input type='text' class="form-control" name="VendorAuditExpiryDate" value="@Model.SupplierDetails.SupplierDetail.VendorAuditExpiryDate" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="form-group">
<label>@L("UploadVendorAuditReport")</label>
<div class="fileinput fileinput-new input-group" data-provides="fileinput">
<div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>
<span class="input-group-addon btn btn-default btn-file">
<span class="fileinput-new"><i class="glyphicon glyphicon-open"></i></span><span class="fileinput-exists">Change</span>
<input type="file" name="VendorAuditReport">
</span>
<a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>
</div>
<div class="form-group">
<label for="PaymentTermId">@L("ContractedSupplier")</label>
@Html.DropDownList("ContractedSupplierId", Model.ContractedSupplier.Select(i => i.ToSelectListItem()), new { @class = "form-control edited" })
</div>
<div class="form-group">
<label>@L("UploadTransportSolutions")</label>
<div class="fileinput fileinput-new input-group" data-provides="fileinput">
<div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>
<span class="input-group-addon btn btn-default btn-file">
<span class="fileinput-new"><i class="glyphicon glyphicon-open"></i></span><span class="fileinput-exists">Change</span>
<input type="file" name="TransportSolutions">
</span>
<a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>
</div>
<div class="form-group">
<label>@L("UploadPowerGeneration")</label>
<div class="fileinput fileinput-new input-group" data-provides="fileinput">
<div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>
<span class="input-group-addon btn btn-default btn-file">
<span class="fileinput-new"><i class="glyphicon glyphicon-open"></i></span><span class="fileinput-exists">Change</span>
<input type="file" name="PowerGeneration">
</span>
<a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>
</div>
<input type="hidden" name="SupplierDetailId" value="@Model.SupplierDetails.SupplierDetail.Id" />
<div class="form-actions">
<button type="submit" id="register-submit-btn" class="btn btn-success uppercase pull-right">@L("Next")</button>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-12 info-sidebar">
<div><img src="~/Content/images/Steps-01.png" width="100" /></div>
<div class="info-block">
<i class="fa fa-folder-open fa-4x"></i>
<h4>Documents</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
</div>
</div>
</div>
</form>
1 Answer(s)
-
0
Hi @Garysund,
Have you checked on the web ? This is a common ASP.NET & jQuery use case actually.
