如何同时刷新局部视图和主视图? [英] How can I refresh partial view and the main view at the same time?
本文介绍了如何同时刷新局部视图和主视图?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
1) 这是我的主视图的控制器方法:
public ActionResult PredefPageLoad(){ListpredefViewsViews = null;尝试{使用 (PanSenseEntities context = new PanSenseEntities()){int userID = Convert.ToInt32(Session["LoggedUserID"]);predefViewsViews = (from x in context.PredefineViewsViews where x.UserID == userID select x).ToList();}}捕获(例外 e){Console.WriteLine(e);}返回视图(predefViewsViews)；} 2) 所以我的主要视图是显示一个网络网格，其中每行包含一个 ID、一个名称和子名称的数量，以及用于添加、编辑的图像图标 和一个图标，打开显示名称及其所有子名称的部分视图:
@{var grid = new WebGrid(Model);}<div id="gridContent"><button type="button" id="createNewPredefinedView" style="margin-bottom: 20px;">@Html.Localize("createNew")</button>@grid.GetHtml(tableStyle: "webgrid-table",headerStyle: "webgrid-header",footerStyle: "webgrid-footer",alterRowStyle: "webgrid-alternating-row",selectedRowStyle: "webgrid-selected-row",rowStyle: "webgrid-row-style",模式:WebGridPagerModes.All，列:网格.列(grid.Column("PredefID", 格式:@<text> <span class="display-mode" id="PredefViewID">@item.PredefineViewID </span> <label id="PredefID" class="edit-mode">@item.PredefineViewID</label> </text>, style: "col1Width"),grid.Column("", 格式:@<img class="edit-table display-mode click_images" src="~/Images/edit.png"/><img class="delete-table display-mode click_images" src="~/Images/delete.png"/><img class="open-sensors display-mode click_images" src="~/Images/Sensor.png"/><img class="save-table edit-mode click_images" src="~/Images/save.png"/><img class="cancel-table edit-mode click_images" src="~/Images/cancel.png"/></text>, style: "col2Width", canSort: false),grid.Column("PredefName", @Html.Localize("name").ToString()，格式:@<text> <span class="display-mode"> <label id="lblPredefName">;@item.Name</label> </span> <input type="text" id="PredefName" value="@item.Name" class="edit-mode"/> </text>, 样式: "col1Width", canSort: false),grid.Column("AmountOfSensors", @Html.Localize("amountOfSensors").ToString()，格式:@<text><span class="display-mode" id="lblAmountOfSensors"> @item.SensorNo</span> <label id="AmountOfSensors" class="edit-mode"> @item.SensorNo </label> </text>, style: "col2Width", canSort: false))) <div id="sensorNames">
3) 我给了这个图像图标class:open-sensors"，当我点击它时会打开提到的嵌套在 divsensorNames"中的局部视图，这是该操作的 java 脚本:
$('.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) 然后控制器方法过滤选定的 ID:
public ActionResult ShowSensorNames(stringprefixedViewID){列表predefViewItemsViews = null;尝试{使用 (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) 它打开sensorNames"div 内的局部视图:
@{var gridSensors = new WebGrid(Model, canPage:false);}@gridSensors.GetHtml(tableStyle: "webgrid-table",headerStyle: "webgrid-header",footerStyle: "webgrid-footer",alterRowStyle: "webgrid-alternating-row",selectedRowStyle: "webgrid-selected-row",rowStyle: "webgrid-row-style",模式:WebGridPagerModes.All，列:gridSensors.Columns(gridSensors.Column("PredefineViewID", 格式:@<text> <span id="PredefineViewID">@item.PredefineViewID </span> </text>, style: "col1Width"),gridSensors.Column("PredefineViewsItemID", 格式:@<text> <span id="PredefineViewsItemID">@item.PredefineViewsItemID </span> </text>, style: "col1Width"),gridSensors.Column("", 格式:@<text><img class="sensor-delete-table click_images" alt="@Html.Localize("delete")" title="@Html.Localize("delete")" src="~/Images/delete.png"/></text>, style: "col1Width", canSort: false),gridSensors.Column("PredefName", @Html.Localize("name").ToString()，格式:@<text><span><label id="lblPredefineViewName">@item.PredefineViewName</label> </span> </text>, style: "col1Width", canSort: false),gridSensors.Column("PredefName", @Html.Localize("sensorName").ToString()，格式:@<text><span><label id="lblSensorName">@item.SensorName</label> </span> </text>, style: "col3Width", canSort: false)))这是问题部分 - 如何使用第三列class=sensor-delete-table"中的图像图标删除我的子名称(当然在局部视图内)并刷新此网络网格(取出删除的行)以及主视图web-grid(将子名称数量减1)?
6) 我设法做的 是删除我数据库中的记录，只刷新局部视图，而不刷新主视图:
$(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({类型:POST"，contentType: "application/json; charset=utf-8",url: '@Url.Action("DeleteSensor", "PredefinedViews")',数据:JSON.stringify({ pviID: PredefineViewsItemID, pID: PredefineViewID}),数据类型:json"，完成:功能(结果){$("#sensorNames").html(result.responseText);},});}});});7) 这是删除方法:
[HttpPost]公共 ActionResult DeleteSensor(int pviID, int pID){使用 (PanSenseEntities context = new PanSenseEntities()){tblPredefineViewItem 存在 = context.tblPredefineViewItems.Find(pviID);如果(现有！= null){context.tblPredefineViewItems.Remove(existing);context.SaveChanges();}}return RedirectToAction("ShowSensorNames", "PredefinedViews", new {predefinedViewID = pID });}这成功地删除了子名称并将其带到我在步骤 4) 中提到的方法，从那里它进入步骤 6) 中的完成:".你可能会问为什么我不使用成功:"而不是完整的?因为它没有注册它做了任何事情，完成:"或完成:"也没有.我还尝试做一个window.location.reload()"并尝试将它放在$(#sensorNames").html(result.responseText);"之前line 和我能想到的所有其他地方，但它总是以我想要的错误顺序结束.首先，我希望它刷新页面，然后用少一个子名称打开新的 webgrid，但它只是做相反的事情 - 它删除已删除的页面并刷新页面，所以我只剩下一个刷新的主视图而没有打开部分视图 - 除非我手动打开它，但这不是我想要的.
抱歉发了这么长的帖子，这是我第一次在这里提问.
8)编辑显示生成的html，第一个表格是:
<div id="gridContent" class="table-responsive col-md-6" style="padding-top: 20px; "><button type="button" id="createNewPredefinedView" style="margin-bottom: 20px;">新建</button><table class="webgrid-table"><头><tr class="webgrid-header"><th scope="col" style="display: none;"><a href="/PredefinedViews/PredefPageLoad?sort=PredefID&sortdir=ASC">PredefID</a></th><th scope="col"></th><th scope="col">名称</th><th scope="col">传感器数量</th></tr></thead><tr class="webgrid-row-style"><td class="col1Width" style="display: none;"><span class="display-mode" id="PredefViewID">18 </span><label id="PredefID" class="edit-mode" style="display: none;">18</label></td><td class="col2Width"><img class="edit-table display-mode click_images" alt="Edit" title="Edit" src="/Images/edit.png"><img class="delete-table display-mode click_images" alt="Delete" title="Delete" src="/Images/delete.png"><img class="open-sensors display-mode click_images" alt="View of Existing Sensors" title="View of Existing Sensors" src="/Images/Sensor.png"><img class="save-table edit-mode click_images" alt="Save" title="Save" src="/Images/save.png" style="display: none;"><img class="cancel-table edit-mode click_images" alt="Cancel" title="Cancel" src="/Images/cancel.png" style="display: none;"></td><td class="col1Width"><span class="display-mode"><label id="lblPredefName">pokusaj4555</label></span><input type="text" id="PredefName" value="pokusaj4555" class="edit-mode" style="display: none;"></td><td class="col2Width"><span class="display-mode" id="lblAmountOfSensors">10 </span><label id="AmountOfSensors" class="edit-mode" style="display: none;">10 </标签></td></tr><tr class="webgrid-alternating-row"><td class="col1Width" style="display: none;"><span class="display-mode" id="PredefViewID">19 </span><label id="PredefID" class="edit-mode" style="display: none;">19</label></td><td class="col2Width"><img class="edit-table display-mode click_images" alt="Edit" title="Edit" src="/Images/edit.png"><img class="delete-table display-mode click_images" alt="Delete" title="Delete" src="/Images/delete.png"><img class="open-sensors display-mode click_images" alt="View of Existing Sensors" title="View of Existing Sensors" src="/Images/Sensor.png"><img class="save-table edit-mode click_images" alt="Save" title="Save" src="/Images/save.png" style="display: none;"><img class="cancel-table edit-mode click_images" alt="Cancel" title="Cancel" src="/Images/cancel.png" style="display: none;"></td><td class="col1Width"><span class="display-mode"><label id="lblPredefName">pokusaj1333</label></span><input type="text" id="PredefName" value="pokusaj1333" class="edit-mode" style="display: none;"></td><td class="col2Width"><span class="display-mode" id="lblAmountOfSensors">11 </span><label id="AmountOfSensors" class="edit-mode" style="display: none;">11 </标签></td></tr><tr class="webgrid-row-style"><td class="col1Width" style="display: none;"><span class="display-mode" id="PredefViewID">20 </span><label id="PredefID" class="edit-mode" style="display: none;">20</label></td><td class="col2Width"><img class="edit-table display-mode click_images" alt="Edit" title="Edit" src="/Images/edit.png"><img class="delete-table display-mode click_images" alt="Delete" title="Delete" src="/Images/delete.png"><img class="open-sensors display-mode click_images" alt="View of Existing Sensors" title="View of Existing Sensors" src="/Images/Sensor.png"><img class="save-table edit-mode click_images" alt="Save" title="Save" src="/Images/save.png" style="display: none;"><img class="cancel-table edit-mode click_images" alt="Cancel" title="Cancel" src="/Images/cancel.png" style="display: none;"></td><td class="col1Width"><span class="display-mode"><label id="lblPredefName">pokusaj3</label></span><input type="text" id="PredefName" value="pokusaj3" class="edit-mode" style="display: none;"></td><td class="col2Width"><span class="display-mode" id="lblAmountOfSensors">10 </span><label id="AmountOfSensors" class="edit-mode" style="display: none;">10 </标签></td></tr><tr class="webgrid-alternating-row"><td class="col1Width" style="display: none;"><span class="display-mode" id="PredefViewID">21 </span><label id="PredefID" class="edit-mode" style="display: none;">21</label></td><td class="col2Width"><img class="edit-table display-mode click_images" alt="Edit" title="Edit" src="/Images/edit.png"><img class="delete-table display-mode click_images" alt="Delete" title="Delete" src="/Images/delete.png"><img class="open-sensors display-mode click_images" alt="View of Existing Sensors" title="View of Existing Sensors" src="/Images/Sensor.png"><img class="save-table edit-mode click_images" alt="Save" title="Save" src="/Images/save.png" style="display: none;"><img class="cancel-table edit-mode click_images" alt="Cancel" title="Cancel" src="/Images/cancel.png" style="display: none;"></td><td class="col1Width"><span class="display-mode"><label id="lblPredefName">asdasd</label></span><input type="text" id="PredefName" value="asdasd" class="edit-mode" style="display: none;"></td><td class="col2Width"><span class="display-mode" id="lblAmountOfSensors">3 </span><label id="AmountOfSensors" class="edit-mode" style="display: none;">3 </标签></td></tr><tr class="webgrid-row-style"><td class="col1Width" style="display: none;"><span class="display-mode" id="PredefViewID">22 </span><label id="PredefID" class="edit-mode" style="display: none;">22</label></td><td class="col2Width"><img class="edit-table display-mode click_images" alt="Edit" title="Edit" src="/Images/edit.png"><img class="delete-table display-mode click_images" alt="Delete" title="Delete" src="/Images/delete.png"><img class="open-sensors display-mode click_images" alt="View of Existing Sensors" title="View of Existing Sensors" src="/Images/Sensor.png"><img class="save-table edit-mode click_images" alt="Save" title="Save" src="/Images/save.png" style="display: none;"><img class="cancel-table edit-mode click_images" alt="Cancel" title="Cancel" src="/Images/cancel.png" style="display: none;"></td><td class="col1Width"><span class="display-mode"><label id="lblPredefName">qwer</label></span><input type="text" id="PredefName" value="qwer" class="edit-mode" style="display: none;"></td><td class="col2Width"><span class="display-mode" id="lblAmountOfSensors">3 </span><label id="AmountOfSensors" class="edit-mode" style="display: none;">3 </标签></td></tr><tr class="webgrid-alternating-row"><td class="col1Width" style="display: none;"><span class="display-mode" id="PredefViewID">23 </span><label id="PredefID" class="edit-mode" style="display: none;">23</label></td><td class="col2Width"><img class="edit-table display-mode click_images" alt="Edit" title="Edit" src="/Images/edit.png"><img class="delete-table display-mode click_images" alt="Delete" title="Delete" src="/Images/delete.png"><img class="open-sensors display-mode click_images" alt="View of Existing Sensors" title="View of Existing Sensors" src="/Images/Sensor.png"><img class="save-table edit-mode click_images" alt="Save" title="Save" src="/Images/save.png" style="display: none;"><img class="cancel-table edit-mode click_images" alt="Cancel" title="Cancel" src="/Images/cancel.png" style="display: none;"></td><td class="col1Width"><span class="display-mode"><label id="lblPredefName">asd123</label></span><input type="text" id="PredefName" value="asd123" class="edit-mode" style="display: none;"></td><td class="col2Width"><span class="display-mode" id="lblAmountOfSensors">4 </span><label id="AmountOfSensors" class="edit-mode" style="display: none;">4 </标签></td></tr><tr class="webgrid-row-style"><td class="col1Width" style="display: none;"><span class="display-mode" id="PredefViewID">1052 </span><label id="PredefID" class="edit-mode" style="display: none;">1052</label></td><td class="col2Width"><img class="edit-table display-mode click_images" alt="Edit" title="Edit" src="/Images/edit.png"><img class="delete-table display-mode click_images" alt="Delete" title="Delete" src="/Images/delete.png"><img class="open-sensors display-mode click_images" alt="View of Existing Sensors" title="View of Existing Sensors" src="/Images/Sensor.png"><img class="save-table edit-mode click_images" alt="Save" title="Save" src="/Images/save.png" style="display: none;"><img class="cancel-table edit-mode click_images" alt="Cancel" title="Cancel" src="/Images/cancel.png" style="display: none;"></td><td class="col1Width"><span class="display-mode"><label id="lblPredefName">qwerty</label></span><input type="text" id="PredefName" value="qwerty" class="edit-mode" style="display: none;"></td><td class="col2Width"><span class="display-mode" id="lblAmountOfSensors">0 </span><label id="AmountOfSensors" class="edit-mode" style="display: none;">0 </标签></td></tr><tr class="webgrid-alternating-row"><td class="col1Width" style="display: none;"><span class="display-mode" id="PredefViewID">2052 </span><label id="PredefID" class="edit-mode" style="display: none;">2052</label></td><td class="col2Width"><img class="edit-table display-mode click_images" alt="Edit" title="Edit" src="/Images/edit.png"><img class="delete-table display-mode click_images" alt="Delete" title="Delete" src="/Images/delete.png"><img class="open-sensors display-mode click_images" alt="View of Existing Sensors" title="View of Existing Sensors" src="/Images/Sensor.png"><img class="save-table edit-mode click_images" alt="Save" title="Save" src="/Images/save.png" style="display: none;"><img class="cancel-table edit-mode click_images" alt="Cancel" title="Cancel" src="/Images/cancel.png" style="display: none;"></td><td class="col1Width"><span class="display-mode"><label id="lblPredefName">qwerty</label></span><input type="text" id="PredefName" value="qwerty" class="edit-mode" style="display: none;"></td><td class="col2Width"><span class="display-mode" id="lblAmountOfSensors">0 </span><label id="AmountOfSensors" class="edit-mode" style="display: none;">0 </标签></td></tr></tbody>这是第二个表格:
<头><tr class="webgrid-header"><th scope="col"><a href="/PredefinedViews/ShowSensorNames?predefinedViewID=20&sort=PredefineViewID&sortdir=ASC">PredefineViewID</a></th><th scope="col"><a href="/PredefinedViews/ShowSensorNames?predefinedViewID=20&sort=PredefineViewsItemID&sortdir=ASC">PredefineViewsItemID</a></th><th scope="col"></th><th scope="col">名称</th><th scope="col">传感器名称</th></tr></thead><tr class="webgrid-row-style"><td class="col1Width"><span id="PredefineViewID">20 </span></td><td class="col1Width"><span id="PredefineViewsItemID">42 </span></td><td class="col1Width"><img class="sensor-delete-table click_images" alt="Delete" title="Delete" src="/Images/delete.png"></td><td class="col1Width"><span><label id="lblPredefineViewName">pokusaj3</label></span></td><td class="col3Width"><span><label id="lblSensorName">太阳辐射</label></span></td></tr><tr class="webgrid-alternating-row"><td class="col1Width"><span id="PredefineViewID">20 </span></td><td class="col1Width"><span id="PredefineViewsItemID">1123 </span></td><td class="col1Width"><img class="sensor-delete-table click_images" alt="Delete" title="Delete" src="/Images/delete.png"></td><td class="col1Width"><span><label id="lblPredefineViewName">pokusaj3</label></span></td><td class="col3Width"><span><label id="lblSensorName">土壤温度</label></span></td></tr><tr class="webgrid-row-style"><td class="col1Width"><span id="PredefineViewID">20 </span></td><td class="col1Width"><span id="PredefineViewsItemID">1124 </span></td><td class="col1Width"><img class="sensor-delete-table click_images" alt="Delete" title="Delete" src="/Images/delete.png"></td><td class="col1Width"><span><label id="lblPredefineViewName">pokusaj3</label></span></td><td class="col3Width"><span><label id="lblSensorName">土壤湿度 na 15cm</label></span></td></tr><tr class="webgrid-alternating-row"><td class="col1Width"><span id="PredefineViewID">20 </span></td><td class="col1Width"><span id="PredefineViewsItemID">1125 </span></td><td class="col1Width"><img class="sensor-delete-table click_images" alt="Delete" title="Delete" src="/Images/delete.png"></td><td class="col1Width"><span><label id="lblPredefineViewName">pokusaj3</label></span></td><td class="col3Width"><span><label id="lblSensorName">土壤湿度 na 30cm</label></span></td></tr><tr class="webgrid-row-style"><td class="col1Width"><span id="PredefineViewID">20 </span></td><td class="col1Width"><span id="PredefineViewsItemID">1126 </span></td><td class="col1Width"><img class="sensor-delete-table click_images" alt="Delete" title="Delete" src="/Images/delete.png"></td><td class="col1Width"><span><label id="lblPredefineViewName">pokusaj3</label></span></td><td class="col3Width"><span><label id="lblSensorName">叶子湿度参数</label></span></td></tr><tr class="webgrid-alternating-row"><td class="col1Width"><span id="PredefineViewID">20 </span></td><td class="col1Width"><span id="PredefineViewsItemID">1127 </span></td><td class="col1Width"><img class="sensor-delete-table click_images" alt="Delete" title="Delete" src="/Images/delete.png"></td><td class="col1Width"><span><label id="lblPredefineViewName">pokusaj3</label></span></td><td class="col3Width"><span><label id="lblSensorName">Ait 温度 </label></span></td></tr><tr class="webgrid-row-style"><td class="col1Width"><span id="PredefineViewID">20 </span></td><td class="col1Width"><span id="PredefineViewsItemID">1128 </span></td><td class="col1Width"><img class="sensor-delete-table click_images" alt="Delete" title="Delete" src="/Images/delete.png"></td><td class="col1Width"><span><label id="lblPredefineViewName">pokusaj3</label></span></td><td class="col3Width"><span><label id="lblSensorName">空气湿度</label></span></td></tr><tr class="webgrid-alternating-row"><td class="col1Width"><span id="PredefineViewID">20 </span></td><td class="col1Width"><span id="PredefineViewsItemID">1129 </span></td><td class="col1Width"><img class="sensor-delete-table click_images" alt="Delete" title="Delete" src="/Images/delete.png"></td><td class="col1Width"><span><label id="lblPredefineViewName">pokusaj3</label></span></td><td class="col3Width"><span><label id="lblSensorName">风速</label></span></td></tr><tr class="webgrid-row-style"><td class="col1Width"><span id="PredefineViewID">20 </span></td><td class="col1Width"><span id="PredefineViewsItemID">1130 </span></td><td class="col1Width"><img class="sensor-delete-table click_images" alt="Delete" title="Delete" src="/Images/delete.png"></td><td class="col1Width"><span><label id="lblPredefineViewName">pokusaj3</label></span></td><td class="col3Width"><span><label id="lblSensorName">风向</label></span></td></tr><tr class="webgrid-alternating-row"><td class="col1Width"><span id="PredefineViewID">20 </span></td><td class="col1Width"><span id="PredefineViewsItemID">1131 </span></td><td class="col1Width"><img class="sensor-delete-table click_images" alt="Delete" title="Delete" src="/Images/delete.png"></td><td class="col1Width"><span><label id="lblPredefineViewName">pokusaj3</label></span></td><td class="col3Width"><span><label id="lblSensorName">降水量</label></span></td></tr></tbody>
解决方案 为什么不在 jquery 中手动从 webgrid 中删除该行?您已经在 tr 变量中拥有该行.
var tr = $(this).parents('tr:first');完成:功能(结果){tr.remove();//这将从表中删除行.},
更新:
当您习惯使用 jquery 操作 DOM 时.您以进行返回 json 的 ajax 调用结束，并使用 json 返回动态更新 html.您可以使用很多 javascript 框架，但您可以使用 jquery 来实现所有功能.
也就是说，如果您不想学习如何操作 DOM 来处理您当前的情况，我会这样做.我希望您使用 ViewModel 来显示视图.因此，在您的主页模型中，让我们将其命名为 MainPageViewModel.添加属性调用 IDPartialViewDeleted.当您删除该行时.在 MainPageViewModel 中更新该属性.RedirectToAction 重新加载整个页面(可能是索引).检查 IDPartialViewDeleted 是否具有值，如果是，则调用显示具有特定 ID 的局部视图的函数.这样就可以了.
正如我所说，如果你想操作 DOM.你所要做的就是.从局部视图中删除该行.
tr.remove();
并在主网格中找到包含子项数量的控件并更新该值.像这样的东西.
var count = tr.closest("MainTableIdorClass").find("MyControlWithNumberOfChildren").val();数数 - ;tr.closest("MainTableIdorClass").find("MyControlWithNumberOfChildren").val(count);
这样你甚至不必从服务器返回任何东西，客户端上的一切都是新鲜的.我希望它很清楚.
更新另一个编辑.为了简单起见，让我们引入一个新的非常有用的概念:自定义属性.在表一的生成上执行此操作.
grid.Column("AmountOfSensors", @Html.Localize("amountOfSensors").ToString(), 格式:@<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)
将 id 添加到您的跨度.然后以这种方式在删除时更新它:
$("[data-id='" + PredefineViewID " +']").text(parseInt($("[data-id='" + PredefineViewID " +']").text()) - 1);
是不是很简单?
更新试试这个:
$(".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({类型:POST"，contentType: "application/json; charset=utf-8",url: '@Url.Action("DeleteSensor", "PredefinedViews")',数据:JSON.stringify({ pviID: PredefineViewsItemID, pID: PredefineViewID}),数据类型:json"，完成:功能(结果){$("#sensorNames").html(result.responseText);var amount = parseInt($("[data-id='" + PredefineViewID + "']").text());数量 - ;$("[data-id='" + PredefineViewID + "']").text(amount.toString());},});}});
1) Here is the controller method of my main view:
public ActionResult PredefPageLoad()
{
List<PredefineViewsView> 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);
}
<div id="gridContent">
<button type="button" id="createNewPredefinedView" style="margin-bottom: 20px;">@Html.Localize("createNew")</button>
@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: @<text> <span class="display-mode" id="PredefViewID">@item.PredefineViewID </span> <label id="PredefID" class="edit-mode">@item.PredefineViewID</label> </text>, style: "col1Width"),
grid.Column("", format: @<text>
<img class="edit-table display-mode click_images" src="~/Images/edit.png" />
<img class="delete-table display-mode click_images" src="~/Images/delete.png" />
<img class="open-sensors display-mode click_images" src="~/Images/Sensor.png" />
<img class="save-table edit-mode click_images" src="~/Images/save.png" />
<img class="cancel-table edit-mode click_images" src="~/Images/cancel.png" />
</text>, style: "col2Width", canSort: false),
grid.Column("PredefName", @Html.Localize("name").ToString(), format: @<text> <span class="display-mode"> <label id="lblPredefName">@item.Name</label> </span> <input type="text" id="PredefName" value="@item.Name" class="edit-mode" /> </text>, style: "col1Width", canSort: false),
grid.Column("AmountOfSensors", @Html.Localize("amountOfSensors").ToString(), format: @<text> <span class="display-mode" id="lblAmountOfSensors"> @item.SensorNo </span> <label id="AmountOfSensors" class="edit-mode"> @item.SensorNo </label> </text>, style: "col2Width", canSort: false)
))
</div>
<div id="sensorNames">
</div>
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<PredefineViewItemsView> 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: @<text> <span id="PredefineViewID">@item.PredefineViewID </span> </text>, style: "col1Width"),
gridSensors.Column("PredefineViewsItemID", format: @<text> <span id="PredefineViewsItemID">@item.PredefineViewsItemID </span> </text>, style: "col1Width"),
gridSensors.Column("", format: @<text><img class="sensor-delete-table click_images" alt="@Html.Localize("delete")" title="@Html.Localize("delete")" src="~/Images/delete.png" /></text>, style: "col1Width", canSort: false),
gridSensors.Column("PredefName", @Html.Localize("name").ToString(), format: @<text> <span><label id="lblPredefineViewName">@item.PredefineViewName</label> </span> </text>, style: "col1Width", canSort: false),
gridSensors.Column("PredefName", @Html.Localize("sensorName").ToString(), format: @<text> <span><label id="lblSensorName">@item.SensorName</label> </span> </text>, 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:
<div id="gridContent" class="table-responsive col-md-6" style="padding-top: 20px; ">
<button type="button" id="createNewPredefinedView" style="margin-bottom: 20px;">Create new</button>
<table class="webgrid-table">
<thead>
<tr class="webgrid-header">
<th scope="col" style="display: none;">
<a href="/PredefinedViews/PredefPageLoad?sort=PredefID&sortdir=ASC">PredefID</a>
</th>
<th scope="col">
</th>
<th scope="col">
Name
</th>
<th scope="col">
Amount of Sensors
</th>
</tr>
</thead>
<tbody>
<tr class="webgrid-row-style">
<td class="col1Width" style="display: none;"> <span class="display-mode" id="PredefViewID">18 </span> <label id="PredefID" class="edit-mode" style="display: none;">18</label> </td>
<td class="col2Width">
<img class="edit-table display-mode click_images" alt="Edit" title="Edit" src="/Images/edit.png">
<img class="delete-table display-mode click_images" alt="Delete" title="Delete" src="/Images/delete.png">
<img class="open-sensors display-mode click_images" alt="View of Existing Sensors" title="View of Existing Sensors" src="/Images/Sensor.png">
<img class="save-table edit-mode click_images" alt="Save" title="Save" src="/Images/save.png" style="display: none;">
<img class="cancel-table edit-mode click_images" alt="Cancel" title="Cancel" src="/Images/cancel.png" style="display: none;">
</td>
<td class="col1Width"> <span class="display-mode"> <label id="lblPredefName">pokusaj4555</label> </span> <input type="text" id="PredefName" value="pokusaj4555" class="edit-mode" style="display: none;"> </td>
<td class="col2Width"> <span class="display-mode" id="lblAmountOfSensors"> 10 </span> <label id="AmountOfSensors" class="edit-mode" style="display: none;"> 10 </label> </td>
</tr>
<tr class="webgrid-alternating-row">
<td class="col1Width" style="display: none;"> <span class="display-mode" id="PredefViewID">19 </span> <label id="PredefID" class="edit-mode" style="display: none;">19</label> </td>
<td class="col2Width">
<img class="edit-table display-mode click_images" alt="Edit" title="Edit" src="/Images/edit.png">
<img class="delete-table display-mode click_images" alt="Delete" title="Delete" src="/Images/delete.png">
<img class="open-sensors display-mode click_images" alt="View of Existing Sensors" title="View of Existing Sensors" src="/Images/Sensor.png">
<img class="save-table edit-mode click_images" alt="Save" title="Save" src="/Images/save.png" style="display: none;">
<img class="cancel-table edit-mode click_images" alt="Cancel" title="Cancel" src="/Images/cancel.png" style="display: none;">
</td>
<td class="col1Width"> <span class="display-mode"> <label id="lblPredefName">pokusaj1333</label> </span> <input type="text" id="PredefName" value="pokusaj1333" class="edit-mode" style="display: none;"> </td>
<td class="col2Width"> <span class="display-mode" id="lblAmountOfSensors"> 11 </span> <label id="AmountOfSensors" class="edit-mode" style="display: none;"> 11 </label> </td>
</tr>
<tr class="webgrid-row-style">
<td class="col1Width" style="display: none;"> <span class="display-mode" id="PredefViewID">20 </span> <label id="PredefID" class="edit-mode" style="display: none;">20</label> </td>
<td class="col2Width">
<img class="edit-table display-mode click_images" alt="Edit" title="Edit" src="/Images/edit.png">
<img class="delete-table display-mode click_images" alt="Delete" title="Delete" src="/Images/delete.png">
<img class="open-sensors display-mode click_images" alt="View of Existing Sensors" title="View of Existing Sensors" src="/Images/Sensor.png">
<img class="save-table edit-mode click_images" alt="Save" title="Save" src="/Images/save.png" style="display: none;">
<img class="cancel-table edit-mode click_images" alt="Cancel" title="Cancel" src="/Images/cancel.png" style="display: none;">
</td>
<td class="col1Width"> <span class="display-mode"> <label id="lblPredefName">pokusaj3</label> </span> <input type="text" id="PredefName" value="pokusaj3" class="edit-mode" style="display: none;"> </td>
<td class="col2Width"> <span class="display-mode" id="lblAmountOfSensors"> 10 </span> <label id="AmountOfSensors" class="edit-mode" style="display: none;"> 10 </label> </td>
</tr>
<tr class="webgrid-alternating-row">
<td class="col1Width" style="display: none;"> <span class="display-mode" id="PredefViewID">21 </span> <label id="PredefID" class="edit-mode" style="display: none;">21</label> </td>
<td class="col2Width">
<img class="edit-table display-mode click_images" alt="Edit" title="Edit" src="/Images/edit.png">
<img class="delete-table display-mode click_images" alt="Delete" title="Delete" src="/Images/delete.png">
<img class="open-sensors display-mode click_images" alt="View of Existing Sensors" title="View of Existing Sensors" src="/Images/Sensor.png">
<img class="save-table edit-mode click_images" alt="Save" title="Save" src="/Images/save.png" style="display: none;">
<img class="cancel-table edit-mode click_images" alt="Cancel" title="Cancel" src="/Images/cancel.png" style="display: none;">
</td>
<td class="col1Width"> <span class="display-mode"> <label id="lblPredefName">asdasd</label> </span> <input type="text" id="PredefName" value="asdasd" class="edit-mode" style="display: none;"> </td>
<td class="col2Width"> <span class="display-mode" id="lblAmountOfSensors"> 3 </span> <label id="AmountOfSensors" class="edit-mode" style="display: none;"> 3 </label> </td>
</tr>
<tr class="webgrid-row-style">
<td class="col1Width" style="display: none;"> <span class="display-mode" id="PredefViewID">22 </span> <label id="PredefID" class="edit-mode" style="display: none;">22</label> </td>
<td class="col2Width">
<img class="edit-table display-mode click_images" alt="Edit" title="Edit" src="/Images/edit.png">
<img class="delete-table display-mode click_images" alt="Delete" title="Delete" src="/Images/delete.png">
<img class="open-sensors display-mode click_images" alt="View of Existing Sensors" title="View of Existing Sensors" src="/Images/Sensor.png">
<img class="save-table edit-mode click_images" alt="Save" title="Save" src="/Images/save.png" style="display: none;">
<img class="cancel-table edit-mode click_images" alt="Cancel" title="Cancel" src="/Images/cancel.png" style="display: none;">
</td>
<td class="col1Width"> <span class="display-mode"> <label id="lblPredefName">qwer</label> </span> <input type="text" id="PredefName" value="qwer" class="edit-mode" style="display: none;"> </td>
<td class="col2Width"> <span class="display-mode" id="lblAmountOfSensors"> 3 </span> <label id="AmountOfSensors" class="edit-mode" style="display: none;"> 3 </label> </td>
</tr>
<tr class="webgrid-alternating-row">
<td class="col1Width" style="display: none;"> <span class="display-mode" id="PredefViewID">23 </span> <label id="PredefID" class="edit-mode" style="display: none;">23</label> </td>
<td class="col2Width">
<img class="edit-table display-mode click_images" alt="Edit" title="Edit" src="/Images/edit.png">
<img class="delete-table display-mode click_images" alt="Delete" title="Delete" src="/Images/delete.png">
<img class="open-sensors display-mode click_images" alt="View of Existing Sensors" title="View of Existing Sensors" src="/Images/Sensor.png">
<img class="save-table edit-mode click_images" alt="Save" title="Save" src="/Images/save.png" style="display: none;">
<img class="cancel-table edit-mode click_images" alt="Cancel" title="Cancel" src="/Images/cancel.png" style="display: none;">
</td>
<td class="col1Width"> <span class="display-mode"> <label id="lblPredefName">asd123</label> </span> <input type="text" id="PredefName" value="asd123" class="edit-mode" style="display: none;"> </td>
<td class="col2Width"> <span class="display-mode" id="lblAmountOfSensors"> 4 </span> <label id="AmountOfSensors" class="edit-mode" style="display: none;"> 4 </label> </td>
</tr>
<tr class="webgrid-row-style">
<td class="col1Width" style="display: none;"> <span class="display-mode" id="PredefViewID">1052 </span> <label id="PredefID" class="edit-mode" style="display: none;">1052</label> </td>
<td class="col2Width">
<img class="edit-table display-mode click_images" alt="Edit" title="Edit" src="/Images/edit.png">
<img class="delete-table display-mode click_images" alt="Delete" title="Delete" src="/Images/delete.png">
<img class="open-sensors display-mode click_images" alt="View of Existing Sensors" title="View of Existing Sensors" src="/Images/Sensor.png">
<img class="save-table edit-mode click_images" alt="Save" title="Save" src="/Images/save.png" style="display: none;">
<img class="cancel-table edit-mode click_images" alt="Cancel" title="Cancel" src="/Images/cancel.png" style="display: none;">
</td>
<td class="col1Width"> <span class="display-mode"> <label id="lblPredefName">qwerty</label> </span> <input type="text" id="PredefName" value="qwerty" class="edit-mode" style="display: none;"> </td>
<td class="col2Width"> <span class="display-mode" id="lblAmountOfSensors"> 0 </span> <label id="AmountOfSensors" class="edit-mode" style="display: none;"> 0 </label> </td>
</tr>
<tr class="webgrid-alternating-row">
<td class="col1Width" style="display: none;"> <span class="display-mode" id="PredefViewID">2052 </span> <label id="PredefID" class="edit-mode" style="display: none;">2052</label> </td>
<td class="col2Width">
<img class="edit-table display-mode click_images" alt="Edit" title="Edit" src="/Images/edit.png">
<img class="delete-table display-mode click_images" alt="Delete" title="Delete" src="/Images/delete.png">
<img class="open-sensors display-mode click_images" alt="View of Existing Sensors" title="View of Existing Sensors" src="/Images/Sensor.png">
<img class="save-table edit-mode click_images" alt="Save" title="Save" src="/Images/save.png" style="display: none;">
<img class="cancel-table edit-mode click_images" alt="Cancel" title="Cancel" src="/Images/cancel.png" style="display: none;">
</td>
<td class="col1Width"> <span class="display-mode"> <label id="lblPredefName">qwerty</label> </span> <input type="text" id="PredefName" value="qwerty" class="edit-mode" style="display: none;"> </td>
<td class="col2Width"> <span class="display-mode" id="lblAmountOfSensors"> 0 </span> <label id="AmountOfSensors" class="edit-mode" style="display: none;"> 0 </label> </td>
</tr>
</tbody>
</table>
Here is the second table:
<table class="webgrid-table">
<thead>
<tr class="webgrid-header">
<th scope="col">
<a href="/PredefinedViews/ShowSensorNames?predefinedViewID=20&sort=PredefineViewID&sortdir=ASC">PredefineViewID</a>
</th>
<th scope="col">
<a href="/PredefinedViews/ShowSensorNames?predefinedViewID=20&sort=PredefineViewsItemID&sortdir=ASC">PredefineViewsItemID</a>
</th>
<th scope="col">
</th>
<th scope="col">
Name
</th>
<th scope="col">
Sensor Name
</th>
</tr>
</thead>
<tbody>
<tr class="webgrid-row-style">
<td class="col1Width"> <span id="PredefineViewID">20 </span> </td>
<td class="col1Width"> <span id="PredefineViewsItemID">42 </span> </td>
<td class="col1Width"><img class="sensor-delete-table click_images" alt="Delete" title="Delete" src="/Images/delete.png"></td>
<td class="col1Width"> <span><label id="lblPredefineViewName">pokusaj3</label> </span> </td>
<td class="col3Width"> <span><label id="lblSensorName">Solar radiation </label> </span> </td>
</tr>
<tr class="webgrid-alternating-row">
<td class="col1Width"> <span id="PredefineViewID">20 </span> </td>
<td class="col1Width"> <span id="PredefineViewsItemID">1123 </span> </td>
<td class="col1Width"><img class="sensor-delete-table click_images" alt="Delete" title="Delete" src="/Images/delete.png"></td>
<td class="col1Width"> <span><label id="lblPredefineViewName">pokusaj3</label> </span> </td>
<td class="col3Width"> <span><label id="lblSensorName">Soil Temperature </label> </span> </td>
</tr>
<tr class="webgrid-row-style">
<td class="col1Width"> <span id="PredefineViewID">20 </span> </td>
<td class="col1Width"> <span id="PredefineViewsItemID">1124 </span> </td>
<td class="col1Width"><img class="sensor-delete-table click_images" alt="Delete" title="Delete" src="/Images/delete.png"></td>
<td class="col1Width"> <span><label id="lblPredefineViewName">pokusaj3</label> </span> </td>
<td class="col3Width"> <span><label id="lblSensorName">Soil Moisture na 15cm</label> </span> </td>
</tr>
<tr class="webgrid-alternating-row">
<td class="col1Width"> <span id="PredefineViewID">20 </span> </td>
<td class="col1Width"> <span id="PredefineViewsItemID">1125 </span> </td>
<td class="col1Width"><img class="sensor-delete-table click_images" alt="Delete" title="Delete" src="/Images/delete.png"></td>
<td class="col1Width"> <span><label id="lblPredefineViewName">pokusaj3</label> </span> </td>
<td class="col3Width"> <span><label id="lblSensorName">Soil Moisture na 30cm</label> </span> </td>
</tr>
<tr class="webgrid-row-style">
<td class="col1Width"> <span id="PredefineViewID">20 </span> </td>
<td class="col1Width"> <span id="PredefineViewsItemID">1126 </span> </td>
<td class="col1Width"><img class="sensor-delete-table click_images" alt="Delete" title="Delete" src="/Images/delete.png"></td>
<td class="col1Width"> <span><label id="lblPredefineViewName">pokusaj3</label> </span> </td>
<td class="col3Width"> <span><label id="lblSensorName">Leaf wetness prvi</label> </span> </td>
</tr>
<tr class="webgrid-alternating-row">
<td class="col1Width"> <span id="PredefineViewID">20 </span> </td>
<td class="col1Width"> <span id="PredefineViewsItemID">1127 </span> </td>
<td class="col1Width"><img class="sensor-delete-table click_images" alt="Delete" title="Delete" src="/Images/delete.png"></td>
<td class="col1Width"> <span><label id="lblPredefineViewName">pokusaj3</label> </span> </td>
<td class="col3Width"> <span><label id="lblSensorName">Ait temperature </label> </span> </td>
</tr>
<tr class="webgrid-row-style">
<td class="col1Width"> <span id="PredefineViewID">20 </span> </td>
<td class="col1Width"> <span id="PredefineViewsItemID">1128 </span> </td>
<td class="col1Width"><img class="sensor-delete-table click_images" alt="Delete" title="Delete" src="/Images/delete.png"></td>
<td class="col1Width"> <span><label id="lblPredefineViewName">pokusaj3</label> </span> </td>
<td class="col3Width"> <span><label id="lblSensorName">Air humidity </label> </span> </td>
</tr>
<tr class="webgrid-alternating-row">
<td class="col1Width"> <span id="PredefineViewID">20 </span> </td>
<td class="col1Width"> <span id="PredefineViewsItemID">1129 </span> </td>
<td class="col1Width"><img class="sensor-delete-table click_images" alt="Delete" title="Delete" src="/Images/delete.png"></td>
<td class="col1Width"> <span><label id="lblPredefineViewName">pokusaj3</label> </span> </td>
<td class="col3Width"> <span><label id="lblSensorName">Wind speed </label> </span> </td>
</tr>
<tr class="webgrid-row-style">
<td class="col1Width"> <span id="PredefineViewID">20 </span> </td>
<td class="col1Width"> <span id="PredefineViewsItemID">1130 </span> </td>
<td class="col1Width"><img class="sensor-delete-table click_images" alt="Delete" title="Delete" src="/Images/delete.png"></td>
<td class="col1Width"> <span><label id="lblPredefineViewName">pokusaj3</label> </span> </td>
<td class="col3Width"> <span><label id="lblSensorName">Wind direction </label> </span> </td>
</tr>
<tr class="webgrid-alternating-row">
<td class="col1Width"> <span id="PredefineViewID">20 </span> </td>
<td class="col1Width"> <span id="PredefineViewsItemID">1131 </span> </td>
<td class="col1Width"><img class="sensor-delete-table click_images" alt="Delete" title="Delete" src="/Images/delete.png"></td>
<td class="col1Width"> <span><label id="lblPredefineViewName">pokusaj3</label> </span> </td>
<td class="col3Width"> <span><label id="lblSensorName">Precipitation </label> </span> </td>
</tr>
</tbody>
</table>
解决方案 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());
},
});
}
});
这篇关于如何同时刷新局部视图和主视图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