根据自动填充选择加载部分视图

时间:2017-09-10 13:35:35

标签: asp.net asp.net-mvc asp.net-mvc-5 partial-views jquery-ui-autocomplete

我刚刚第一次学习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>

PARTIAL VIEW

@model HumanResources.Objects.Employee.EmployeeInformation
@{ 
    Layout = null;
}

<h1>THIS IS A TEST</h1>

1 个答案:

答案 0 :(得分:1)

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

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