Question

我有一个Person类来保存Personel及其子代的数据，如下所示：

public class Person
{
    public int Id { get; set; }
    public string FirstName { get; set; }
    public string Surname { get; set; }
    public List<Person> Children { get; set; }

    public Person()
    { }
    public Person(int id, string firstname, string surname)
    {
        this.Id = id;
        this.FirstName = firstname;
        this.Surname = surname;
    }
}

我将其列在我的View上，如下所示：

@model List<MvcApplication1.Person>
@{
    ViewBag.Title = "Index";
}
<table style="border: 1px solid #000;">
    <thead>
        <tr>
            <th>Name</th>
            <th>Surname</th>
            <th>Children</th>
        </tr>
    </thead>
    <tbody>
        @if (Model != null && Model.Count > 0)
        {
            for (int i = 0; i < Model.Count; i++)
            {
                <tr>
                    <td style="border: 1px solid #000;">@Model[i].FirstName</td>
                    <td style="border: 1px solid #000;">@Model[i].Surname</td>
                    <td style="border: 1px solid #000;">
                    @if (Model[i].Children != null && Model[i].Children.Count > 0)
                    {
                        foreach (MvcApplication1.Controllers.Person child in Model[i].Children)
                        {
                            @child.FirstName  @child.Surname
                        }
                    }
                    </td>
                </tr>
            }
        }
    </tbody>
</table>

到目前为止一切都很好。然后我想添加一个jQuery模式窗口来显示被点击的孩子的详细信息。因此，将最内循环更新为：

<a href="#" onclick="ShowChildDetails(@child.Id)">@child.FirstName  @child.Surname</a>

并添加以下方法以发布AJAX调用以获取所点击子项的详细信息。

function ShowChildDetails(_id) {
    $.ajax({
        type: "POST",
        url: "Home/GetChild",
        dataType: "json",
        data: {
            id: _id
        },
        success: function (result) {
        },
        error: function (x, t, m, b) {
            alert(x.responseText);
        }
    });
}

为了显示数据，我实现了以下jQuery模式窗口：

$(function () {
    $("#child-view").dialog({
        autoOpen: false,
        resizable: false,
        height: 300,
        width: 600,
        dialogClass: 'no-close',
        modal: true,
        buttons: [
            {
                text: "OK",
                click: function () {
                    $(this).dialog("close");
                }
            }],
        show: {
            effect: "fade",
            duration: 300
        },
        hide: {
            effect: "puff",
            duration: 300
        }
    });
});

并将AJAX调用的success更新为：

$("#child-view").html(result);
$("#child-view").dialog("open");

我在另一个局部视图中实现了我的模态的外观：

（第1点）：

@Html.Partial("ChildView", Model)

并将我的部分视图实现为：

（第2点）：

@model List<MvcApplication1.Controllers.Person>
<div id="child-view" class="ui-modal-window" title="">
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Surname</th>
            </tr>
        </thead>
        <tbody>
            @if (Model != null)
            {
                <tr>
                    <td>@Model.FirstName</td>
                    <td>@Model.Surname</td>
                </tr>
            }
        </tbody>
    </table>

首先，让我们检查 POINT＃1 。由于我声明了部分视图，我必须提供一个数据源（在此示例中为 Model ）但是当我检查部分视图 POINT＃2 时，我看到我的部分查看需要单个项目，而不是集合。另一方面，在我的视图中，我不知道要绑定哪个项目和设计时间。我的第一个问题是我该如何解决这个问题？

第二个问题，我希望使用jQuery AJAX调用将模型属性绑定到部分View，而不进行回发。而且我不想手动在每个控制器中设置值。只要我的Home/GetChild返回类型为Person的对象，如何以简写方式绑定属性？

最后假设模态窗口不是仅显示，而是可编辑。如何收集表单数据，将其映射到模型（在这种情况下为Person）并将其作为参数发送到另一个AJAX方法？

问候。

Answer 1

1：无需在页面中使用@Html.Partial("ChildView", Model)。因为您通过ajax调用加载部分视图。因此，元素div#child-view将为空。

2：将<div id="child-view" class="ui-modal-window" title=""></div>移至主视图。

3.更改您的局部视图如下

@model MvcApplication1.Controllers.Person   
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Surname</th>
            </tr>
        </thead>
        <tbody>
            @if (Model != null)
            {
                <tr>
                    <td>@Model.FirstName</td>
                    <td>@Model.Surname</td>
                </tr>
            }
        </tbody>
    </table>

此部分视图结果将设置为目标元素div#child-view，作为ajax成功事件中的代码。

4.返回部分视图的控制器操作的模型将是单个Person对象。

5.如果您想编辑细节，请更改部分视图，如下所示

@model MvcApplication1.Controllers.Person

@using (Ajax.BeginForm("SaveActionName","ControllerName",new AjaxOptions { onSuccess= "onSaveSuccess" }))
{
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Surname</th>
            </tr>
        </thead>
        <tbody>

                <tr>
                    <td>@Html.TextBoxFor(a=>a.FirstName)</td>
                    <td>@Html.TextBoxFor(a=>a.Surname)</td>
                </tr>

            <tr><td><input type="submit" value="Save" /></td></tr>
        </tbody>
    </table>
}

在javascript中定义回调

function onSaveSuccess()
{
    alert('saved');
    //your code...
}

希望它会对你有所帮助。如果是这样，请将其标记为答案并投票支持。：）

如何绑定数据模态窗口（MVC）

1 个答案: