Insert new field for upload when click in a button .net mvc

Question

I'm trying to send multiple images to my controller during an item's registration.

I'm having a problem because I need to allow the user to click a button and a new input field and description input must appear in the DOM.

 @using (Html.BeginForm("Cadastrar", "Os", FormMethod.Post, new { id = "frmCadastrarOS" , enctype = "multipart/form-data" }))
            {

    @* Others .net razor input fields *@

    <div class="col-md-12">
            <fieldset class="col-md-12 m-b-20">
                <legend>UPLOAD</legend>
                <div class="col-md-1 pull-right">
                    <a href="#" id="btn-fileUpload" class="btn btn-success waves-effect espaco pull-right auto-size pull" style="float: right;"><i class="zmdi zmdi-plus"></i></a>
                </div>
                <br />
                <br />
                <div class="row" id="rowUpload">
                    <div id="upload-content">

                    </div>
                </div>
            </fieldset>
        </div>
<button type="submit" id="salveOS" class="btn btn-primary waves-effect" style="float: right; text-transform: uppercase;">Save</button>
}

@section scripts {
    <script>
        var uploadDescricao = '<div class="col-md-4 form-group fg-float"> <div class="fg-line" style="margin-left:20px; margin-top:2px;"><input id="Foto" class="form-control fg-input input-file" title="Nenhum arquivo selecionado" type="file" name="files"/></div></div>';
        var uploadTextArea = '<div class="col-md-7 form-group fg-float fg-line"> <input type="text" placeholder="Descrição do arquivo..." id ="inputDescricao" class="form-control fg-input  auto-size remover-h-I"></input></div></div> '

                $('#btn-fileUpload').click(function ()
                {
                    console.log("fileupload");
                    $('#upload-content').append('<div class="row">' + uploadDescricao + uploadTextArea + '</div>');


                })
    </script>
}

I do not know how to send the values entered in these fields to my controller.

 public ActionResult Create (OsViewModel osViewModel, IEnumerable<HttpPostedFileBase> files)
{
       //todo 
}

Not sure why you accepted an bad answer that cannot work and bind to your model. Refer [this answer](http://stackoverflow.com/questions/28019793/submit-same-partial-view-called-multiple-times-data-to-controller/28081308#28081308) for some options for doing this correctly — , Feb 03 '17 at 22:09

Utkarsh Bais · Accepted Answer · 2017-02-03T16:35:36.550

0

You can add your fields dynamically using scripts, then what you can do is upon the submit of the form, call your action method and pass the value of your input fields as parameters. You can call you action method upon post as follows :

@using (Html.BeginForm("YourActionMethod", "Controller"))
{
 <input type="hidden" id="TextBox1" name="TextBox1" value="YourData" />
 <input type="submit" value="Text you want displayed on your button"/>
}

and your action method can look like :

public ActionResult YourActionMethod(string TextBox1)
{

//Here whatever you type in the text box will come when you submit as TextBox1
}

If you have multiple values to pass, you can make the parameters as

List<string> paramList

edited Feb 03 '17 at 16:35

answered Feb 03 '17 at 14:07

Utkarsh Bais

197
8

are you saying when i submit my view model on form i get the button click and send my inputs to other action ? – Fábio Carvalho Feb 03 '17 at 15:24
Yes, essential when you submit, i.e. the button click, the action method mentioned in the "BeginForm" would be hit, and there you can capture your inputs in the form of parameteres. Let me give you a code example. – Utkarsh Bais Feb 03 '17 at 15:46
I've updated the code, it should work for you now. Happy Coding ! – Utkarsh Bais Feb 03 '17 at 15:50
Utkarsh I appreciate your help. But my question is that I do not have a fixed number of inputs for my two values. The user will click a "+" button for each click, he insert the two new fields in the DOM, which have the same id or class as they are entered via javascript. The form in my controller does not recognize these sent items (although I receive other items from the model). – Fábio Carvalho Feb 03 '17 at 16:10
Hey Fabio, Okay, I can think of one work around, you can append the values of your dynamic input in the form of string using your script, then keep appending them in a hidden field or textbox (can use comma separator) and then when they finally submit, you can obtain the entire value of that hidden field at your action method level and do your required operations from there. Does it help ? – Utkarsh Bais Feb 03 '17 at 16:14
Yep!: D This helps a lot. THX! I'll leave the topic open just to see if anyone else has another way to do it, preferably without using both this DOM manipulation. I'll mark you as an answer, but change the code for people to see the hiden inputs. – Fábio Carvalho Feb 03 '17 at 16:25
Sure, I'll update the code and add markup for a hidden field. – Utkarsh Bais Feb 03 '17 at 16:29

Insert new field for upload when click in a button .net mvc

1 Answers1