How to make a textbox that updates every time you change the content?

Asked

Viewed 6,049 times

2

How do you make a textBox that updates in the database the values that are placed in it?

That is, the textBox is filled in and the user decides to change what is there and wants it to trigger* immediately a method to update in the database the information that was placed in the textBox.

I’m working on HTML and C# on codebehind.

* In Brazil, "shoot"

c# html5 webforms textbox
  • 3

    It would be interesting more details like: what have you done? What haven’t you done? Do you have any idea how to do it? A little bit of your code would also help.

  • The ASP.NET application is Webforms or MVC ?

  • Forgive my ignorance, but what it means to "trigger"?

  • 3

    @ricidleiv It is "shoot" in Portuguese of Portugal (think of a fuse). I learned from Zuul in chat :)

6 answers

2

As I understand it, you work with Asp.Net Web Forms. The solution is simple: add the property AutoPostBack and listen to the event TextChanged.

ASPX:

<asp:TextBox runat="server" ID="MinhaTextBox" AutoPostBack="true" OnTextChanged="MinhaTextBox_TextChanged" />

Codebehind:

public void MinhaTextBox_TextChanged(object sender, EventArgs e)
{
    // Atualizar conforme MinhaTextBox.Text
}

0

Take a look at the Angularjs.

It is a Javascript framework that places execution states on the pages created by it.

This way you can create a template (in js), update this model information and the Gularjs itself propagates the updates to your components on the page.

0

Buddy, first you need to use the AngularJS. If you do not know this framework, I advise you to stop everything you are studying to take a look at it. It is extremely simple to understand and very powerful. It possesses the feature you are wanting, which is the binding automatic. If you take a look on this site here, you will find a very quick and simple tutorial, but it does what you need.

Another thing I can tell you is to use an action ajax to save what was written in the database, using any server-side technology to do so. The AngularJS has its simple and practical way of doing this :

$http.post('/someUrl', data).success(successCallback);)

Follow a clear example of what I’m talking about: JSFIDDLE

0

You can create a function javascript that triggers a servlet or webservice every time a key is pressed in your textbox (or input html). For example in jQuery:

$('#nome-elemento').keypress(function() {
    var texto = this.value;
    $.post("endereco/da/servlet-ou-webservice", {"texto": texto}, function(retorno){
      //callback
    });
});|

It would be interesting if you stipulated a minimum time between recordings or the Servlet/webservice will be called every character inserted in the textbox.

0

You want to use the database as you type into one textarea of html, right?

If yes, you will need to use the AJAX.

There are some methods to capture user typing in the DOM: onKeyUp and onKeyDown are examples.

Theoretically, at each keystroke you must send such information to the database - and here you must worry about performance - causing him to update something there.

Imagine this as an ordinary AJAX, only instead of you sending the information through a typical post, you would be doing it through another type of trigger.

I made an example for you:

$('form textarea').on('keyup', function () { // quando você pressionar uma tecla no textarea...
    var $data = $(this).serialize(); // serializa a informação digita em uma variável
    
    $('.report').html($data); // exibe a informação serializada/digitada na div .report
    
    /**
     * depois, envia através de uma requisição post
     * as informações para '/path/to/action',
     * sendo tal endereço uma action do seu backend
     * escrito em C#.
     *
     * Lembrando que este backend tem a responsabilidade
     * de fazer a operação de banco de dados
     * que você deseja.
     *
     * Caso consigamos acessar a action, você cairá na função
     * 'success', onde imprimiremos no console
     * a resposta enviada pelo servidor.
     */
    $.ajax({
        type: 'POST',
        url: '/path/to/action',
        data: $data,
        success: function (response) {
            console.log(response);
        }
    });
});

If you want to play, he’s available here, in jsFiddle.

You will need jQuery to run the example.

0

Browser other questions tagged c# html5 webforms textbox

You are not signed in. Login or sign up in order to post.