Gett values of Html. controls in ASP.NET MVC with AJAX as user interact

Question

Hey guys, I'm doing an ASP.NET MVC project just for learning...and stuck in this...

I'm trying the get the value from the Html.TextBoxFor(model => model.ShortName) and show in the side www.blablabla.com/Value, it in the time of the user is typing.

I tried to add the AJAX library reference on the top:

<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>
<% Html.EnableClientValidation(); %>

Here goes the unsucceed code so far:

        <div class="editor-label">
            <%: Html.LabelFor(model => model.ShortName) %>
        </div>
        <div class="editor-field">
            <%: Html.TextBoxFor(model => model.ShortName) %>
            <%: Html.ValidationMessageFor(model => model.ShortName) %>
            This will be the name used for your short address 
            www.blablabla.com/<%: Model == null || string.IsNullOrEmpty(Model.ShortName) ? "shortName" :  Model.ShortName %>
        </div>

Thanks in advance

D.J · Accepted Answer · 2010-10-22 03:42:04Z

1

i think you should do this by using javascript instead of using MVC markup Code.

Since the interaction happens in client-end with out any post back, the code you are using will not help you achieving your goal.

answered Oct 22, 2010 at 3:42

D.J

2,5344 gold badges29 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Michael · Accepted Answer · 2010-10-22 03:49:25Z

0

D.J is correct - you want to use Javascript for this. The Model object is passed to the view from the server. Once the page is rendered, any interaction the user has with the page on the client has nothing to do with the Model (or the server). Only when the user sends a subsequent HTTP request (such as a POST by submitting a form) will a controller action be involved again.

The model is used in your code example above to set the initial values of elements.

To do this you're going to want to use javascript, and probably a library such as jQuery.

You can bind the keypress event of the textfield, and append its value to the div:

<div class="editor-field">
    <%: Html.TextBoxFor(model => model.ShortName) %>
    <%: Html.ValidationMessageFor(model => model.ShortName) %>
    This will be the name used for your short address: www.blablabla.com/<span id="shortnameLabel"></span>
</div>

And then this to actually do the work:

$('#ShortName').keypress(function(event) {
    $('#shortnameLabel').text($(this).value();
});

answered Oct 22, 2010 at 3:49

Michael

20.1k7 gold badges59 silver badges90 bronze badges

1 Comment

Leo Over a year ago

got it... but edit this part to: $('#ShortName').keyup(function(event) { $('#shortnameLabel').text($(this).val()); }); thanks!

Collectives™ on Stack Overflow

Gett values of Html. controls in ASP.NET MVC with AJAX as user interact

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related