MVC3表單jQuery部分視圖

Question

有點背後的問題，我正在努力做什麼。我基本上有一個表單，它將數據放在我的viewModel中。麻煩的是，假如客戶公司在一個地址，但聯繫人在另一個地址，我希望用戶能夠點擊他們填寫的主窗體上的一個單選按鈕，輸入聯繫人的不同地址和將其保存到我在主窗體上的模型中。

我有一個控制器，它具有以下功能：

[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); 
     } 
    } 

這工作得很好，它更新我的數據庫表，並將結果保存，但我已經在client.ContactAddress部分增加，因此，如果它知道字段從我的表單中爲空，它只是將公司地址分配給客戶端，並將其保存在相關字段中。 （這不是問題，雖然，只是回地面）

我試圖創建一個partialView和控制器

[HttpGet] 
    public PartialViewResult AddressPartial() 
    { 
     return PartialView("_AddressPartial"); 
    } 

，在我edit.aspx我有

$(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'); 
     } 
    }); 
}); 

基本上，用戶選擇一個單選按鈕，彈出一個添加地址對話框，我希望用戶添加該信息，然後將這些信息顯示在對話框下面的表格中然後他們可以繼續，一旦完成點擊提交按鈕並將所有信息立即保存到數據庫中。 （顯示在上面的控制器中）。

<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> 

問題

我可以打開這是很好的對話，但我不能取消對話框，我點擊右上角的X，這則清空了我的整個形式和左空白頁面，不是我想要的。

什麼是最好的方式去擁有一個窗體，以便用戶可以在窗體中輸入信息，在頁面中顯示另一個窗體以添加地址並將其保存到我擁有的viewModel中，然後允許用戶繼續。

修訂

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 
      }); 
     } 
    }); 
} 

這讓我現在保存在一個新窗口中的信息，並返回到我的屏幕，任何想法如何保存這個視圖模型的主頁上。我希望將AddressPartial放入CreateClient頁面的viewModel中，以便它們可以繼續使用表單而不會丟失任何信息。

我在猜測，我應該指出這在控制器，並告訴它重新發送與ContactAddress的viewModel回到CreateClient頁面。在此刻工作。

Answer 1

您可以使用Ajax請求保存地址並返回密鑰。然後將密鑰以原始格式保存在隱藏的輸入框中。