Jquery 使用淘汰版asp.net mvc更新后刷新

我试图在视图更新后刷新包含角色行的列表。UI使用敲除，后端为ASP NET MVC。我面临的问题是，在调用GetRoles时，没有使用更新的信息刷新。但是，当我调用self.Rolesdata.RolesList时，它会工作。下面是我的实现

视图：包含一个表。单击TR时，输入将填充选定行的值

@model ExpensesOrganiser4.ViewModels.RoleIndexViewModel

@section scripts{
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jqueryui")
@Styles.Render("~/Content/themes/base/css")
<script src="~/Scripts/knockout-2.1.0.js" type="text/javascript"></script>
<script src="~/Scripts/knockout.mapping-latest.js" type="text/javascript"></script>
<script src="~/Scripts/Application/role.js" type="text/javascript"></script>
<script type="text/javascript">
    var kovm = new RoleVM(@Html.Raw(Json.Encode(Model)));
    ko.applyBindings(kovm);
</script>
@*<script type="text/javascript">
    RoleVM = ko.mapping.fromJS(@Html.Raw(Json.Encode(Model)));
</script>*@
}

<h2>Index</h2>

<p>
    <a data-bind="click: DisplayNew">Create New</a>
</p>

<!-- //TABLE containing rows of roles -->
<table border="1">
    <thead>
    <tr>
        <th>@Html.DisplayNameFor(model => model.Rvm.RoleID)</th>
        <th>@Html.DisplayNameFor(model => model.Rvm.RoleName)</th>
        <th>@Html.DisplayNameFor(model => model.Rvm.Description)</th>
        <th>@Html.DisplayNameFor(model => model.Rvm.ApplicationName)</th>
        <th>@Html.DisplayNameFor(model => model.Rvm.ApplicationDescription)</th>
        <th data-bind="visible: false"></th>
    </tr>
    </thead>

    <tbody data-bind="foreach: Roles">
    <tr data-bind="click: $root.GetSelectedRole" id="updtr">
        <td><span data-bind="text: RoleID"></span></td>
        <td><span data-bind="text: RoleName"></span></td>
        <td><span data-bind="text: Description"></span></td>
        <td><span data-bind="text: ApplicationName"></span></td>
        <td><span data-bind="text: ApplicationDescription"></span></td>
        <td data-bind="visible: false"><span data-bind="text: ApplicationID"></span></td>
    </tr>
    </tbody>
</table>
<!-- //END TABLE containing rows of roles -->

<!-- INPUTS populated when <TR> is clicked --->
<table data-bind="visible: ReadOnlyMode">
    <tr>
        <td><label for="RoleID">Role ID:</label></td>
        <td><input data-bind="value: RoleID" type="text" id="RoleID" /></td>
    </tr>
    <tr>
         <td><label for="RoleName">Role Name:</label></td>
         <td><input data-bind="value: RoleName" type="text" id="RoleName" /></td>
    </tr>
    <tr>
        <td><label for="Description">Role Description:</label></td>
        <td><input data-bind="value: Description" type="text" id="Description" /></td>
    </tr>
    <tr>
    <td><label for="ApplicationName">Application:</label></td>
    <!--<td>@Html.DropDownList("cboApplicationName", Model.ApplicationsSelectList, new Dictionary<string, object> {{ "data-bind", "value: ApplicationID"}})</td>-->
    <td><select data-bind="options: ApplicationsList, optionsText: 'AppName', optionsValue: 'AppID', value: ApplicationID" id="cboApplications"></select></td>
</tr>
<tr>
    <td><label for="ApplicationDescription">Application Description:</label></td>
    <td><input data-bind="value: SelectedApplication" type="text" id="ApplicationDescription" /></td>
</tr>
</table>

<button data-bind="visible: DisplayUpdateRoleButton, click: UpdateRole" id="btnUpdate">Update</button>
<button data-bind="visible: DisplayDeleteRoleButton" id="btnDelete">Delete</button>


<div id="dialog-confirm" title="Success">Success.</div>  

MVC：

 public ActionResult Index()
 {
        RoleIndexViewModel viewModel = new RoleIndexViewModel();
        Roles r = new Roles();

        viewModel = r.CreateRoleIndexViewModel();

        return View(viewModel);
 }

