如何在 asp.net mvc 中使用 Ajax 更新视图？

Question

我有一个带有人名（参展商）下拉列表的简单表格。在我选择其中一个并单击“获取参展商数据”链接后，我只想更新我的主页的一部分并显示所选参展商的数据。 我在项目中的文件夹结构： 我的家庭控制器如下所示：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace WebApplication5.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }



        public PartialViewResult GetExhibitorDataById(int? Id)
        {
            List<Exhibitor> exhibitors = new List<Exhibitor>()
            {
                new Exhibitor()
                {
                    Id=1,
                    Name= "Tom",
                    Surname="Cruise"
                },
                new Exhibitor()
                {
                    Id=2,
                    Name= "Jennifer",
                    Surname="Lopez"
                },
            };

            if (Id == 1)
            {
                //return PartialView("_Exhibitor", exhibitors[0]);
                Session["ExhibitorData"] = exhibitors[0];
                return PartialView("_Exhibitor");
            }
            else if(Id==2)
            {
                //return PartialView("_Exhibitor", exhibitors[1]);
                Session["ExhibitorData"] = exhibitors[1];
                return PartialView("_Exhibitor");
            }
            else
            {
                //return PartialView("_Exhibitor", new Exhibitor());
                Session["ExhibitorData"] = new Exhibitor();
                return PartialView("_Exhibitor");
            }

        }

        public class Exhibitor
        {
            public int Id { get; set; }
            public string Name { get; set; }
            public string Surname { get; set; }
        }
    }
}

我的主文件夹中的索引视图代码如下所示：

@using WebApplication5.Controllers

<h2>Exhibitors</h2>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

@Html.DropDownList("ExhibitorsList", new List<SelectListItem>
{
    new SelectListItem {Text ="Tom Cruise", Value = "1" },
     new SelectListItem {Text ="Jennifer Lopez", Value = "2" },
}, "Select Exhibitor" )

@Ajax.ActionLink("Get Exhibitor data", "GetExhibitorDataById", new { Id = 1 }, new AjaxOptions()
{
    HttpMethod = "GET",
    UpdateTargetId = "divExhibitors", // ID of the HTML element to update
    InsertionMode = InsertionMode.Replace // Replace the existing contents
})

<div id="divExhibitors">
</div>

但我想将 Ajax.ActionLink 的参数 Id 设置为来自名为“ExhibitorsList”的 DropDownList 的值，但我不知道该怎么做。 部分视图代码“_Exhibitor”如下所示：

@using WebApplication5.Controllers

<table>

    @if (Session["ExhibitorData"] != null)
    {
        <tr>
            <td>Id</td>
            @*@{HomeController.Exhibitor exhibitor = ((HomeController.Exhibitor)(@Session["ExhibitorData"]))};*@
            @*<td>@exhibitor.Id</td>*@
            <td>@((HomeController.Exhibitor)(@Session["ExhibitorData"])).Id</td>
        </tr>

        <tr>
            <td>Name</td>
            <td>@((HomeController.Exhibitor)(@Session["ExhibitorData"])).Name</td>
        </tr>
            <tr>
                <td>surname</td>
                <td>@((HomeController.Exhibitor)(@Session["ExhibitorData"])).Surname</td>
            </tr>
    }
</table>

当我尝试运行我的应用程序然后单击 Aajax.ActionLink 时出现问题，因为在我单击 Ajax.ActionLink 后我转到了不同的 url。 主页视图：

点击Ajax.ActionLink后

我想要的是从下拉列表中选择人名，然后单击 Ajax.ActionLink 并获取所选人员（参展商）的数据，而无需任何重定向或刷新网站，正如我在开头所写的那样。我也很好奇是否可以仅使用一个视图-“索引”而不使用局部视图来做到这一点。

Answer 1

正如 Stephen Muecke 所说，您应该在 View 中更改控制器以传递模型并显示它：

控制器：

   public PartialViewResult GetExhibitorDataById(int? Id)
    {
        List<Exhibitor> exhibitors = new List<Exhibitor>()
        {
            new Exhibitor()
            {
                Id=1,
                Name= "Tom",
                Surname="Cruise"
            },
            new Exhibitor()
            {
                Id=2,
                Name= "Jennifer",
                Surname="Lopez"
            },
        };

        //here how you pass model to View
        ViewData.Model = exhibitors.FirstOrDefault(x => x.Id == Id);
        return PartialView("_Exhibitor");
    }

您的观点将是：

@model WebApplication5.Controllers.Exhibitor
@using WebApplication5.Controllers

<table>
    @if (Model != null)
    {
        <tr>
            <td>Id</td>
            <td>@Model.Id</td>
        </tr>

        <tr>
            <td>Name</td>
            <td>@Model.Name</td>
        </tr>
        <tr>
            <td>surname</td>
            <td>@Model.Surname</td>
        </tr>
    }
</table>

我所做的是使您的视图使用@model WebApplication5.Controllers.Exhibitor 进行强类型化，然后使用您的模型属性来显示数据。

Answer 2

我终于找到了解决方案。 “问题是由于 unobtrusive-ajax.min.js 文件损坏造成的。”我找到了asp.net mvc partialview @Ajax.ActionLink doesn't work 的帖子，我也遇到了同样的问题。我卸载了 unobtrusive-ajax.min.js 并再次安装它。在我的情况下这是一个很好的解决方案，现在 ajax 可以正常工作。