A little behind the problem and what I am trying badly to do. I basically have a form which places data in my viewModel. The trouble is, say a customer company is at one address but the contact is at another address I want the user to be able to click on a radio button that is on the main form they are filling out, type in the contacts different address and save this into the model that I have on the main form.
I have a controller which does the following:
[HttpPost]
public ActionResult Edit(ClientModel client)
{
Domain.Data.EFDbContext context = new Domain.Data.EFDbContext();
if (ModelState.IsValid)
{
client.ClientAddress.AddressTypeId = client.AddressType.AddressTypeId;
client.Contact.ContactTypeId = client.ContactType.ContactTypeID;
//Add the address to the ContactAddress table and Contact ID
if (client.ContactAddress.AddressLine1 != null)
{
client.Contact.ContactAddress.Add(client.ContactAddress);
context.Contacts.Add(client.Contact);
}
else
{
client.ContactAddress = client.ClientAddress;
}
client.Company.Address.Add(client.ContactAddress);
client.Company.CompanyContact.Add(client.Contact);
//The attachment to Client is created on a Trigger in the database when a new Company is added
context.Companies.Add(client.Company);
context.SaveChanges();
return RedirectToAction("Index");
}
else
{
return View(client);
}
}
This works fine, it updates my database tables and saves the result, but I have added in the client.ContactAddress part, so if it knows a field is empty from my form it just assigns the company address to where the client is and saves that in the relevant field. (This is not the issue though, just back ground)
I have tried to create a partialView and in the controller
[HttpGet]
public PartialViewResult AddressPartial()
{
return PartialView("_AddressPartial");
}
and in my edit.aspx I have
$(document).ready(function () {
$('#Not_Contact_Address').click(function (e) {
if ($('#Not_Contact_Address').is(':checked')) {
$('#dialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
title: 'Add Address',
modal: true,
open: function(event, ui) {
//Load the AddressPartial action which will return
// the partial view _AddressPartial
$(this).load("@Url.Action("AddressPartial")");
},
buttons: {
"Save": function() {
$('#dialog').dialog('close');
},
"Cancel": function () {
$('#dialog').dialog('close');
}
}
});
$('#dialog').dialog('open');
}
});
});
Basically, a user selects a radio button, a Add Address dialog pops up, I want the user to add that information in and then display this information back on the form below the radio button selected, and then they can carry on and once completed hit the Submit button and save all the information right away to the database. (Shown in controller above).
<fieldset>
<legend>Main Contact Details</legend>
<div class="editor-label">
@Html.LabelFor(model => model.Contact.Title)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Contact.Title)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Contact.FirstName)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Contact.FirstName)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Contact.LastName)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Contact.LastName)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Contact.Email)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Contact.Email)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Contact.Phone)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Contact.Phone)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Contact.Mobile)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Contact.Mobile)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.ContactType.Name)
</div>
<div class="editor-field">
@Html.DropDownListFor(model => model.ContactType.ContactTypeID, Model.ContactSelectList, " --- Select One --- ", null)
</div>
<b>Contact Address</b> same as <b>Company Address</b> @Html.RadioButton("Not_Contact_Address", "Yes") Yes @Html.RadioButton("Not_Contact_Address", "No") No
</fieldset>
Problems
I can open the dialog which is fine, but I cannot cancel the dialog box, I click the x on the top right corner and this then blanks my entire form and left with blank page, not what I want.
What is the best way to go about have a form, so that a user can enter information on a form, display another form within the page to add address and save that to the viewModel I have and then allow the user to carry on.
UPDATED
function openProductEditDialog() {
$("#ProductDetailsDialogDiv").html("");
$.ajax({
type: "GET",
url: encodeURI('@Url.Action("AddressPartial", "Home")'),
cache: false,
dataType: 'html',
error: function (XMLHttpRequest, textStatus, errorThrown) {
$("#ProductEditDialogDiv").html(XMLHttpRequest.responseText);
},
success: function (data, textStatus, XMLHttpRequest) {
$("#ProductEditDialogDiv").html(data);
},
complete: function (XMLHttpRequest, textStatus) {
$('#ProductEditDialogDiv').dialog({
width: '500px',
modal: true
});
}
});
}
This allows me to now save the information in a new window and return back to my screen, any idea’s how to save this the viewModel on the main page. I want the AddressPartial to be put into my viewModel on the CreateClient page where it was called so they can carry on with the form and not lose any information.
I am guessing that I should point this at the controller and tell it to resend the viewModel with the ContactAddress back to the CreateClient page. Working on this at the moment.
You could save the address with an Ajax request and return the key. Then save the key in a hidden input box in the original form.