0

my UI has a text box and a button, everytime I add a new element I need to show the list in the same view. I'm using partial view so I need to keep loading this partial view everytime I add a new element to my list. how can I modify my code to achieve that?

View

@Html.TextBoxFor(m => m.emailsAdded, new { @class = "form-control wide", placeholder = "Email ID", type = "email", Name = "txtEmail" }
<button id="thisButton">Add</button>

<div id="content"></div>

<script>
$(document).ready(function() {
    $("#thisButton").on("click", function () {

        var val = $('#emailsAdded').val();            
        $.ajax({
            url: "/Admin/UpdateEmailList?email="+val,
            type: "GET"                
        })
        .done(function(partialViewResult) {
            $("#content").html(partialViewResult);
        });
    });
});   

</script>

Model

public class ABC
{ 
   public IEnumerable<string> emailsAdded { get; set; }
}

Controller

[HttpGet]
public ActionResult UpdateEmailList(string email)
{
 if (Session["emails"] == null)
        {
            List<string> aux1 = new List<string>();
            aux1.Add(email);
            Session["emails"] = aux1;
        }
        else
        {
            List<string> aux2 = new List<string>();
            aux2 = (List<string>)Session["emails"];
            aux2.Add(email);
            Session["emails"] = aux2;

        }
        var abc = new ABC
        {
            emailsAdded = (List<string>)Session["emails"]
        };
        return PartialView("_EmailsListPartialView", abc);


}

Partial view

@using project.Models
@model project.Models.ABC
<table class="tblEmails">
    @foreach (var emails in Model.emailsAdded)
    {
        <tr><td>@emails.ToString()</td></tr>
    }
</table>

With my code I'm able to reload my div and add the new element, when doesn't work for the second time....how can I modify my code so I can keep adding stuff?


SOLUTION: I updated my controller to show how I resolved this issue. Not really sure if it is the best way to do it, but at least helped me to resolve. I'm storing the list of emails in Session["emails"] and every time I add a new email to the list, I just update it a pass it to a new list with all the records and at the end return the partial view.

Rolando F
  • 148
  • 3
  • 17
  • What is the html your adding and are you trying to edit values? And if all your wanting to do is add a textbox to add/edit a `emailsAdded`, then you do not need ajax at all. –  Oct 28 '16 at 20:10
  • @StephenMuecke the user can add as many emails (values) as need it, and at the same time delete them from the list. At the end of the process, save the whole list to my data base. My UI has more fields that need to be filled out, that's why I was using Ajax and partial view, so I don't have to load the whole page everytime the user clicks the button and add more elements – Rolando F Oct 28 '16 at 20:17
  • You `UpdateEmailList()` method is generating a new list containing only the item you sent to it, and then your overwriting the existing list in the view. You do not need to call a server method for this - you can just append the value of the text box to a table in the main view. –  Oct 28 '16 at 20:18
  • Where is `$('#emailsAdded')` – Hackerman Oct 28 '16 at 20:20
  • But none of your code will allow you to _save the whole list to my data base_ - the only thing that will be submitted and saved is the value of your textboxes. If all your doing is creating the model you have shown, then all you need to is dynamically add new textboxes with `name="emailsAdded` to the view. But if your adding complex objects, then refer [this answer](http://stackoverflow.com/questions/28019793/submit-same-partial-view-called-multiple-times-data-to-controller/28081308#28081308) –  Oct 28 '16 at 20:21
  • yes, I noticed that, I know that I need to append instead of creating a new list, but also noticed that when I click that button again, doesn't even hit the breakpoint in the controller – Rolando F Oct 28 '16 at 20:21
  • You need to shown the code in your main view. Does the partial also include the textbox, in which case you would need event delegation –  Oct 28 '16 at 20:23
  • @Hackerman #emailsAdded is the name of the textboxfor that contains the new value – Rolando F Oct 28 '16 at 20:23
  • @StephenMuecke my partial just contain a table with a foreach and the model that contains the values. I just need a dynamic list in my view that shows my inputs – Rolando F Oct 28 '16 at 20:27
  • 1
    Your button will work fine. But you could achieve the same result by replacing `
    ` with `
    ` and in the `.click()` event creating a new table row and appending it. But none of this solves the issue of saving anything (read the link in my previous comment)
    –  Oct 28 '16 at 20:34
  • It's really weird, because if the code is just like the one that you posted on your question, it should works...actually it's something very straightforward.... – Hackerman Oct 28 '16 at 20:35

0 Answers0