从另一个局部视图调用 MVC 局部视图

Question

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

(1) 我用它来编辑/创建/搜索的主视图（索引）。

(2) 我用来显示联系人的可枚举列表的联系人部分视图

(3) 我想用来显示每个联系人的详细信息并在文本框中编辑它们的详细信息部分视图。

就用户而言，所有操作都必须在同一个视图中完成！

我的问题是：为什么带有详细信息按钮代码的 javascript 函数在索引视图中有效，而在联系人部分视图中无效？我该怎么做才能让它工作？

谢谢！

控制器：

public class HomeController : Controller
{
    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 contacts = db.ContactTelefons.Find(id);
        //var contactsTelList = db.ContactTelefons.ToList();
        //return View(contactsTelList);
        return View(contacts);
    }

    [HttpPost] //Create
    public ActionResult Index([Bind(Include = "ContactId,Nume,Prenume,Adresa,Mentiuni")] Contact contact)
    {
        db.Contacts.Add(contact);
        db.SaveChanges();
        return RedirectToAction("Index");
    }

    //Delete with Get
    public ActionResult Delete(int id)
    {
        var contacts = db.Contacts.Find(id);
        var details = db.ContactTelefons.Find(id);
        db.Contacts.Remove(contacts);
        if (details != null)
        {
            db.ContactTelefons.Remove(details);
        }
        db.SaveChanges();

        return RedirectToAction("Index");
    }

索引视图：

     @using Demo.Models
@model Contact
<script>
    $(function () {
        $("#Details").click(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></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("Index", "Home")' " />
            </th>
    <th>
        <input id="Details" type="button" name="Details" value="Details" class="btn btn-info" />
    </th>
        }
    </tr>
</table>

<div>
    @{
      Html.RenderAction("Contacts", "Home");
     // Html.RenderAction("Details", "Home");
    }
</div>

<div id="divDetails"></div>

联系人部分视图

@using Demo.Models
@model IEnumerable<Contact>

@section scripts{
    <script>

        $("#Details").click(function () {
            $.get('@Url.Action("Details","Home")', function (data) {
                $('#divDetails').replaceWith(data);
            });
        });

</script>
}


<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>
        </tr>
    } 
</table> 
<div id="divDetails"></div>

详情部分视图

@using Demo.Models
@model ContactTelefon

<br />
Details partial

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

        @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

你不应该在你的局部视图中有脚本。将单击事件移动到主视图并将事件更改为离开文档，以便它可以处理动态添加的内容。像这样

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

Answer 2

在索引视图中你有

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

这是一个快捷方式

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

所以在 DOM 完全加载时执行的事件绑定

在“联系人”视图中，您没有 $(document).ready() 部分，因此在 DOM 加载之前执行绑定。

如果您希望它在联系人视图中工作，只需使用：

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