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

Answer 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.

Answer 2

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();
});