How can I refresh partial view and the main view at the same time?

Question

1) Here is the controller method of my main view:

public ActionResult PredefPageLoad()
    {
        List predefViewsViews = null;
        try
        {
            using (PanSenseEntities context = new PanSenseEntities())
            {
                int userID = Convert.ToInt32(Session["LoggedUserID"]);
                predefViewsViews = (from x in context.PredefineViewsViews where x.UserID == userID select x).ToList();
            }
        }
        catch (Exception e)
        {
            Console.WriteLine(e);
        }
        return View(predefViewsViews);
    }

2) So my main view is displays a web grid which contains in each row an ID, a name and an amount of it's sub names, as well as image icons for add, edit and an icon that opens a partial view that displays the name and all of its sub names:

 @{
        var grid = new WebGrid(Model);
  }
    

    

        @grid.GetHtml(
    tableStyle: "webgrid-table",
    headerStyle: "webgrid-header",
    footerStyle: "webgrid-footer",
    alternatingRowStyle: "webgrid-alternating-row",
    selectedRowStyle: "webgrid-selected-row",
    rowStyle: "webgrid-row-style",
    mode: WebGridPagerModes.All,
    columns:

        grid.Columns(
            grid.Column("PredefID", format: @  @item.PredefineViewID  @item.PredefineViewID , style: "col1Width"),


            grid.Column("", format: @
            
            
            
            
            
            , style: "col2Width", canSort: false),

            grid.Column("PredefName", @Html.Localize("name").ToString(), format: @    @item.Name   , style: "col1Width", canSort: false),

            grid.Column("AmountOfSensors", @Html.Localize("amountOfSensors").ToString(), format: @    @item.SensorNo   @item.SensorNo  , style: "col2Width", canSort: false)
         ))

3) I gave this image icon "class:open-sensors" that when I click opens the mentioned partial view nested inside the div "sensorNames", and here is the java script for that action:

$('.open-sensors').on('click', function () {
        var tr = $(this).parents('tr:first');
        var PredefID = tr.find("#PredefID").html();
        var divSensorNames = $("#sensorNames");
        var urlShowSensors = "@Url.Action("ShowSensorNames", "PredefinedViews", new { predefinedViewID = "PredefID" })";
        urlShowSensors = urlShowSensors.replace("PredefID", PredefID);
        $(divSensorNames).load(urlShowSensors);
        });

4) The controller method then filters the selected ID:

public ActionResult ShowSensorNames(string predefinedViewID)
    {
        List predefViewItemsViews = null;
        try
        {
            using (PanSenseEntities context = new PanSenseEntities())
            {
                int predefViewID = Convert.ToInt32(predefinedViewID);
                predefViewItemsViews = (from x in context.PredefineViewItemsViews where x.PredefineViewID == predefViewID select x).ToList();
            }
        }
        return PartialView("DisplaySensors", predefViewItemsViews);
    }

5) And it opens the partial view inside the "sensorNames" div:

 @{
    var gridSensors = new WebGrid(Model, canPage:false);
}
@gridSensors.GetHtml(
    tableStyle: "webgrid-table",
    headerStyle: "webgrid-header",
    footerStyle: "webgrid-footer",
    alternatingRowStyle: "webgrid-alternating-row",
    selectedRowStyle: "webgrid-selected-row",
    rowStyle: "webgrid-row-style",
    mode: WebGridPagerModes.All,
    columns:


    gridSensors.Columns(
            gridSensors.Column("PredefineViewID", format: @  @item.PredefineViewID   , style: "col1Width"),

            gridSensors.Column("PredefineViewsItemID", format: @  @item.PredefineViewsItemID   , style: "col1Width"),

            gridSensors.Column("", format: @, style: "col1Width", canSort: false),

            gridSensors.Column("PredefName", @Html.Localize("name").ToString(), format: @  @item.PredefineViewName   , style: "col1Width", canSort: false),

            gridSensors.Column("PredefName", @Html.Localize("sensorName").ToString(), format: @  @item.SensorName   , style: "col3Width", canSort: false)

    ))

