1. 技术文章
  2. How can I refresh partial view and the main view at the same time?

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

由 南楼画角 提交于 2019-12-01 23:22:02

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: @<text>  <span class="display-mode" data-id="@item.PredefineViewID" id="lblAmountOfSensors">  @item.SensorNo </span> <label id="AmountOfSensors" class="edit-mode"> @item.SensorNo </label> </text>, 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());
                    },
                });
            }
        });
标签
c#
jquery
visual-studio-2013
asp.net-mvc-5
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!