0

For example, in my project I'm using @using(Html.BeginForm(some stuff))to create an instance of my model and finally appending it to my database. But, when I'm editing (updating) some object of model, I'm usingn ajax get to retrieve data and finally using @Html.BeginForm() to post the update. Well, this is breaking some pattern of coding in MVC or whatever good principle?

Retrieving data and filling in the input fields

    $.ajax({
        url: "../../Obra/" + id,
        type: "POST",
        success: function(data) {
            var obj = JSON.parse(JSON.stringify(data));
            tit.value = obj.titulo;
            ed.value = obj.editora;
            obj.autores.forEach(x => {
                var newn = divAutor.appendChild(aut.cloneNode());
                newn.value = x;
            });
            img.value = obj.imagem;

            divAutor.removeChild(aut);
        },
        error: function() {
            alert('Error.');
        }
    });

All modal:

    <div class="modal" id="modalOverlay">
        <div class="modal-content" id="modalContent">
            <header class="modal-header">
                <h1 id="updateObraModalTitulo"></h1>
            </header>

            @using(@Html.BeginForm("Update", "Obra", FormMethod.Post, new { id="form-update" })) {
                <div class="updateObraDivProp">
                   @Html.LabelFor(m => m.Titulo, "Título:") 
                   @Html.TextBoxFor(m => m.Titulo, new { @class="editInputValue", @id="editTituloInput" })
                </div>

                <div class="updateObraDivProp">
                   @Html.LabelFor(m => m.Editora, "Editora:")
                   @Html.TextBoxFor(m => m.Editora, new { @class="editInputValue", @id="editEditoraInput"})
                </div>

                <div class="updateObraDivProp">
                   @Html.LabelFor(m => m.Autores, "Autores:")
                    <div id="divInputAutores">
                        @Html.TextBoxFor(m => m.Autores, new { @class="inputPostValue", id="addAutoresInput"})
                    </div>
                    
                    <div class="btnNewAutorOp">
                        <button type="button" id="btnAddAutor" onclick="addNewAutor()">+</button>
                        <button type="button" id="btnDeleteAutor" onclick="deleteNewAutor()">&times;</button>
                    </div>                   
                </div>

                <div class="updateObraDivProp">
                    @Html.LabelFor(m => m.Imagem, "Imagem:")
                    @Html.TextBoxFor(m => m.Imagem, new { @class="inputPostValue", @id="editImagemInput" })
                </div>

                <input type="submit">
            }
        </div>
    </div>

Because I can't retrieve the Id property when I click in the modal with mvc (or maybe I can using partial views?), I'm using javascript to create a function with the param id and getting data with ajax and finally updating with form

arakakivl
  • 199
  • 2
  • 10
  • Please post your relevant code blocks to show us what you are trying to achieve here. You can use `AJAX` to update a portion of the page without refreshing the entire page. – Rahul Sharma Feb 05 '22 at 07:10
  • Oh, I'm sorry. I'll edit and post here but yes, It's exactly what I'm doing. I'm creating a modal popup, getting data (with ajax), and finally sending a post request to update the object. And what I said was wrong: I'm not posting, jut getting data. More details on my edit, thanks. – arakakivl Feb 05 '22 at 11:19
  • When you are doing a `post` in your `Ajax`, where is the data that you sending to your `Obra` method? Did you mean to do a `Get` there? Can you show us your `modal` code? – Rahul Sharma Feb 05 '22 at 13:00
  • Yeah, I should be using `GET` there. Yeah, of course I can show you my modal code. I just edit it. What I'm doing (that I think can be refactored with partial views) is doing one code (modal with form to update) and when the user clicks in the button to update, a javascript code is executed in function of the parameter `id` of that model (in this case, "Obra"). A GET with ajax is maded and finally, I fill each input with the info requested. The user can do some updates and finally a `@using(Html.BeginForm(stuff))` is executed to send a new object of my Model `Obra`. Yes, it's working. – arakakivl Feb 05 '22 at 18:57
  • But I don't know if there's a better way to approach the same result. I don't know if what I'm doing is just a "hack" to attach the result and not something "correct" (good practice). – arakakivl Feb 05 '22 at 18:58
  • If you are using `Ajax` to only update a portion of the page and then using that updated value in your final form post, I do not see a problem in following that logic. Working with modal is fine and you can even put them in separate partial views if required. – Rahul Sharma Feb 06 '22 at 09:30
  • Oh, okay, thanks for your answer. Also, I'm getting a data from a URL to `GET` the data and fill the form fields. How can I protect this `GET`? I don't wanna people write in the URL bar and getting the data, just by the forms. There are some way? Should I ask another question? – arakakivl Feb 06 '22 at 17:43
  • You can use the `Authorize` attribute on your `Controller` method getting the data so that only authorized users can access the data. You can also read on GET vs POST: https://stackoverflow.com/a/198473/1807452 – Rahul Sharma Feb 06 '22 at 17:44
  • Thanks for the help and your time! – arakakivl Feb 06 '22 at 18:05
  • I have posted an answer about `Authorize` attribute and how you can setup it your project: https://stackoverflow.com/a/70937087/1807452 – Rahul Sharma Feb 06 '22 at 18:07
  • There's a way to make the main domain or subdomain authorized, and not none of other source? – arakakivl Feb 06 '22 at 20:43
  • I did not understand your last question. You can decorate the `Authorize` attribute on an entire class if or individual methods as required. – Rahul Sharma Feb 06 '22 at 20:46

0 Answers0