Here is the question part- how do I delete my sub name (inside the partial view of course) using the image icon in the third column "class=sensor-delete-table" AND refresh this web-grid (take out the deleted row) as well as the main view web-grid (decrement the number of amount of sub names by 1)?

6) What I managed to do was delete the record in my database and only refresh the partial view, but not the main view:

$(function () {
        $(".sensor-delete-table").on("click", function () {
            var divSensorNames = $("#sensorNames");
            var tr = $(this).parents('tr:first');
            var PredefineViewsItemID = tr.find("#PredefineViewsItemID").html();
            var PredefineViewID = tr.find("#PredefineViewID").html();
            var flag = confirm('@Html.Localize("deleteCheck")');
            var urlShowNewSensors = "@Url.Action("ShowSensorNames", "PredefinedViews", new { predefinedViewID = "PredefineViewID" })";
            urlShowNewSensors = urlShowNewSensors.replace("PredefineViewID", PredefineViewID);
            if (PredefineViewID != "" && flag) {

                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: '@Url.Action("DeleteSensor", "PredefinedViews")',
                    data: JSON.stringify({ pviID: PredefineViewsItemID, pID: PredefineViewID}),
                    dataType: "json",
                    complete: function (result) {
                    $("#sensorNames").html(result.responseText);
                    },
                });
            }
        });
    });

7) This is the delete method:

[HttpPost]
    public ActionResult DeleteSensor(int pviID, int pID)
    {
        using (PanSenseEntities context = new PanSenseEntities())
        {
            tblPredefineViewItem existing = context.tblPredefineViewItems.Find(pviID);
            if (existing != null)
            {
                context.tblPredefineViewItems.Remove(existing);
                context.SaveChanges();
            }
        }
        return RedirectToAction("ShowSensorNames", "PredefinedViews", new { predefinedViewID = pID });
    }

This successfully deletes the sub name and takes it to the method which i mentioned in step 4) from where it goes into the "complete:" from step 6). You may ask why didnt I use "success:" instead of complete? Beacause it doens't register that it did anything, and neither does "finish:" or "done:". What I attempted as well was to do a "window.location.reload()" and tried putting it before the "$("#sensorNames").html(result.responseText);" line and every other place I could think of, but it always ends up in the wrong order that I want it to. First I want it to refresh the page and then open the new webgrid with one less sub name, but it just does the opposite- it removes the deleted one and it refreshes the page, so I am left with a refreshed main view without an open partial view- unless I open it manually but thats not what I want.

Sorry for the long post, this is my first time asking a question here.

8)Edit to show resulting html, the first table is:






    
        
            
                PredefID
            
            
            
            
                Name
            
            
                Amount of Sensors
            
        
    
    
        
              18  18 
            


                
                

                



                
                

            
                pokusaj4555   
                10   10  
        
        
              19  19 
            


                
                

                



                
                

            
                pokusaj1333   
                11   11  
        
        
              20  20 
            


                
                

                



                
                

            
                pokusaj3   
                10   10  
        
        
              21  21 
            


                
                

                



                
                

            
                asdasd   
                3   3  
        
        
              22  22 
            


                
                

                



                
                

            
                qwer   
                3   3  
        
        
              23  23 
            


                
                

                



                
                

            
                asd123   
                4   4  
        
        
              1052  1052 
            


                
                

                



                
                

            
                qwerty   
                0   0  
        
        
              2052  2052 
            


                
                

                



                
                

            
                qwerty   
                0   0

