ASP.NET MVC Refresh usercontrols

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开发者_C百科 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.

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>

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

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

you need to modify your user controls