asp.net mvc update Partial view

Question

I'm new to asp.net. I´ve made a Home View which displays a list of items. In the same View I have a partial view.

@{
     ViewBag.Title = "Home Page";
}
<div class="row">
    <div class="col-md-4">
        <h2>Geräte Liste</h2>
            @model IEnumerable<MDAVerwaltung.Models.Geraete>
            @{
                 ViewBag.Title = "Index";
            }
            <!--url: "{controller}/{action}/{id}", -->
            <table class="table">
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.DeviceID)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Bezeichnung)
                </th>
                <th></th>
            </tr>

            @foreach (var item in Model)
            {
                <tr>
                    <td>

                        @Html.DisplayFor(modelItem => item.DeviceID)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Bezeichnung)
                    </td>
                </tr>
            }
        </table>
   </div>
   <div class="col-md-8">
    <div class="col-md-8">
        <h2>Geräte Informatioen</h2>

        @Html.Action("GetDeviceDetails")

    </div>

    <div class="col-md-4">
        <h2>Zusatzinformationen</h2>
    </div>
</div>
</div>

You see the partial view is called with @Html.Action("GetDeviceDetails"). Now i got on the left my List of Devices and i want to click on one Item and update the detail view.

The home Controller looks like this:

using System.Data.Entity;
using System;
using System.Net;

namespace MDAVerwaltung.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            var geraete = db.Geraete.Include(g => g.Mitarbeiter);
            return View(geraete.ToList());
        }
        private MDAEntities db = new MDAEntities();
        // GET: DeviceList
        public ActionResult GetDeviceList()
        {
            var geraete = db.Geraete.Include(g => g.Mitarbeiter);
            return View("_DeviceList",geraete.ToList());
        }
        public ActionResult GetDeviceDetails(int? id = 4)
        {
            Geraete geraete = db.Geraete.Find(id);
            return View("_DeviceDetails",geraete);
        }
        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";
            return View();
        }
    }
}

Like you see the Home view and the partial view uses the same controller. The partial view looks like this:

Geräte Informationen123
@model MDAVerwaltung.Models.Geraete
<p>@Html.DisplayFor(model => model.Bezeichnung)</p>
<p>@Html.DisplayNameFor(model => model.DeviceID)</p>

But how can I pass data from the list to the partial view to update these? Can someone please explain these or give me a link to a tutorial?

Answer 1

Wrap your partial view with div with id:

<div id="deviceDetailId">
   @Html.Action("GetDeviceDetails")
</div>

Then use Ajax helper to fetch data and update:

        @foreach (var item in Model)
        {
            <tr>
                <td>

                    @Html.DisplayFor(modelItem => item.DeviceID)
                </td>
                <td>                        
                    @Ajax.ActionLink(item.Bezeichnung, "GetDeviceDetails", "Home", new { id = item.DeviceID }, new AjaxOptions { UpdateTargetId = "deviceDetailId", HttpMethod = "GET" })
                </td>
            </tr>
        }