ASP.控制器中可选的@URIaction方法链接到单选按钮

本文关键字：方法 链接 单选按钮 @URIaction 控制器 ASP | 更新日期: 2023-09-27 18:09:22

我有两个方法在我的asp.net mvc控制器中搜索google maps Places API来执行自动完成操作，因为用户在文本中键入。

在后台，我理解data-otf-autocomplete函数在后台使用JQUERY UI autocomplete来调用表单上的这些方法。我必须诚实地承认，我并不完全理解JQUERY UI部分，因为我是从Scott Allen的优秀Pluralsight课程中用ASP构建应用程序的AJAX课程中的另一个OdetoCode示例中改编的。NET MVC4(顺便说一句，很棒的课程)。Scott课程的原始代码链接到本地数据库以返回JSON来完成自动完成功能，我已经适应了连接到Google MAPS Places API。

现在我有两个搜索框，每个都链接到控制器上的不同方法。其中一个使用位置搜索(最适合于近似地址，爱尔兰的大多数农村地址都属于这一类)，而另一个适用于精确的街道地址。是否有可能将这两个连接到一个单选按钮控件在我看来，所以你有一个单一的搜索框并根据所选的单选按钮选项(例如位置/地址)它自动将请求路由到相关的方法控制器

@model IPagedList<RestaurantListViewModel>
@{
    ViewBag.Title = "Home Page";
}
    <form method="get" action="@Url.Action("Index")"
          data-otf-ajax="true" data-otf-target="#List">
        <input type="search" name="searchTerm" data-otf-autocomplete="@Url.Action("Autocomplete_Address")" />
    </form>
<form method="get" action="@Url.Action("Index")"
      data-otf-ajax="true" data-otf-target="#List">
    <input type="search" name="searchTerm" data-otf-autocomplete="@Url.Action("Autocomplete_Locality")" />
</form>

@Html.Partial("_Restaurants", Model)

ASP.控制器中可选的@URIaction方法链接到单选按钮

你就不能让搜索框旁边有两个单选按钮吗? 

<input type="radio" name="SearchType" value="local" checked>Locality
<input type="radio" name="SearchType" value="exact">Exact Address

你只需要一个表单，然后张贴到控制器中的方法，在方法中检查单选按钮的值，并基于此运行你的逻辑。

更新

Razor视图:

@using (Html.BeginForm("ControllerMethod", "YourController", null, FormMethod.Post))
{
<input type="radio" name="SearchType" value="local" checked>Locality
<input type="radio" name="SearchType" value="exact">Exact Address


}

ControllerMethod 

[HttpPost]
    public ActionResult ControllerMethod(FormCollection form)
    {
        var SearchType = form["SearchType"];
           ........
    }

使用Stephen Muecke建议的完整工作代码

@model IPagedList<RestaurantListViewModel>
@{
    ViewBag.Title = "Home Page";
}
<script type = "text/javascript" >
        function ShowHideDiv() {
            var chkAddress = document.getElementById("chkAddress");
            var inputAddbox = document.getElementById("inputAddress");
            inputAddbox.style.display = chkAddress.checked ? "block" : "none";
            var chkLocality = document.getElementById("chkLocality");
            var inputLocality = document.getElementById("inputLocality");
            inputLocality.style.display = chkLocality.checked ? "block" : "none";
        }

</script>
    <form method="get" action="@Url.Action("Index")"
          data-otf-ajax="true" data-otf-target="#restaurantList">
        <div>
            <input type="search" id="inputAddress" name="searchTerm" data-otf-autocomplete="@Url.Action("Autocomplete_Address")" checked/>
            <input type="search" id="inputLocality" name="searchTerm" data-otf-autocomplete="@Url.Action("Autocomplete_Locality")" />
        </div>
        <label for="chkAddress">
                <input type="radio" id="chkAddress" name="chkType" onclick="ShowHideDiv()" />
                Search by Address
            </label>
        <label for="chkLocality">
            <input type="radio" id="chkLocality" name="chkType" onclick="ShowHideDiv()" />
            Search by Location
        </label>
    </form>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script language="javascript">
        $(document).ready(function () {
            $("#inputLocality").hide();
            $("#chkAddress").prop('checked', true);
                 });
    </script>
}
相关文章：