Question

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

我有一个数据库，其中包含2个由ContactId绑定的表，我可以用它来显示数据库中的详细信息。我使用ADO来建立数据库模型。 2个表（类）名为Contact和ContactTelefon。

而不是按钮我尝试使用@html.ActionLink（你可以在联系人视图中看到）从行中获取Id，但这会将我带到一个新页面，它甚至不会显示详细信息。< / p>

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

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

控制器：

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那样做任何魔术，所以你必须很好地理解幕后发生的事情，才能顺利过渡。此外，从它的外观来看，您的数据库模型使用Entity Framework。

首先，您处理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);
    });
});

如果这对您有用，请告诉我。还有其他一些你可以改进的东西，但这应该是一个非常好的开始。

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

1 个答案: