Question

（以下代码只是解释问题的一个简单示例）

我有ASP.NET MVC 5应用程序。该视图显示人员和地址信息。该视图还有Save和RefreshAddress按钮 Save按钮序列化表单并使用ajax将其提交给服务器 RefreshAddress按钮仅刷新地址信息。这就是为什么我对地址有单独的部分视图。

模型

public class HomeModel
{
    public PersonModel Person { get; set; }
}

public class PersonModel
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public AddressModel Address { get; set; }
}

public class AddressModel
{
    public string AddressLine1 { get; set; }
    public string AddressLine2 { get; set; }      
}

控制器

public class HomeController : Controller
{
    public ActionResult Index()
    {
        HomeModel model = BuildHomeModel();

        return View(model);
    }

    [HttpPost]
    public ActionResult Save(HomeModel model)
    {
        if (model.Person.Address == null)
        {
            return Json("address cannot be null");
        }

        return Json("success");
    }

    [HttpGet]
    public ActionResult GetAddress()
    {
        AddressModel address = GetNewAddress();

        return PartialView("~/Views/Shared/EditorTemplates/_Address.cshtml", address);
    }
}

视图

Index.cshtml

@model Models.HomeModel

<form id="mainForm">
    @Html.EditorFor(x => x.Person, "_Person")
</form>

<button class="btn btn-default" id="btnSave">Save</button>
<button class="btn btn-default" id="refreshAddress">Refresh Address</button>

<script src="~/Scripts/home.js"></script>

_Person.cshtml

@model Models.PersonModel

@Html.LabelFor(x => x.FirstName)
@Html.TextBoxFor(x => x.FirstName)

@Html.LabelFor(x => x.LastName)
@Html.TextBoxFor(x => x.LastName)

<div id="PersonAddress">
    @Html.EditorFor(x => x.Address, "_Address")
</div>

_Address.cshtml

@model Models.AddressModel

@Html.LabelFor(x => x.AddressLine1)
@Html.TextBoxFor(x => x.AddressLine1)

@Html.LabelFor(x => x.AddressLine2)
@Html.TextBoxFor(x => x.AddressLine2)

的JavaScript

$(function () {
    $("#btnSave").click(function () {
        $.ajax({
                type: "POST",
                url: "/home/save",
                data: $("#mainForm").serialize(),
                contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
                processData: true,
                cache: false
            })
            .done(function (response, textStatus, jqXHR) {
                alert(response);
            })
    })

    $("#refreshAddress").click(function () {
        $("#PersonAddress").load("/home/getaddress");
    })
})

当视图加载时，地址相关的输入元素具有正确的名称和id

<input name="Person.Address.AddressLine1" id="Person_Address_AddressLine1" type="text" >
<input name="Person.Address.AddressLine2" id="Person_Address_AddressLine2" type="text" >

当我点击Refresh Address按钮时，服务器用_Address部分视图回复新地址，在jQuery中我替换PersonAddress div。但现在输入元素的名称和ID是不同的

<input name="AddressLine1" id="AddressLine1" type="text" value="4200 Park">
<input name="AddressLine2" id="AddressLine2" type="text" value="New York, NY 12345">

因此输入元素的名称已更改。如果我点击Save按钮，地址将不会绑定到Person.Address，因为name与模型不匹配。

我理解这个问题，但我正在寻找更好的解决方案。一种选择是从服务器返回Address as Json，并将值直接分配给客户端的输入。

如果有任何其他解决方案（最好是服务器端），我正在寻找其他解决方案吗？

如何刷新局部视图并保持正确的元素名称

0 个答案: