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>

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

2 个答案: