All geek questions in one place

Saving state on page after refresh

I have a dilemma. I get 2 objects from the controller: id and long array. When the page loads, checkboxes in the indices indicated by "tlocations" . Then the user extinguishes / cancels the checkboxes and clicks the "submit-btn" button. The button makes an AJAX call and saves the changes to the database. However, after calling AJAX, the flags are disabled!

How can I approach this problem if I want the checkboxes to remain disabled after the update? Should I create an internal variable that changes state before updating, and then is sent to ViewData when the view is displayed a second time? Or are there other ways like cookies? enter image description here

For more information, I added a schema. Hope this helps.

Controller

  public IActionResult Index() { ViewData["tstory"]=JsonConvert.SerializeObject(TempData.Get<Story("tstory")); if(ViewData["tstory"]!=null) { ViewData["tlocations"]=JsonConvert.SerializeObject(TempData.Get<IEnumerable<long>>("tlocations")); TempData.Keep(); return View(context.Locations); } return RedirectToAction("Index","Story"); }

View:

 <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript" src="~/js/TableOps.js"></script> <script type="text/javascript" src="~/js/BtnHandlers.js"></script> <script> $(document).ready(function(){ var _story=@Html.Raw (ViewData["tstory"]); var indexes=@Html.Raw (ViewData["tlocations"]); var tableName=$("#table1").attr("id"); Initialize(tableName,indexes,_story); $("#submit-btn").bind( "click", function(elem) { var locations=getLocations(tableName); AttachBtnHandler(locations,function(){checkLocationTable (indexes,tableName);}); }); }); </script> </head>

Ajax call

 function AttachBtnHandler(locations,disableCheckboxes) { var result=ajaxCall('post','/Location/Attach',locations); $("input[type='checkbox']") .each(function(index,elem){ $(elem).prop("checked",false); $(elem).prop("disabled",true); }); } function ajaxCall(methodType,desturl,payload=null,dataType='json') { if(payload==null) { return; } var response=null; $.ajax({ type:methodType, url:desturl, data:JSON.stringify(payload), contentType:"application/json;charset=utf-8", dataType:dataType, success:function(resp) { alert("Values sent successfully!"); response=resp; }, failure:function(resp) { alert("Failure to send data"); response=resp; }, error:function(xhr, status, error) { alert("Error:"+error); } }); return response; }
+5
source share
1 answer

I haven't even seen your HTML code, but take a look at this:

Code for

 string getStatus = "checked"; bool s = false; protected void Page_Load(object sender, EventArgs e) { } protected void OnChangeEvent(object sender, EventArgs e) { getStatus = CheckBox1.Checked == true ? "checked" : "unchecked"; checkbool(); } protected bool checkbool() { return s = getStatus == "checked" ? true : false; }

Script:

 <script src="Scripts/jquery-1.10.2.js"></script> <script> $(document).ready(function () { $("#CheckBox1").prop("checked", <%=checkbool()%>); $("#CheckBox1").prop("disabled", true); }); </script>

HTML

 <div> <asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="true" OnCheckedChanged="OnChangeEvent"/> </div>

It will restore the state of your flag, either it will be checked or not checked even when the page is refreshed.

+1
source

Source: https://habr.com/ru/post/1275120/

More articles:


All Articles