MVC3形式jQuery PartialView

时间:2013-01-07 17:46:52

标签: jquery ajax asp.net-mvc-3 c#-4.0

有点落后于问题以及我正在努力做的事情。我基本上有一个表单,将数据放在我的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
            });
        }
    });
}

这允许我现在将信息保存在新窗口中并返回到我的屏幕,任何想法都是如何在主页面上保存viewModel。我希望将AddressPartial放入我在调用它的CreateClient页面上的viewModel中,这样它们就可以继续使用表单而不会丢失任何信息。

我猜我应该在控制器上指出它并告诉它将viewModel与ContactAddress重新发送回CreateClient页面。目前正在努力解决这个问题。

1 个答案:

答案 0 :(得分:0)

您可以使用Ajax请求保存地址并返回密钥。然后将密钥保存在原始格式的隐藏输入框中。