如何使用 jQuery Ajax 加载 PartialView？

Question

部分视图

@model OsosYeni23072012.Models.TblMeters
<h3>
    Model.customer_name
</h3>
<h3>
    Model.meter_name
</h3>

控制器

[HttpGet]
public ActionResult MeterInfoPartial(string meter_id)
{
    int _meter_id = Int32.Parse(meter_id);
    var _meter = entity.TblMeters.Where(x => x.sno == _meter_id).FirstOrDefault();

    return PartialView("MeterInfoPartial", _meter);
}

Razor

@Html.DropDownList("sno", new SelectList(Model, "sno", "meter_name"), "-- Select Meter --", new { id = "meters"})

@Html.Partial("MeterInfoPartial")

我希望在下拉列表更改时加载部分视图，但我不知道该怎么做。我找不到任何关于此的示例。我使用actionlink来实现这一点。但之前我没有使用下拉列表。 控制器参数meter_id等于下拉列表选择的值。 谢谢。

- AliRıza Adıyahşi

---

模型是否在初始页面加载时已经加载？如果模型没有被实例化和初始化，那么它不会引发异常吗？或者您是在页面第一次加载时加载了一个带有记录的部分视图吗？对于任何不正确的行话，我很抱歉；我还是个新手。 - George Geschwend

Answer 1

您可以订阅下拉列表的.change()事件，然后触发一个AJAX请求：

<script type="text/javascript">
    $(function() {
        $('#meters').change(function() {
            var meterId = $(this).val();
            if (meterId && meterId != '') {
                $.ajax({
                    url: '@Url.Action("MeterInfoPartial")',
                    type: 'GET',
                    cache: false,
                    data: { meter_id: meterId }
                }).done(function(result) {
                        $('#container').html(result);
                });
            }
        });
    });
</script>

然后你需要使用一个带有id的div来包装这个partial：

<div id="container">
    @Html.Partial("MeterInfoPartial")
</div>

还有，为什么你要在控制器操作中进行解析，将这留给模型绑定器处理：

[HttpGet]
public ActionResult MeterInfoPartial(int meter_id)
{
    var meter = entity.TblMeters.FirstOrDefault(x => x.sno == meter_id);
    return PartialView(meter);
}

使用FirstOrDefault时要小心，因为如果它在数据库中没有找到与给定的meter_id匹配的记录，它将返回null，当您尝试访问模型时，局部内容会崩溃。

- Darin Dimitrov

---

谢谢。我应该在视图中检查返回值是否为空吗？ - AliRıza Adıyahşi

不，你应该在控制器操作中完成这个任务。在这种情况下，你可以返回一个JSON响应，以便成功的AJAX处理程序能够检测到这种情况并相应地采取行动。 - Darin Dimitrov

@DarinDimitrov $('#container').html(result); 这将在容器中填充部分视图，对吗？那么，在这行代码之后是否需要调用您提到的相应操作 then you would wrap the partial with a div given an id:。 - kbvishnu

@DarinDimitrov - @Html.Partial 是否是必需的？假设 Partial 视图与控制器动作名称相同（在此情况下为 MeterInfoPartial），没有使用它似乎也可以正常工作。 - MuKa

@DarinDimitrov 如果部分视图参数是具有许多字段的视图模型，而不仅仅是单个字符串/整数参数，该怎么办？ - AminM

Answer 2

<script type="text/javascript">
    $(function() {
        $('#addnews').click(function() {
                $.ajax({
                    url: '@Url.Action("AddNews", "Manage")',
                    type: 'GET',
                    cache: false,
                }).done(function(result){
                    $('#containera').html(result);
                });
        });
    });
</script>

- mirazimi