获取模型对象作为 json 响应 asp net mvc 4答案

【问题标题】：get model object as json response asp net mvc 4获取模型对象作为 json 响应 asp net mvc 4
【发布时间】：2014-04-30 11:53:16
【问题描述】：

我想要达到的目标

如果选择单选按钮，则启动 jQuery ajax 获取请求
检索模型对象作为带有值的 json 响应
使用该模型对象在 razor 视图上显示数据

我卡在第三步。如何使用模型对象在剃刀视图上显示数据

附注我可以从我的 ajax 代码中收到“Building No : 1”的警报

$('input[name=PerAddress]').on('change', function () {
    if ($('input[name=PerAddress]:checked', '.form-group').val() == 'true') {       
        $.ajax({
            url: "CAD",
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                alert(data.PresentAddress1);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert(errorThrown);
            }
        });
    }
});

控制器动作方法：

[HttpGet]
[ActionName("CAD")]
public JsonResult CustomerAddress()
{
    var model = new AccountOpeningComplete
    {
        PresentAddress1 = "Building No : 1", // To be later retrieve from database
        PresentAddress2 = "Mumbai", // To be later retrieve from database
        PresentPostalCode = "497989", // To be later retrieve from database
        CityList = new SelectList(DataAccess.DAL.DropDownValues("City"), "Value", "Text"),
        ProvinceList = new SelectList(DataAccess.DAL.DropDownValues("Province"), "Value", "Text"),
        CountryList = new SelectList(DataAccess.DAL.DropDownValues("Country"), "Value", "Text")
    };
    return Json(model, JsonRequestBehavior.AllowGet);
}

剃刀视图

@Html.LabelFor(m => m.PresentAddress1, new { @class = "col-xs-6 col-md-3 control-label" })
<div class="col-xs-6 col-md-9">
    @Html.TextBoxFor(m => m.PresentAddress1, new { @class = "form-control" })
</div>

【问题讨论】：

标签： jquery asp.net asp.net-mvc json razor

【解决方案1】：

根据您的代码，如果您能够正确获得响应，则成功的数据对象是 javascript 对象，因为您在 ajax 调用中将 json 作为数据类型。

现在，您只需要从您的 asp.net mvc 控制器返回 json，您需要将这些新返回值绑定到您的 razor 视图（即 html）中的控件/元素。

所以。如果是 PresentAddress1 文本框，您需要在成功块中添加此代码：

success: function (data) {
                $("#PresentAddress1").val(data.PresentAddress1);
            }

您必须从数据 javascript 对象中获取值并在各自的控件中设置这些值。您的其他选择是：

1) 返回带有新数据的局部视图，以摆脱对控件的单独设置值，如上所述。因此，您需要为 html 支持设置数据类型，并将视图替换为数据。示例如下：

$.ajax({
    url: "CAD",
    type: 'GET',
    dataType: 'html',
    success: function (data) {
        $('#shell').html(data); //where shell is the id of the container that you want to update with the response from your controller.
    },
    error: function (jqXHR, textStatus, errorThrown) {
        alert(errorThrown);
    }
});

2) 使用像knockoutjs 这样的双向数据绑定库，您可以在其中请求 JSON 数据并直接与视图中的控件进行绑定。推荐

【讨论】：

【解决方案2】：

你有两种选择：

在现有视图中使用 jQuery 将 JSON 数据加载到预先存在的 div 中：
```
$("#PresentAddress).val(data.PresentAddress1);
```

你在哪里<div class="col-xs-6 col-md-9" id="PresentAddress"></div>

从您的控制器调用局部视图。这将向您的 AJAX 调用返回一个 HTML 格式的字符串，然后您可以将其分配给一个空的 div。
```
$("#AllContent).html(returnedValue);
```

【讨论】：