如何在asp.net mvc中使用Ajax更新View？(How to update View using Ajax in asp.net mvc?)

 我有一个简单的表格，下拉列表中有人名（参展商）。 在我选择其中一个并点击“获取参展商数据”链接后，我想仅更新我的主页网站的一部分并显示所选参展商的数据。 项目中我的文件夹结构：  我的家庭控制器如下所示： 
 
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; }
        }
    }
}
 
 Home文件夹中的我的索引视图代码如下所示： 
 
@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设置为DropDownList中名为“ExhibitorsList”的值，我不知道该怎么做。 部分查看代码“_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并获取选定人员（参展商）的数据，而无需重新定向或刷新网站，就像我在开始时所写的那样。 我也很好奇是否有可能只使用一个View-“Index”而不使用partialview。 

I have a simple form with drop down list with people names(exhibitors). After I choose one of them and click link “Get Exhibitor data” I want to update only a part of my Home site and show data of chosen exhibitor. Structure of my folders in project: My home controller looks like follows:
 
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; }
        }
    }
}
 
My Index View code from Home folder looks like this:
 
@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>
 
But I would like to set parameter Id of Ajax.ActionLink, to value from DropDownList called “ExhibitorsList” and I don’t know how to do that. Partial View code “_Exhibitor” looks like this:
 
@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>
 
When I tried to run my app and then click Aajax.ActionLink something gone wrong because after I clicked Ajax.ActionLink I go to different url. Home View:
 
 
After Clicked Ajax.ActionLink
 
 
What I want is to choose person name from dropdownlist, then click Ajax.ActionLink and get data of chosen person(exhibitor) without any redirect or refresh the site as I wrote at the beginning. Im also curious if it possible to do that only with one View- "Index" without using partialview.

原文：https://stackoverflow.com/questions/35149447