For things to work the way I intended to, I needed to have one jQuery function that looked like this:
jQuery(document).ready(function () {
$("#MeditechDropDown").change(function () {
var id = $(this).find(":selected").val()
var clientID = { "clientID": id }
$.ajax({
url: "/Home/PopulateEmailAddressUI",
data: JSON.stringify(clientID), // Send value of the drop down change of option
type: 'POST',
datatype: 'html',
contentType: 'application/json; charset=utf-8',
success: function (response) {
$('#gridContent').html(response)
$('button').click(function () {
var email = $("#NewEmailAddress").val()
var invoice = $("#InvoiceDropDown").find(":selected").val()
var emailInfo =
{
"clientID": id,
"emailAddress": email,
"invoiceMode": invoice
};
$.ajax({
url: "/Home/AddEmailAddress",
data: JSON.stringify(emailInfo),
type: 'POST',
contentType: 'application/json; charset=utf-8',
success: function (response) {
$('#gridContent').html(response)
}
});
})
}
});
})
});
And my EmailAddressGrid view looks like:
@model BarClients.Models.BarClientsViewModel
@{
WebGrid grid = null;
if (Model.EmailAddressesOfChosenClient.Count<string>() != 0)
{
grid = new WebGrid(Model.EmailAddressesOfChosenClient, ajaxUpdateContainerId: "gridContent");
}
}
<div id="gridContent">
@{ if (grid != null)
{
<table>
<tr>
<td>
@grid.GetHtml(
tableStyle: "webgrid-table",
headerStyle: "webgrid-header",
footerStyle: "webgrid-footer",
alternatingRowStyle: "webgrid-alternating-row",
selectedRowStyle: "webgrid-selected-row",
rowStyle: "webgrid-row-style",
mode: WebGridPagerModes.All,
columns: grid.Columns(
grid.Column("Email Addresses", format: item => item)))
</td>
<td valign="top">
@Html.DisplayFor(model => model.InvoiceMode)
</td>
</tr>
</table>
<br />
<table>
<tr>
<th align="left">
@Html.TextBoxFor(model => model.NewEmailAddress)
</th>
<th>
<div id="InvoiceDropDown">
@Html.DropDownListFor(model => model.BAR_Clients.InvoiceMode, Model.InvoiceOptions, new { style = "width:70px" })
</div>
</th>
<th>
<button>Add Email</button>
</th>
</tr>
<tr>
<th align="left">
@Html.Raw("Enter New Email Address")
</th>
</tr>
</table>
}
}
</div>
And My Model class looks like:
public class BarClientsViewModel
{
private List<string> _clientID;
private List<string> _emailAddresses;
public BAR_Clients BAR_Clients;
public veForms_BAR_Clients veForms_BAR_Clients;
public string InvoiceMode;
[EmailFormatVerification]
public string NewEmailAddress;
public Exceptions Exceptions;
public BarClientsViewModel(IEnumerable<veForms_BAR_Clients> meditechClients)
{
_clientID = new List<string>();
foreach(veForms_BAR_Clients client in meditechClients)
{
_clientID.Add(client.Number);
}
_emailAddresses = new List<string>();
}
public void FindEmailAddresses(IEnumerable<BAR_Clients> barClients)
{
string emailAddressLine = "";
foreach(BAR_Clients client in barClients) // There will only be one client here
{
emailAddressLine = client.EmailAddress;
InvoiceMode = client.InvoiceMode;
}
string[] temp = emailAddressLine.Split(';');
_emailAddresses = new List<string>();
_emailAddresses = temp.ToList();
}
public string AddEmail(IEnumerable<BAR_Clients> barClients, string emailAddress)
{
string emailAddressLine = "";
foreach (BAR_Clients client in barClients) // There will only be one client here
{
emailAddressLine = client.EmailAddress;
emailAddressLine = String.Format("{0};{1}", emailAddressLine, emailAddress);
}
return emailAddressLine;
}
public IEnumerable<SelectListItem> MeditechClientID
{
get { return new SelectList(_clientID); }
}
public IEnumerable<String> EmailAddressesOfChosenClient
{
get { return _emailAddresses; }
}
public IEnumerable<SelectListItem> InvoiceOptions
{
get { return new SelectList(new List<string>() { "PRINT", "EMAIL", "BOTH" }); }
}
}
My two EF generated classes are as follows:
public partial class BAR_Clients
{
public string ClientId { get; set; }
public string EmailAddress { get; set; }
public string InvoiceMode { get; set; }
}
And
public partial class veForms_BAR_Clients
{
public string SourceID { get; set; }
public string ClientID { get; set; }
public string Number { get; set; }
public string Name { get; set; }
}
My relevant controller action methods are as follows:
public ViewResult Index()
{
_clientModel = InitialiseBarClientsModel();
return View(_clientModel);
}
[HttpPost]
public PartialViewResult PopulateEmailAddressUI(string clientID)
{
_clientModel = InitialiseBarClientsModel();
_clientModel.FindEmailAddresses(from client in eFormsDB.BAR_Clients where client.ClientId == clientID select client);
return PartialView("~/Views/Home/EmailAddressGrid.cshtml", _clientModel);
}
public PartialViewResult EmailAddressGrid()
{
_clientModel = InitialiseBarClientsModel();
return PartialView("~/Views/Home/EmailAddressGrid.cshtml", _clientModel);
}
[HttpPost]
public PartialViewResult AddEmailAddress(EmailInfo emailInfo)
{
_clientModel = InitialiseBarClientsModel();
string updatedEmail = _clientModel.AddEmail(from client in eFormsDB.BAR_Clients where client.ClientId == emailInfo.clientID select client, emailInfo.emailAddress);
var clientToUpdate = eFormsDB.BAR_Clients.Find(emailInfo.clientID);
try
{
eFormsDB.Entry(clientToUpdate).Member("EmailAddress").CurrentValue = updatedEmail;
eFormsDB.Entry(clientToUpdate).Member("InvoiceMode").CurrentValue = emailInfo.invoiceMode;
eFormsDB.SaveChanges();
}
catch (Exception)
{
throw new Exception("General Exception occurred while saving to database");
}
_clientModel.FindEmailAddresses(from client in eFormsDB.BAR_Clients where client.ClientId == emailInfo.clientID select client);
return PartialView("~/Views/Home/EmailAddressGrid.cshtml", _clientModel);
}
private BarClientsViewModel InitialiseBarClientsModel()
{
BarClientsViewModel clientModel = new BarClientsViewModel(from meditech in meditechDB.veForms_BAR_Clients select meditech);
return clientModel;
}