使用Ajax刷新整个页面的部分视图更新

Question

我有一个控制器动作方法，它返回一个部分视图，我从主索引视图中调用控制器动作方法，如下所示。

控制器

    public PartialViewResult GetEmployee(int val)
    {
        var employee = db.getEmployeeById(val)
        return PartialView("_PatialEmployeeView", employee);
    }

索引视图调用部分

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>Get Employee</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.Input)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Input)
            @Html.ValidationMessageFor(model => model.Input)
        </div>

        <p>
            <input id="GetEmp" type="submit" value="Run" />
        </p>
    </fieldset>
}
<div id="EmployeeResults">
</div>

我发出AJAX请求的Javascript如下所示。

$('#GetEmp').click(function (e) {
        var empId = document.getElementById("GetEmp").value;
        $.ajax({
            url: '@Url.Action("GetEmployee", "Home")',
            type: "get", //send it through get method
            data: { val: empId },
            cache: false,
            success: function (data) {
                $("#EmployeeResults").html(data);
                //Do Something
            },
            error: function (xhr) {
                alert("FAILED");
                //Do Something to handle error
            }
        });
    });

在上面，只要我在文本框中输入员工ID值并提交表单...我想将部分View中的结果附加到div（EmployeeResults）元素。我返回部分View结果，但每次提交表单时整个页面都会刷新，因此我看不到部分视图输出。

有人可以指出我做错了什么以及如何在不刷新整个页面的情况下只显示部分视图。

Answer 1

提交表单会导致页面刷新，除非您阻止默认操作：

$('#GetEmp').click(function (e) {
    e.preventDefault();