Reload PartialView from itself INSIDE

Question

Well,

I have a PartialView who generate a VIEW with a complex Model. I have a button that I want to regenerate COMPLETELY my PartialView

    @if (!Model.editFlag)
{
<button id="EditButton" class='btn btn-small'>Edit</button>
}
else
{
<button  class='btn btn-small'>Update</button>
}

This is my Ajax CALL

    $.ajax(
{
    type: "POST",
    url: "@Url.Action("DeviceDetails_Edit","DeviceLayout")"  ,
    data:
    {
        DeviceID: '@Model.DeviceID',
        DeviceName: '@Model.DeviceName',
        DeviceDescription: '@Model.DeviceDescription',
        editFlag: '@Model.editFlag',
    },
    cache:false,
    success: function(html) 
        { 
            alert('success');
        },
        error: function(e) 
            { 
            alert("errorn"); 
            }

});
});

and from controller, I have an ActionResult , who returns a partial view with MY NEW SPECIFIC MODEL return PartialView("_DeviceDetails", model);

Into My view , exists more more PartialView`s

How can I resolve this problem ?

Answer 1

I will assume you already have a div on your page. With jQuery, you can clear a div element in your click event button, for sample

<div id="myView"></div>

With jquery, you can clear the div with empty method:

$("button").click (function (e) {

   // clear the html on the  div
   $("#myDiv").empty();


    // make a post to reload the div:
    $.ajax(
    {
        type: "POST",
        url: "@Url.Action("DeviceDetails_Edit","DeviceLayout")"  ,
        data:
        {
            DeviceID: '@Model.DeviceID',
            DeviceName: '@Model.DeviceName',
            DeviceDescription: '@Model.DeviceDescription',
            editFlag: '@Model.editFlag',
        },
        cache:false,
        success:function(html) 
                { 
                    // fill the div with the html returned by action
                    $("#myView").html(html);
                },
        error:  function(e) 
                { 
                    alert("errorn"); 
                }
    });   

});