基于自动完成选择加载局部视图(Load Partial View based on Autocomplete Selection)

基于自动完成选择加载局部视图(Load Partial View based on Autocomplete Selection)

我刚刚第一次学习ASP.NET，MVC和JScript。 我正在尝试使用自动完成中的选择来执行ajax调用获取数据并使用该数据加载局部视图。 控制器使用选定的Id获取请求，但部分视图从不加载。 我究竟做错了什么？

（视图和局部视图有不同的模型 - 我认为这不是问题）

CONTROLLER

public ActionResult GetEmployee(int id) { HumanResourcesManager man = new HumanResourcesManager(); var emp = man.GetEmployee(id); return PartialView("_EmployeeDetails", emp); }

视图

@model HumanResources.Web.Models.EmployeeModel <p> Selected Employee: @Html.TextBox("EmployeeSearch") </p> <script type="text/javascript"> $("#EmployeeSearch").autocomplete({ source: function (request, response) {                 $.ajax({ url: "@(Url.Action("FindEmployee", "Employee"))",                     type: "POST",                     dataType: "json",                     data: { term: request.term },                     success: function (data) { response($.map(data, function (item) { return { label: item.DisplayName, value: item.DisplayName, id: item.Id };                         }))                     }                 }) }, select: function (event, ui) { if (ui.item) { GetEmployeeDetails(ui.item.id); } } }); function GetEmployeeDetails(id) { $.ajax({ url: '/Employee/GetEmployee', type: 'POST', async: false, data: { id: id }, success: function (result) { $("#partialView").html(result); } }); } </script> <div id="#partialView"> @*Partial View Test*@ </div>

部分视图

@model HumanResources.Objects.Employee.EmployeeInformation @{ Layout = null; } <h1>THIS IS A TEST</h1>

I'm just learning ASP.NET, MVC, and JScript for the first time. I'm attempting to use the selection from an autocomplete to do an ajax call get data and load a partial view with that data. The controller gets the request with the selected Id, but the partial view never loads. What am I doing wrong?

(the view and partial view have different models - I didn't think that would be an issue)

CONTROLLER

public ActionResult GetEmployee(int id) { HumanResourcesManager man = new HumanResourcesManager(); var emp = man.GetEmployee(id); return PartialView("_EmployeeDetails", emp); }

VIEW

@model HumanResources.Web.Models.EmployeeModel <p> Selected Employee: @Html.TextBox("EmployeeSearch") </p> <script type="text/javascript"> $("#EmployeeSearch").autocomplete({ source: function (request, response) {                 $.ajax({ url: "@(Url.Action("FindEmployee", "Employee"))",                     type: "POST",                     dataType: "json",                     data: { term: request.term },                     success: function (data) { response($.map(data, function (item) { return { label: item.DisplayName, value: item.DisplayName, id: item.Id };                         }))                     }                 }) }, select: function (event, ui) { if (ui.item) { GetEmployeeDetails(ui.item.id); } } }); function GetEmployeeDetails(id) { $.ajax({ url: '/Employee/GetEmployee', type: 'POST', async: false, data: { id: id }, success: function (result) { $("#partialView").html(result); } }); } </script> <div id="#partialView"> @*Partial View Test*@ </div>

PARTIAL VIEW

@model HumanResources.Objects.Employee.EmployeeInformation @{ Layout = null; } <h1>THIS IS A TEST</h1>

最满意答案

从部分视图div id中删除# 。 您只在使用jQuery的id选择器时添加它。

<div id="partialView"> @*Partial View Test*@ </div>

Remove the # from your partial view div id. You only add it when you're using jQuery's id selector.

<div id="partialView"> @*Partial View Test*@ </div>