Как вызвать только функцию JavaScript без контроллера, обрабатывающего запрос в NET MVC 3 Razor

Question

Я борюсь с чем-то, в чем я даже не уверен, если это возможно.

У меня есть типичная страница формы в проекте .NET MVC 3 Razor. На этой странице находится карта Google с механизмом поиска. Поиск обернут в форму, которая вызывает функцию JavaScript для обновления карты, если местоположение найдено.

Когда я пытаюсь использовать его, контроллер представления обрабатывает запрос, и состояние модели контроллера недопустимо (так как пользователь еще не закончил с остальной частью формы). Результатом является представление страницы, которая сбрасывает карту (полностью противоположно тому, что мне нужно).

Вот упрощенная версия представления:

@model OnlineEventReporting.ViewModels.ReportShortViewData
@{
    Layout = "~/Views/Shared/_LayoutGoogleMap_with_all_js_code.cshtml";
}    
<script type="text/javascript">
    function showAddress(address) { [processing code] }
</script>

 @using (Html.BeginForm("Index", "ShortReport", FormMethod.Post, new { name = "shortForm", id = "shortForm", data_ajax = "false" }))
    {
    @Html.ValidationSummary(true)

    Info for the controller to handle:
        @Html.TextBoxFor(model => model.AddressDetail.Street1, new { @maxlength = "50" })

    <!-- I want this to 'fire' the JavaScript 'showAddress' function and for the controller to ignore it -->

    <form style="text-align:center" action="#" onsubmit="showAddress(this.address.value); return false"> 
        <input type="text" size="20" id="address" name="address" value="North Street, Guildford"  /> 
        <input type="submit" value="Search!" /> 
    </form>

    <div id="map" style="width: 100%; height: 400px; margin-left:20px;"></div> 

    More info for the controller to handle:
        @Html.TextBoxFor(model => model.AddressDetail.Street2, new { @maxlength = "50" })

    }

Я понимаю, что у меня есть форма внутри формы, но я не так, как я мог бы подойти к этому, так как мне нужна карта и функция поиска прямо в середине моей основной формы.

Любая помощь будет принята с благодарностью.

Большое спасибо,

Крис.

Answer 1

То, что вы ищете, является запросом AJAX.Ваш контроллер по-прежнему будет обрабатывать запрос.Однако он будет делать это асинхронно, без полной обратной передачи.

Прежде всего, избавьтесь от вложенного тега формы, он вам не нужен.Вместо этого попробуйте это:

Info for the controller to handle:
        @Html.TextBoxFor(model => model.AddressDetail.Street1, new { @maxlength = "50" })

    <!-- I want this to 'fire' the JavaScript 'showAddress' function and for the controller to ignore it -->

        <input type="text" size="20" id="address" name="address" value="North Street, Guildford"  /> 
        <input type="submit" value="Search!" onclick="showAddress(this.address.value); return false;" /> 

    <div id="map" style="width: 100%; height: 400px; margin-left:20px;"></div>

Answer 2

Ваш код выдаст недопустимый HTML - вложенные формы не являются допустимым HTML.

Проблема в том, что input type="submit", вероятно, заставляет отправлять самую верхнюю форму вместо того, что вы ожидаете.

Почему бы не иметь обычную кнопку и не прикрепить функцию к событию нажатия?