asp.net mvc更新部分视图答案

【问题标题】：asp.net mvc update Partial viewasp.net mvc更新部分视图
【发布时间】：2015-04-30 10:20:22
【问题描述】：

我是 asp.net 的新手。我制作了一个显示项目列表的主页视图。在同一个视图中，我有一个部分视图。

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

您会看到使用@Html.Action("GetDeviceDetails") 调用部分视图。现在我的设备列表位于左侧，我想单击一个项目并更新详细视图。

主控制器如下所示：

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

就像您看到的主视图和局部视图使用相同的控制器。部分视图如下所示：

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

但是如何将数据从列表传递到局部视图以更新这些？谁能解释一下或者给我一个教程链接？

【问题讨论】：

在 ActionResult GetDeviceDetails 中，将 return View(...) 替换为 return PartialView(...)

好的，我将

@Html.ActionLink("as","GetDeviceDetails", new { id = item.ID})  添加到列表项中。在控制器中，我将 <pre>return View("_DeviceDetails",geraete)  更改为 <pre> return PartialView("_DeviceDetails",geraete); 。现在参数已传递，但部分视图显示在新窗口中。但我想在主视图中刷新它。</pre>

@PBS 你有机会尝试使用Ajax.ActionLink吗？

标签： c# asp.net asp.net-mvc asp.net-mvc-4

【解决方案1】：

用div 和id 包裹你的局部视图：

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

然后使用 Ajax helper 获取数据并更新：

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

【讨论】：