MVC получить детали с частичным видом, чтобы показать в текстовых

Question

у меня есть 3 вида (1 Index, 2 Контакты (PartialView), 3 Детали (PartialView))

У меня есть база данных с 2 таблицы связаны по ContactId, что я могу используйте, чтобы получить информацию из базы данных для показа. Я использовал ADO для создания модели базы данных. 2 таблицы (классы) называются Contact и ContactTelefon.

Вместо кнопки я попытался использовать @html.ActionLink (как вы можете видеть в окне Contact View), чтобы получить идентификатор из строки, но это приведет меня к новой странице, и она даже не показывает детали.

Мой вопрос: Как я могу получить детали для отображения в текстовых полях, чтобы я мог редактировать данные.

Все действия должны быть в том же виде, насколько это касается пользователя.

Контроллер:

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

Кажется, как будто вы начинаете MVC исходя из ASP.NET WebForms. Дело в 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); 
    }); 
}); 

Позвольте мне знать, если это работает для вас. Есть и другие вещи, которые вы можете улучшить, но это должно быть довольно хорошим началом.