ASP.NET MVC Обновить пользовательские элементы управления

Question

ASP.NET MVC

У меня есть одна страница Index.aspx, где я загружаю два пользовательских элемента управления в div. Это работает нормально. На данный момент usercontrols просто показывает данные, и это работает нормально. Но теперь я хочу добавить функцию удаления в usercontrols, а затем обновить div на странице Index.aspx. Это возможно?

index.aspx

<!-- Panel One -->
<div id="panel1">
    <img src="/Content/ajax-loader.gif" alt="Loading..." />
</div>

<script type="text/javascript">
    $('#panel1').load('../Reports/ReportOne')
</script>

<!-- Panel Two -->
<div id="panel2">
    <img src="/Content/ajax-loader.gif" alt="Loading..." />
</div>

<script type="text/javascript">
    $('#panel2').load('../Reports/ReportTwo')
</script>

ReportOne.ascx и ReportTwo

Просто перечисление некоторых данных с помощью foreach. Здесь я хочу добавить кнопку удаления для каждого элемента в списках.

Answer 1

Сделайте ваше действие "delete" примерно таким:

    [AcceptVerbs(HttpVerbs.Post), ValidateAntiForgeryToken]
    public ActionResult Delete(int id) {
        try {
            // do what ever here in deleting the record etc
            // ...

            return null;
        } catch (Exception ex) {
            TempData[TempDataKeys.ErrorMessage] = "Error in deleting: " + ex.Message;
            return RedirectToAction("List");
        }
    }

В вашем ascx / aspx создайте метод jQuery для переноса вашего вызова ajax на контроллер:

function deleteRecord(recordId) {
    if (confirm("Are you sure that you want to delete this record?")) {
        var token = $("input[name='__RequestVerificationToken']")[0].value;
        url = '<%= Url.Action("Delete", "MyController") %>';

        $.post(
           url, 
           { id: recordId, __RequestVerificationToken: token }, 
           function(data) { 
               if (!data == "") {
                   // success - reload/refresh panel control
                   $('#panel1').load('../Reports/ReportOne');
               } else {
                   // failed - handle error
               }  
           }
        );
    }
}

Вам нужно будет соответствующим образом поместить ваш AntiForgeryToken, чтобы скрипт мог получить к нему доступ - вам нужна только 1 для всей страницы. Ваша ссылка для удаления должна затем обращаться к JavaScript, а не к действию в контроллере напрямую:

<a href="javascript:deleteRecord('<%=recordId%>');">Delete</a>

Answer 2

Когда пользователь нажимает кнопку удаления внутри пользовательского элемента управления, вы можете вызвать действие, которое удалит необходимую информацию из базы данных и вернет частичное представление, обновляющее элемент управления. Поэтому поместите ссылку удаления внутри элемента управления:

<%= Html.ActionLink("Delete", "DeleteReportOne", null, new { id = "deleteReportOne" }) %>

и затем на главной странице зарегистрируйте обратный вызов для этой ссылки:

$(function() {
    $('#deleteReportOne').click(function() {
        $('#panel1').load(this.href);
    });
});

Answer 3

Вы можете использовать вкладки пользовательского интерфейса JQuery для добавления и удаления контента со страницы

JQuery UI Управление вкладками

Вкладки JQuery и частичные представления ASP.NET MVC

Answer 4

вам нужно изменить ваши элементы управления