MVC 从局部视图中获取详细信息以显示在文本框中

Question

我有 3 个视图（1 个索引、2 个联系人（部分视图）、3 个详细信息（部分视图））

我有一个数据库，其中包含 2 个由 ContactId 绑定的表，我可以使用这些表从数据库中获取要显示的详细信息。我使用 ADO 制作数据库模型。这 2 个表（类）被命名为 Contact 和 ContactTelefon。

我尝试使用@html.ActionLink（如您在联系人视图中看到的）而不是按钮来从行中获取 ID，但这会将我带到一个新页面，它甚至不显示详细信息。

我的问题是：我怎样才能让详细信息显示在文本框中，以便我可以编辑数据。

就用户而言，所有操作都必须在同一视图中。

控制器：

ContactsDbEntities db = new ContactsDbEntities();

[HttpGet] //Index
public ActionResult Index()
{
    return View();
}
//Contacts
public ViewResult Contacts()
{
    var contactsList = db.Contacts.ToList();
    return View(contactsList);
}

//Details
public ActionResult Details(int? id)
{
    ContactTelefon contactTel = db.ContactTelefons.Find(id);
    return View(contactTel);
}

索引视图

@using Demo.Models
@model Contact

@section scripts
{
    <link href="~/Content/jquery-ui.min.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-ui.min.js"></script>
    <script src="~/Scripts/jquery-ui.js"></script>

    <script>
        $(function () {
            $(document).on('click', '#Details', function () {
                $.get('@Url.Action("Details","Home")', function (data) {
                    $('#divDetails').replaceWith(data);
                });
            });
    </script>
}

<table id="mainTable" class="table table-bordered table-striped">

    <tr>
        <th>
            @Html.DisplayNameFor(model => model.ContactId)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Nume)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Prenume)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Adresa)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Mentiuni)
        </th>
    </tr>
    <tr>
        <th>

        </th>
        @using (Html.BeginForm())
        {
            <th>
                @Html.TextBoxFor(model => model.Nume, null, new { id = "txtSearchNume", @class = "form-control" })
            </th>
            <th>
                @Html.TextBoxFor(model => model.Prenume, null, new { id = "txtSearchPrenume", @class = "form-control" })
            </th>
            <th>
                @Html.TextBoxFor(model => model.Adresa, null, new { id = "txtSearchAdresa", @class = "form-control" })
            </th>
            <th>
                @Html.TextBoxFor(model => model.Mentiuni, null, new { id = "txtSearchMentiuni", @class = "form-control" })

            </th>
            <th>
                <input type="submit" value="Create" class="btn btn-success"
                       onclick=" location.href='@Url.Action("Index", "Home")' " />
            </th>
            <th>
                <input type="submit" name="submitSearch" value="Search" class="btn btn-info"
                       onclick=" location.href='@Url.Action("Create", "Home")' " />
            </th>
            <tr>
                @{Html.RenderAction("Contacts", "Home");}
            </tr>
            <tr><div id="divDetails"></div></tr>
        }

    </table>

联系人视图

@using Demo.Models
@model IEnumerable<Contact>

<table class="table table-bordered table-hover">
    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.ContactId)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Nume)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Prenume)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Adresa)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Mentiuni)
            </td>
            <td>
                @Html.ActionLink("Delete", "Delete", new { id = item.ContactId },
                    new { @class = "btn btn-danger", onclick = "return confirm('Delete this record?');" })
            </td>
            <td>
                <input id="Details" type="button" name="Details"
                       value="Details" class="btn btn-info" />
            </td>
            <td>
                @Html.ActionLink("DetailsLink","Details",new{id = item.ContactId})
            </td>
        </tr>
    }

</table>

详情查看

@using Demo.Models
@model ContactTelefon     

<div class="form-horizontal">
    <div claass="form-group">
        @* must get the id from Contacts *@

        @Html.LabelFor(model => model.ContactId)

        @Html.LabelFor(model => model.ContactTelefonId)

        @Html.LabelFor(model => model.NumarTelefon)

        @Html.LabelFor(model => model.TipNumarTelefon)
    </div>
    <br />
    <div claass="form-group">
        @Html.DisplayFor(model => model.ContactId)

        @Html.DisplayFor(model => model.ContactTelefonId)

        @Html.DisplayFor(model => model.NumarTelefon)

        @Html.DisplayFor(model => model.TipNumarTelefon)
    </div>
    <div claass="form-group">
        @Html.EditorFor(model => model.ContactId)
        @Html.EditorFor(model => model.ContactTelefonId)
        @Html.EditorFor(model => model.NumarTelefon)
        @Html.EditorFor(model => model.TipNumarTelefon)
    </div>
</div>

Answer 1

似乎您正在从 ASP.NET WebForms 开始 MVC。 MVC 的特点是它不像 WebForms 那样具有魔力，因此您必须对幕后发生的事情有一个很好的了解才能进行平滑的过渡。另外，从外观上看，您的数据库模型使用实体框架。

首先，您处理Details 按钮的方式完全错误。你应该做的是：

HTML

<input type="button" name="Details" value="Details" class="btn btn-info js-details" 
    data-id="@item.ContactId" />

JavaScript

$(document).on('click', '.js-details', function (event) {

    // get the element that triggered the event
    var $element = $(event.currentTarget);
    var id = $element.data('id');

    // you might have to type in the literal URL if you have a custom route 
    // here
    $.get('@Url.Action("Details","Home")'+ '?id=' + id, function (data) {
        $('#divDetails').html(data);
    });
});

让我知道这是否适合您。您还有其他可以改进的地方，但这应该是一个不错的开始。