How do I stay on the page and return only a string response after form submission? can I use ajax form submission with files?

Question

I currently have a form which has a mix of normal textual input and file(upload) input.

So my viewModel is roughly structured like this:

public string PROD
public string WH
public HttpPostedFileBase ImageFile
public HttpPostedFileBase ImageFile

My view is constructed in a manner like this:

@model ISE.Solution2.ViewModel.INV_Master 
@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "product-master-form", enctype = "multipart/form-data" }))
{
      @Html.LabelFor(model => model.PROD, htmlAttributes: new { @class = "control-label col-sm-3 col-form-label" })
     <div class="col-sm-9">
      @Html.DropDownListFor(model => model.PROD, Enumerable.Empty<SelectListItem>(), new { @id = "product-code", @class = "form-control" })
     </div>

     <!--more markup written here -->

}

Before I submit the form, my page looks like this:

So the form is originally called by public ActionResult MasterCl(int? id){} in the controller. When the form is submitted, it currently goes to another method in the controller:

[HttpPost] 
public async Task<ActionResult> MasterCl(INV_Master masterViewModel){}

So the method above simply return View()

Which means I come back to my page where the form is and presumably with all the filled up fields in the field remaining intact. But my page looks like this:

My record is saved into the database properly, but the dropdown fields lose their state because they are javascript created. They are not normal html <select> elements.

I want to prevent this from happening. Because after the form data is POST to server side, there maybe server side validation done and there might be errors in the form which I want to prompt some sort of notification. I was imagining that the user will come back to the filled up form and I show a javascript alert stating which part of the form is not apporpriately filled.

I am lost at this part. I was thinking if I could possibly use Ajax.BeginForm to POST data to the controller instead. If I do that,then I will still stay in the page and response of the POST is determined by the JSON string supplied, and thus I will be able to use js to show alert for that content. Problem is I am not sure if I can use AJAX.Begin from if I am also using file upload.

some pages made me think that it is possible to use ajax to POST data... link1 link2

You can use FormData and ajax to submit files as well. Refer this [Jquery ajax form submit that contains files](https://stackoverflow.com/questions/34603739/jquery-ajax-form-submit-that-contains-files/34604232#34604232) — Shyju, Sep 12 '18 at 05:55
Refer [this DotNetFiddle](https://dotnetfiddle.net/1bPZym) for how to generate you dropdownlists correctly (so they retain state) — , Sep 12 '18 at 06:01
But why do you want to return the view (you typically only do that is `ModelState` is invalid, so that validation errors can be corrected - otherwise you should be redirecting) — , Sep 12 '18 at 06:03

How do I stay on the page and return only a string response after form submission? can I use ajax form submission with files?

0 Answers0