Below is the model which I, am using to load image and other data.
public class SubCategoryTwoViewModel
{
public long Id { get; set; }
public string SubCatTwoName { get; set; }
public CategoryViewModel Category { get; set; }
public SubCategoryOneViewModel SubCatOne { get; set; }
public string PictureUrl { get; set; }
public IFormFile File { get; set; }
public UserViewModel AddedBy { get; set; }
public DateTime AddedOn { get; set; }
public UserViewModel Updated_By { get; set; }
public DateTime? UpdatedOn { get; set; }
public bool Active { get; set; }
}
Controller Method
[HttpPost]
public JsonResult AddEditSubCategoryTwo([FromBody] SubCategoryTwoViewModel model)
{
}
Knockout method to pass the data to the controller
AddEditSubCategorytwo: function () {
var self = this;
var ajaxUrl = ApplicationRootUrl("AddEditSubCategoryTwo", "Category");
var logo = $('#subCatFile')[0].files[0];
var subCategoryTwoModel = {
SubCatTwoName: self.subCatTwoName(),
Category: {
CategoryId: self.selectCategory()
},
SubCatOne: {
SubCategoryOneId: self.selectCategorytwo()
},
Active: self.active(),
File: logo
};
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: ajaxUrl,
dataType: "json",
data: ko.toJSON(subCategoryTwoModel),
success: function (data) {
},
error: function (err) {
}
});
},
Here is the Html Code
<form class="form-horizontal" id="SubCategorytwoValidation">
<div class="form-group">
<label class="control-label col-sm-4">Sub Category Name</label>
<div class="col-sm-8">
<input type="text" name="SubCategorytwoName" data-bind="textinput: subCatTwoName" class="form-control" placeholder="Enter Sub Category Name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4">Category Name</label>
<div class="col-sm-8">
<select name="categoryName" class="selectpicker" data-live-search="true" data-bind="selectPicker:true, options:categoryResponseData, value:selectCategory,optionsText:'categoryName',optionsValue:'categoryId', optionsCaption: ' ---Select Category---'"></select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4">Sub Category Name</label>
<div class="col-sm-8">
<select name="SubCategoryoneName" class="selectpicker" data-live-search="true" data-bind="selectPicker:true, options:subCategoryByCategoryId, value:selectCategorytwo,optionsText:'subCatOneName',optionsValue:'subCategoryOneId', optionsCaption: ' ---Select Sub Category---'"></select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4">Image</label>
<div class="col-sm-8">
<div class="input-group">
<!-- image-preview-filename input [CUT FROM HERE]-->
<div class="input-group image-preview">
<input type="text" class="form-control image-preview-filename" disabled="disabled"> <!-- don't give a name === doesn't send on POST/GET -->
<span class="input-group-btn">
<!-- image-preview-clear button -->
<button type="button" class="btn btn-default image-preview-clear" style="display:none;">
<span class="glyphicon glyphicon-remove"></span> Clear
</button>
<!-- image-preview-input -->
<div class="btn btn-default image-preview-input">
<span class="glyphicon glyphicon-folder-open"></span>
<input type="file" id="subCatFile" name="subCatFile" /> <!-- rename it -->
</div>
</span>
</div><!-- /input-group image-preview [TO HERE]-->
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4">Active</label>
<div class="col-sm-8">
<input data-bind="bootstrapToggleOn: active" data-toggle="toggle" data-on="Yes" data-off="No" data-onstyle="primary" data-offstyle="danger" type="checkbox">
</div>
</div>
</form>
The problem is I, am getting an null value in the IFormFile File property. I, am getting the other property value except File property. I am using knockout.js
I, have followed the other link http://www.binaryintellect.net/articles/f1cee257-378a-42c1-9f2f-075a3aed1d98.aspx Posting files and model to controller in ASP.NET Core MVC6 But still not able to solve this issue. Can please anyone let me know how to pass data as well as image
