使用 Jquery 和 Ajax 更新 MVC 部分视图 - 正确的方法？答案

【问题标题】：MVC Partial View Updated Using Jquery & Ajax - Correct Approach?使用 Jquery 和 Ajax 更新 MVC 部分视图 - 正确的方法？
【发布时间】：2014-04-11 15:13:51
【问题描述】：

我有一个 MVC 5 Web 应用程序，我希望在其中一个使用 JQuery 和 Ajax 更新的视图中包含一个部分视图。我之前使用过一些 JQuery、Ajax 和 Partial Views，但从未进行过实时更新。

我已经检查了 stackoverflow，虽然我可以找到很多关于这个主题的帖子，但我仍然在努力理解它是如何工作的。如果我在下面向您展示我的预期代码，如果我走在正确的轨道上，如果有人可以建议我，那就太好了。

1 - 用户在 Controller 中点击 Index 方法获取用户详细信息，将用户数据放入 ViewModel 并将 ViewModel 传递给 View。

public ActionResult Index(int id)
{
        DashboardViewModel model = new DashboardViewModel();

        User user = _userService.GetUserByID(Convert.ToInt32(User.Identity.GetUserId()));
        model.SelectedUser = user;

        return View(model);
}

2 - View 接受 ViewModel，并且还包含从 ViewModel 接受数据的 Partial View。部分视图然后显示用户的电子邮件地址。

查看

@model STAR.UI.ViewModels.DashboardViewModel

<div class="row">
    <div class="col-lg-10" id="myPartial">
        @Html.Partial("_UserEmailPartial", Model.SelectedUser)
    </div>
</div>

部分（_UserEmailPartial）

@model STAR.DomainClasses.User

<h1 class="page-header text-danger">@Model.email</h1>

3 - 视图还包含用户可以从中选择其他用户的下拉列表。

<select id="UserID" class="form-control">
   <option>1</option>
   <option>2</option>
   <option>3</option>
   <option>4</option>
   <option>5</option>
 </select>

当用户从下拉列表中选择项目时，包含 AJAX 方法的 JQuery 函数调用控制器中的 Index 操作。

$(document).ready(function () {

$("#UserID").change(ChangeEventOfDDL);

function ChangeEventOfDDL() {

    $.ajax({
        type: "GET",
        url: '/Dashboard/Index/',
        data: { id: $(this).val() },
        error: function () {
            alert("An error occurred.");
        },
        success: function (data) {
            $("#myPartial").html(data);
        }
    });
    }

});

4 - Index 方法接受下拉列表中的 ID，获取所选用户的详细信息，填充 ViewModel 并传递给 View。

接下来是我不确定的地方。我知道我需要将数据传递到 DIV“myPartial”，但我如何只传递数据，而不是整个视图？

任何帮助将不胜感激。

谢谢。

【问题讨论】：

标签： jquery asp.net-mvc asp.net-mvc-partialview

【解决方案1】：

最好向控制器添加另一个返回局部视图的操作：

public ActionResult UserEmail(int id)
{
    User user = _userService.GetUserByID(id);

    return PartialView("_UserEmailPartial", user);
}

然后修改客户端的JS调用这个新动作：

function ChangeEventOfDDL() {
    $.ajax({
        type: "GET",
        url: '/Dashboard/UserEmail/',
        data: { id: $(this).val() },
        error: function () {
            alert("An error occurred.");
        },
        success: function (data) {
            $("#myPartial").html(data);
        }
    });
}

【讨论】：