MVC partial view getting called from another partial view

Question

I have 3 views, a main view (Index), and 2 Partial Views (Contacts) and (Details).

(1) The main view (Index) i use it for edit/create/search.

(2) The Contacts partial view i use to display an Ienumerable list of Contacts

(3) The Details partial view i want to use to display details for each Contact and edit them in the textboxes.

All must be done in the same view as far as the user is concerned!

My question is: Why does the javascript Function with Details Button code works in Index View and it doesn't in Contacts Partial View and what could i do to make it work?

Thank you!

Controller:

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");
    }

Index View:

     @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>

Contacts Partial view

@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>

Details Partial View

@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

In Index View you have

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

which is a shortcut of

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

So the binding to an event performed when DOM is fully loaded

While in Contacts view you don't have the $(document).ready() part So binding performed before DOM loads.

If you want it to work in Contacts view simply use the:

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

Answer 2

you shouldn't ever have script in your partial view. Move you click event to the main view and change the event to go off of the document so that it will work on the dynamically added content. like this

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