代码之家  ›  专栏  ›  技术社区  ›  ribald

基于自动完成选择加载局部视图

  •  0
  • ribald  · 技术社区  · 7 年前

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

        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>
    
    1 回复  |  直到 7 年前
        1
  •  1
  •   adiga    7 年前

    移除 # id selector .

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