Here is the second table:


    
        
            
                PredefineViewID
            
            
                PredefineViewsItemID
            
            
            
            
                Name
            
            
                Sensor Name
            
        
    
    
        
              20   
              42   
            
              pokusaj3   
              Solar radiation    
        
        
              20   
              1123   
            
              pokusaj3   
              Soil Temperature    
        
        
              20   
              1124   
            
              pokusaj3   
              Soil Moisture na 15cm   
        
        
              20   
              1125   
            
              pokusaj3   
              Soil Moisture na 30cm   
        
        
              20   
              1126   
            
              pokusaj3   
              Leaf wetness prvi   
        
        
              20   
              1127   
            
              pokusaj3   
              Ait temperature    
        
        
              20   
              1128   
            
              pokusaj3   
              Air humidity    
        
        
              20   
              1129   
            
              pokusaj3   
              Wind speed    
        
        
              20   
              1130   
            
              pokusaj3   
              Wind direction    
        
        
              20   
              1131   
            
              pokusaj3   
              Precipitation

Mathieu Labrie Parent · Accepted Answer

Why don't you simply remove the row from the webgrid manually in jquery ? You already have the row in the tr var.

var tr = $(this).parents('tr:first');

complete: function (result) {
    tr.remove(); //this will remove the row from the table.    
},

UPDATE :

When you get use to manipulating the DOM with jquery. You ended with making ajax call that return json and update the html dynamically with the json return. There a lot of javascript framework that you can use but you can achieve everything with jquery to.

That said, if you don't want to learn how to manipulate the DOM to deal with your current situation, i will do this. I hope you are using ViewModel to display the view. So in your main page model let's name it MainPageViewModel. Add a property call IDPartialViewDeleted. When you delete the row. Update that property in the MainPageViewModel. RedirectToAction that reload the entire page (probably index). Check if the IDPartialViewDeleted has a value, if so call your function that display the partial view with the specific ID. That will do the trick.

As i said, if you want to manipulate the DOM. All you have to do is. Remove the row from the partialview.

tr.remove();

And find the control in the main grid that contain the number of children and update that value. Something like this.

var count = tr.closest("MainTableIdorClass").find("MyControlWithNumberOfChildren").val();
count--;
tr.closest("MainTableIdorClass").find("MyControlWithNumberOfChildren").val(count);

This way you don't even have to return something from the server and everything is fresh on the client. I hope it's clear.

UPDATE An other edit. To make it simple let's introduce a new and very usefull concept : custom attribute. Do this on the generation of the table one.

grid.Column("AmountOfSensors", @Html.Localize("amountOfSensors").ToString(), format: @    @item.SensorNo   @item.SensorNo  , style: "col2Width", canSort: false)

Add the id to you span. Then update it on the delete this way :

$("[data-id='" + PredefineViewID " +']").text(parseInt($("[data-id='" + PredefineViewID " +']").text()) - 1);

Easy isn't it ?

UPDATE Try this :

$(".sensor-delete-table").on("click", function () {
            var divSensorNames = $("#sensorNames");
            var tr = $(this).parents('tr:first');
            var PredefineViewsItemID = tr.find("#PredefineViewsItemID").html();
            var PredefineViewID = tr.find("#PredefineViewID").html();
            var flag = confirm('@Html.Localize("deleteCheck")');
            var urlShowNewSensors = "@Url.Action("ShowSensorNames", "PredefinedViews", new { predefinedViewID = "PredefineViewID" })";
            urlShowNewSensors = urlShowNewSensors.replace("PredefineViewID", PredefineViewID);
            if (PredefineViewID != "" && flag) {

                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: '@Url.Action("DeleteSensor", "PredefinedViews")',
                    data: JSON.stringify({ pviID: PredefineViewsItemID, pID: PredefineViewID}),
                    dataType: "json",
                    complete: function (result) {
                    $("#sensorNames").html(result.responseText);
                    var amount = parseInt($("[data-id='" + PredefineViewID + "']").text());
                    amount--;
                  $("[data-id='" + PredefineViewID + "']").text(amount.toString());
                    },
                });
            }
        });

How can I refresh partial view and the main view at the same time?

Answers (1)

Related Questions