javascript - 如何在 NET MVC 3 Razor 中仅触发 JavaScript 函数而无需 Controller 处理请求

Question

我正在努力解决一些我什至不确定是否可能的事情。

我在 .NET MVC 3 Razor 项目中有一个典型的表单页面。该页面内有一个带有搜索机制的谷歌地图。搜索被封装在一个表单中，该表单调用 JavaScript 函数来在找到位置时更新 map 。

当我尝试使用它时， View 的 Controller 处理请求，并且 Controller 的模型状态无效(因为用户尚未完成表单的其余部分)。结果是重置 map 的页面表示(与我所追求的完全相反)。

这是该 View 的简化版本:

@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" })

    }

我意识到我在这里的表单中有一个表单，但我不知道如何才能实现此目的，因为我需要在主表单中间提供 map 和搜索功能。

任何帮助将不胜感激。

非常感谢，

克里斯。

Answer 1

您的代码将生成无效的 HTML - 嵌套表单不是有效的 HTML。

问题是 input type="submit" 可能会导致最上面的表单提交，而不是您期望的那样。

为什么没有一个普通的按钮并将函数附加到点击事件上？