Получите значения Html. элементы управления в ASP.NET MVC с AJAX при взаимодействии пользователя

Question

Эй, ребята, я делаю проект ASP.NET MVC только для обучения ... и застрял в этом ...

Я пытаюсь получить значение из Html.TextBoxFor(model => model.ShortName) и показать в сторону www.blablabla.com/Value, оно во время ввода текста пользователем.

Я попытался добавить ссылку на библиотеку AJAX вверху:

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

А вот и безуспешный код:

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

Заранее спасибо

Answer 1

я думаю, что вы должны сделать это, используя javascript вместо кода разметки MVC.

Поскольку взаимодействие происходит на стороне клиента без каких-либо сообщений назад, код, который вы используете, не поможет вам в достижении ваших целей.цель.

Answer 2

DJ правильно - вы хотите использовать для этого Javascript.Объект Model передается в представление с сервера.После визуализации страницы любое взаимодействие пользователя со страницей на клиенте не имеет ничего общего с моделью (или сервером).Только когда пользователь отправит последующий HTTP-запрос (например, POST, отправив форму), действие контроллера снова будет задействовано.

Модель используется в приведенном выше примере кода для установки начальных значений элементов.

Для этого вам понадобится javascript и, возможно, библиотека, такая как jQuery.

Вы можете связать событие нажатия клавиши текстового поля и добавить его значение в 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>

И тогда это действительно делает работу:

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