Data persistence for textboxes with Razor Pages

[Erik]

Hi,

I would like to enable data persistence for texboxes with razor pages.

Exemple :

cshtml :

<div>

Item from<input class="textBoxLine" size="30" asp-for="artStart" id="artStart" />

<br />

To <input class="textBoxLine" size="30" asp-for="artStart2" id="artStart2" />

</div>

cshtml.cs :

 public string artStart { get; set; } = "";
 public string artStart2 { get; set; }= "";

Thanks for you support.

[Prince Oliver]

Hi Erik, 

Thank you for contacting Syncfusion support. 

By using enablePersistence Boolean property in TextBox component, we can persist the textbox value. Kindly refer to the following code snippet. 

 

<div id="default"> 

    <ejs-textbox type="text" id="textbox" placeholder="Enter the name" enablePersistence="true" ></ejs-textbox> 

</div> 

 

From the release version 16.3.27, we can persist the data in textbox component by setting enablePersistence property to true. We have attached a sample for your reference, please find the sample at the following location: http://www.syncfusion.com/downloads/support/forum/140537/ze/EJ2-core2-textbox644851989 

 

Please let us know if you require any further assistance on this. 

 

Regards, 

Prince 

[Erik]

Hi Prince, thanks for the help.

The value of my textbox is still empty when i change the page and come back, using your code.

I am using razor pages so i navigate between pages with asp-page-handler with OnPost and OnGet methods.

[Prince Oliver]

Hi Erik, 

Thank you for your update. 

Based on your shared details, we have modified the sample and checked the reported issue when navigating between pages with asp-page-handler with OnPost and OnGet methods. We are unable to reproduce the reported issue in our end. We have attached the test sample for your reference, please find the modified sample in the below location, 

http://www.syncfusion.com/downloads/support/forum/140537/ze/asp-page-handle-core21806433185  

Kindly check the above sample. If the issue persists in you end, kindly modify the above sample to replicate the issue and send it to us. It will help us isolate the root cause and provide solution at the earliest. 

Regards, 

Prince 

[Erik]

Hello Prince,

I cannot launch your WebApplication2 project as the Syncfusion.EJ2.csproj is missing.

Looking into WebApplication2.csproj, i see you make reference to Core source\src\Syncfusion.EJ2.csproj :

 <ItemGroup>
    <ProjectReference Include="..\..\..\Core source\src\Syncfusion.EJ2.csproj" />
  </ItemGroup>

How can i solve this issue ?

Thanks for your support.

[Prince Oliver]

Hi Erik,  

Sorry for the inconvenience caused. We have reattached the sample with Nuget references. Please find the sample at the below location: http://www.syncfusion.com/downloads/support/forum/140537/ze/Asp-page-handler-Core2.0242118071 

Regards, 

Prince 

[Erik]

Hello Prince,

Your sample works fine, thanks.

I have another question related :

Would it be possible to save multiple data persistencies for each object and give them names, so that it would be possible to load them later ?

[Prince Oliver]

Hi Erik, 

 

Thank you for your update. 

 

Yes, we can save multiple data persistence for each object and give them custom names and load them later. We have achieved this scenario by using LocalStorage. By default, value property alone persist in the textbox, if you need more property to persist, we can achieve this by using 'LocalStorage'. Initially value is set as null, once you have updated the value in textbox, then click on the button to update those value in local storage to persist the value. Same can be applied for changing the placeholder and type property of textbox to persist them. In the below code snippet when the button is clicked, the textbox value, placeholder and the type are stored in localStorage. Once the page is refresh, those data will persist. 

 

function buttonClick() { 

    var textboxObj = document.getElementById('textbox').ej2_instances[0]; 

    localStorage.setItem('value', textboxObj.value); 

    localStorage.setItem('placeholder', textboxObj.placeholder); 

    localStorage.setItem('type', textboxObj.type); 

} 

 

We have attached the sample for your reference, please find the sample at the following location: http://www.syncfusion.com/downloads/support/directtrac/140537/ze/Multiple-data-persist1310417157  

 

Regards, 

Prince 

 

[Erik]

Hi Prince, thanks for the answer.

I have another issue :

If i change the value of the field bound to the textbox, it does not change the value of the textbox, the value remains the same as before because of the data persistence.

How could i solve this ? :

exemple :

HTML :

<ejs-textbox type="text" id="myField1" ejs-for="myField1" enablePersistence="true"></ejs-textbox>

Server side :

[BindProperty]

public string myField {get;set;}

I guess i could try to set enablePersistence to false before changing the value of myField, but that doesn't seem to be the right thing to do.

Regards

[Prince Oliver]

Hi Erik,  

  

Thank you for your update. 

In ej2 components, we have provided the highest precedence for persistence value, if it is available. So, we can’t override it with the model value. If you require to set the model value to value property, kindly set the enablePersistence property to false before changing the value in TextBox component, as per your shared suggestion. 

Please let us know if you require any further assistance on this. 

Regards, 

Prince 

[Erik]

Hello Prince,

That means i would have to disable the persistence on the client side.

I would like to do something like that :

document.getElementById("myEjTextboxID").setAttribute('enablePersistance', false).

I have tried :

$("#myEjTextboxID").ejTextbox( "option","enablePersistance", false); without success.

Regards

[Prince Oliver]

Hi Erik, 

Thank you for your update. 

You can disable the value persistence by setting the enablePersistence property to false in the Textbox ‘s instance. Kindly refer to the following code snippet. 

 

function disablePerisstence() { 

    var textBoxObj = document.getElementById('myField1').ej2_instances[0]; 

    textBoxObj.enablePersistence = false; 

} 

 

We have attached the sample for your reference, please find the sample at the following location: http://www.syncfusion.com/downloads/support/forum/140537/ze/EnablePersistence-1125153748.zip 

Regards, 

Prince 

[Erik]

Hi Prince, thanks.

Reading the doc for textboxes : https://ej2.syncfusion.com/aspnetcore/documentation/textbox/how-to

I  don't see the property to control the input, like setting a min/max length. Can you help me with that.

[Deepa Loganathan]

Hi Erik,  

 

 

You can restrict the length of input value by setting the minlength and maxlength attributes of input element as given in the below code, since there is no built-in support for setting min and max length for EJ Textbox.  

 

 

[script] 

    window.onload = function () { 

        var textboxObj = document.getElementById('textbox').ej2_instances[0]; 

        textboxObj.addAttributes({minlength: 10, maxlength: 150}) 

    }; 

 

 

Please check our below help page to explore more about the options available in Textbox component. 

 

API link: https://ej2.syncfusion.com/documentation/api/textbox#properties  

 

 

Kindly get back to us if you have any further queries.  

 

 

Regards,  

Deepa L.