ASP.NET MVC Refresh usercontrols

Question

ASP.NET MVC

I have one page Index.aspx where I'm loading two usercontrols into divs. This is working fine. For the moment the usercontrols just shows data and thats working fine. But now I want to add a delete function in the usercontrols and then refresh the div in the Index.aspx page. Is this possible?

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 and ReportTwo

Just listing some data with a foreach. Here I want to add a deletebutton for each item in the lists.

Answer 1

you need to modify your user controls

Answer 2

When the user clicks on the delete button inside the user control you could invoke an action that will delete the necessary information from the database and return a partial view refreshing the control. So put a delete link inside the control:

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

and then inside the main page register the click callback for this link:

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

Answer 3

You may use JQuery UI tabs to add and remove the content from the page

JQuery UI Manipulate tabs

JQuery Tabs and ASP.NET MVC Partial Views

Answer 4

Make your "delete" action into something like this:

    [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");
        }
    }

In you ascx/aspx, create a jQuery method to wrap your ajax call to the controller:

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

You will need to put your AntiForgeryToken appropriately so the script can access it - you only need 1 for the whole page. Your delete link should then call to the javascript, instead of to the action in the controller directly:

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