Question

我有一个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函数会调用Controller中的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”，但是我如何只传入数据，而不是整个视图？

非常感谢任何帮助。

感谢。

Answer 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);
        }
    });
}

MVC部分视图使用Jquery＆amp;更新Ajax - 正确的方法？

1 个答案: