I have implemented a modal feature that allows users to upload a file. I am looking for a JSON response to indicate whether the upload was successful or not, and then display this information to the end user.
Here is my current View:
@model int
<div id="modal_newSupportPlan" class="modal fade" style="display:none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-primary">
<button type="button" class="close" data-dismiss="modal">x</button>
<h6 class="modal-title">New Support Plan</h6>
</div>
@using (Ajax.BeginForm("CreateSupportPlan", "Client",
new AjaxOptions() { OnSuccess = "getSupportPlanResult", HttpMethod = "post" },
new { @Class = "form-horizontal", enctype = "multipart/form-data" }))
{
<div class="modal-body">
<input name="ClientFK" value="@Model" style="display:none" />
<div class="form-group" id="newsupportplan_error_plantype">
<label class="control-label col-sm-3">Type of Plan</label>
<div class="col-sm-9">
<select id="planType" name="PlanType" class="form-control">
<option></option>
<option value="1">Initial Plan</option>
<option value="2">Pre Employment Plan</option>
<option value="3">6 Month Plan</option>
<option value="4">12 Month Plan</option>
<option value="5">Ongoing Support Plan</option>
</select>
</div>
</div>
<div class="form-group" id="newsupportplan_error_StartDate">
<label class="control-label col-sm-3">Date</label>
<div class="col-sm-9">
<input type="text" class="form-control pickadate-accessibility" name="Date" />
</div>
</div>
<div class="form-group" id="newsuportplan_error_SLILevel">
<label class="control-label col-sm-3">Support Level</label>
<div class="col-sm-9">
<select id="SliLevel" name="SliLevel" class="form-control">
<option></option>
<option value="1">SLI 1</option>
<option value="2">SLI 2</option>
<option value="3">SLI 3</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Upload File</label>
<div class="col-sm-9">
<input type="file" name="Blob" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
}
</div>
</div>
This is my Controller method:
[HttpPost]
public ActionResult CreateSupportPlan(ModelHelper.SupportPlanViewModel supportPlanDetails)
{
try
{
esp_storage_supportPlans espStorageSupportPlans = new esp_storage_supportPlans();
bool validation = true;
var errorList = new List<string>();
var passList = new List<string>();
// Validation logic here...
if (!validation)
{
return Json(new { result = "Validation", errors = errorList, pas s= passList }, JsonRequestBehavior.AllowGet);
}
return Json(new { result = "success" }, JsonRequestBehavior.AllowGet);
}
catch (Exception)
{
return Json(new { result = "failed" }, JsonRequestBehavior.AllowGet);
}
}
My JavaScript consists of two parts: the first part makes the form work by uploading the file, while the second part handles the success function:
window.addEventListener("submit", function (e) {
// First part of JavaScript code
}, true);
// Second part of JavaScript code
function getSupportPlanResult(data) {
console.log("here");
if (data.result === "success") {
// Success message handling here...
} else {
// Error message handling here...
}
}