[HttpPost]
public ActionResult Edit(RoleViewModel rvm)
{
        RoleIndexViewModel viewModel = new RoleIndexViewModel();
        Roles r = new Roles();

        if (ModelState.IsValid)
        {
            using (db)
            {
                tblRole role = db.tblRoles.Single(t => t.RoleID == rvm.RoleID);
                role.RoleName = rvm.RoleName;
                role.Description = rvm.Description;
                role.ApplicationID = rvm.ApplicationID;

                db.ObjectStateManager.ChangeObjectState(role, EntityState.Modified);
                db.SaveChanges();
            }

            viewModel = r.CreateRoleIndexViewModel();
        }

        return Json(viewModel, JsonRequestBehavior.AllowGet);
}

这个问题是由嵌套的AJAX调用引起的吗，即在UpdateSelectedRole和它的GetRoles中

---

感谢您在ajax调用中首先清除角色数组，然后像这样传递新结果

self.Roles([]);
self.Roles(vm.RolesList);

还可以更改GetRoles函数

因为self.Roles在您试图设置的函数中不是全局的

你能做以下改变，看看它是否正常工作吗

改变

function UpdateSelectedRole() {
var updatedRoleInfo = new UpdatedRoleInfo();

updatedRoleInfo.RoleID = self.RoleID();
updatedRoleInfo.RoleName = self.RoleName();
updatedRoleInfo.Description = self.Description();
updatedRoleInfo.ApplicationID = self.ApplicationID();
//updatedRoleInfo.ApplicationID = $("#cboApplications").val();

var url = "/Roles/Edit";

$.ajax({
    cache: false,
    type: "POST",
    url: "/Roles/Edit",
    data: updatedRoleInfo,
    success: function (data, textStatus) {
        UpdateRoleComplete(data);
        GetRoles().success(function(data){
             self.Roles(data.RolesList);
        });

        //self.Roles(data.RolesList);  //Works when I call this.
    },
    error: function (xhr, ajaxOptions, thrownError) {
        alert("Failed to update. " + "xhr.status: " + xhr.status + "xhr.responseText: " + xhr.responseText);
    }
});
}

function GetRoles() {
return $.ajax({
    cache: false,
    type: "GET",
    url: "/Roles",
    dataType: "JSON"
});
}

---

GetRoles返回我在UpdateSelectedRole中解析并填充self的承诺。Roles

根据我自己。GetRoles中的角色没有引用viewmodel中的角色。只是想知道为什么需要清除self.Roles数组？将GetRoles定义为var RoleVM=函数数据{}之外的函数GetRoles和self.GetRoles={}之间有什么区别？您如何知道在哪里定义函数？我假设需要清除，所以订阅了可观察数组意味着它知道现在我必须更改。self.GetRoles与viewmodel相关，如果将其设置为GetRoles，则它是纯javascript函数。当使用in-knockout时，它会在您的viewmodel中搜索，但在这种情况下无法找到，我是否可以调用self.Rolesdata.RolesList而不是GetRoles？

self.GetRoles = () {
    // your code here
}

function UpdateSelectedRole() {
var updatedRoleInfo = new UpdatedRoleInfo();

updatedRoleInfo.RoleID = self.RoleID();
updatedRoleInfo.RoleName = self.RoleName();
updatedRoleInfo.Description = self.Description();
updatedRoleInfo.ApplicationID = self.ApplicationID();
//updatedRoleInfo.ApplicationID = $("#cboApplications").val();

var url = "/Roles/Edit";

$.ajax({
    cache: false,
    type: "POST",
    url: "/Roles/Edit",
    data: updatedRoleInfo,
    success: function (data, textStatus) {
        UpdateRoleComplete(data);
        GetRoles().success(function(data){
             self.Roles(data.RolesList);
        });

        //self.Roles(data.RolesList);  //Works when I call this.
    },
    error: function (xhr, ajaxOptions, thrownError) {
        alert("Failed to update. " + "xhr.status: " + xhr.status + "xhr.responseText: " + xhr.responseText);
    }
});
}

function GetRoles() {
return $.ajax({
    cache: false,
    type: "GET",
    url: "/Roles",
    dataType: "JSON"
});
}