使用 JQuery 取消我在 MVC 中的单行编辑

Question

我在使用 jquery 取消并返回到索引局部视图时遇到问题。

这就是我希望我的函数执行的操作。如果我添加一行并决定取消添加行，则需要返回到原始局部视图。发生的事情是，一旦执行了取消功能，它就会将添加的行保留在屏幕上，而我只是手动刷新屏幕。我不想做 location.reload(true)，因为那会刷新整个页面，我只想刷新实际的局部视图。

先谢谢你的新鲜眼光，我似乎一直在看这个，我知道我错过了一些东西。

函数：

function cancelThis(element) {
var attendeeuserID = $(element).parents().find('.attendee-stored-  id').attr('data-value');
getCustomerByID(attendeeuserID, element);
}
function getCustomerByID(id, element) {
GetByID("UserCatalogView/Cancel", id, element);
}
function replaceAttendeeRow(result, element) {
$(element).closest('tr').replaceWith(result);
}
function GetByID(url, id, callback, param1) {

$.ajax({
    url: "../../" + url + "/" + id,
    type: "POST",
    success: function (result) {
        if (callback != null && callback != undefined) {
            callback(result);
        }
    },
    error: function (result) {
        if (result.responseText != '') {
            alert(result.responseText);
        }
        else {
            alert("An error occurred while processing results.  Please consult an administrator.");
        }
    }
})
}

控制器：

public ActionResult Cancel (Guid id) //not using this controller at the moment.  Just using the window.location to cancel out. 
    {
        CatalogAttendeeModel model = new CatalogAttendeeModel();
        model.getAttendeesListByID(id);
        var catalog = from ca in db.Catalog_Attendee
                      join a in db.Attendees on ca.AttendeeID equals a.AttendeeID
                      where ca.AttendeeID == id
                      select ca;
        foreach (var item in catalog)
        {
            if (item.IsActive == null)
            {
                item.IsActive = true;
            }
        }
        return PartialView("Index", model);   
    }

局部视图：

@{
<tr>
<td>@Html.DropDownList("CatalogEdit")</td>
<td>@Html.DropDownList("StudyRoleEdit")</td>
<td>@Html.EditorFor(item => item.usercatalogs.IsAdmin.Value)</td>
<td>@Html.DropDownListFor(item => item.usercatalogs.IsTrainingDocPrinted, new[] { new SelectListItem { Text = "Yes", Value = "True" }, new SelectListItem { Text = "No", Value = "False" } }, new { style = "width:50px" })</td>
<td></td>
<td></td>
<td>@Html.TextBoxFor(m => m.usercatalogs.PIName, new { @class = "texbox", style = "width:70px" })</td>
    <td><img class="savecatalog" style="cursor:pointer" onclick="saveEdit(this)" title="Save" src="@Url.Content("~/Content/Images/save.png")" />
        <img onclick="cancelThis(this)" style="cursor:pointer"    title="Cancel" src="@Url.Content("~/Content/Images/cancel.png")" />      
</td>  
</tr>    }

Answer 1

所以我发现使用 javascript 中的 toggle() 方法可以在内联视图之间来回切换。它很好用。因此，例如在我的部分视图中，我可以将我的编辑视图包装在 div 中，并且仅在我点击编辑时才公开它，它将显示编辑视图并隐藏索引视图。然后，如果我点击取消，它将隐藏编辑视图并取消隐藏仅基于 onclick 的索引视图。

使用 JQuery 取消我在 MVC 中的单行编辑

Using JQuery to cancel my singleline edit in MVC

javascript

asp.net-mvc

jquery

partial-views

reload