c# - How can I refresh partial view and the main view at the same time? -
1) here controller method of 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 x.userid == userid select x).tolist(); } } catch (exception e) { console.writeline(e); } return view(predefviewsviews); } 2) main view displays web grid contains in each row id, name , amount of it's sub names, image icons add, edit and icon opens partial view displays name , of 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) gave image icon "class:open-sensors" when click opens mentioned partial view nested inside div "sensornames", , here java script 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) controller method filters 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 x.predefineviewid == predefviewid select x).tolist(); } } return partialview("displaysensors", predefviewitemsviews); } 5) , opens partial view inside "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 question part- how delete sub name (inside partial view of course) using image icon in third column "class=sensor-delete-table" , refresh web-grid (take out deleted row) main view web-grid (decrement number of amount of sub names 1)?
6) what managed do was delete record in database , refresh partial view, not 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) 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 deletes sub name , takes method mentioned in step 4) goes "complete:" step 6). may ask why didnt use "success:" instead of complete? beacause doens't register did anything, , neither "finish:" or "done:". attempted "window.location.reload()" , tried putting before "$("#sensornames").html(result.responsetext);" line , every other place think of, ends in wrong order want to. first want refresh page , open new webgrid 1 less sub name, opposite- removes deleted 1 , refreshes page, left refreshed main view without open partial view- unless open manually thats not want.
sorry long post, first time asking question here.
8)edit show resulting html, 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 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 remove row webgrid manually in jquery ? have row in tr var.
var tr = $(this).parents('tr:first'); complete: function (result) { tr.remove(); //this remove row table. }, update :
when use manipulating dom jquery. ended making ajax call return json , update html dynamically json return. there lot of javascript framework can use can achieve jquery to.
that said, if don't want learn how manipulate dom deal current situation, this. hope using viewmodel display view. in main page model let's name mainpageviewmodel. add property call idpartialviewdeleted. when delete row. update property in mainpageviewmodel. redirecttoaction reload entire page (probably index). check if idpartialviewdeleted has value, if call function display partial view specific id. trick.
as said, if want manipulate dom. have is. remove row partialview.
tr.remove(); and find control in main grid contain number of children , update value. this.
var count = tr.closest("maintableidorclass").find("mycontrolwithnumberofchildren").val(); count--; tr.closest("maintableidorclass").find("mycontrolwithnumberofchildren").val(count); this way don't have return server , fresh on client. hope it's clear.
update other edit. make simple let's introduce new , usefull concept : custom attribute. on generation of 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 id span. update on delete way :
$("[data-id='" + predefineviewid " +']").text(parseint($("[data-id='" + predefineviewid " +']").text()) - 1); easy isn't ?
update try :
$(".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()); }, }); } });
Comments
Post a Comment