链接到单选按钮的控制器中的 ASP.NET MVC 备用 @URIaction 方法答案

【问题标题】：ASP.NET MVC Alternate @URIaction methods in controller linked to radio button链接到单选按钮的控制器中的 ASP.NET MVC 备用 @URIaction 方法
【发布时间】：2015-08-24 08:17:06
【问题描述】：

我的 asp.net mvc 控制器中有两种方法，它们搜索 google maps Places API 以在用户输入文本时执行自动完成操作。

在后台我了解 data-otf-autocomplete 函数在后台使用 JQUERY UI 自动完成来调用表单上的这些方法。老实说，我承认我并不完全理解 JQUERY UI 部分，因为我已经从 Scott Allen 的优秀 Pluralsight 课程 Building Applications with ASP.NET MVC4 的 AJAX 课程中的另一个 OdetoCode 示例改编它（顺便说一句很棒的课程）。 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)

【问题讨论】：

不容易，每次单击单选按钮时，您都需要分离插件、更改 url 并重新附加插件。我建议一种更简单的方法可能是生成 2 个文本框（一个最初隐藏）并根据所选按钮切换文本框的可见性。如果它们都在同一个（比如说）div 元素中，你甚至不应该注意到 UI 的变化
谢谢斯蒂芬。这种方法非常有效。我将在下面发布更新的代码作为答案，以防对其他人有用

标签： c# jquery asp.net asp.net-mvc asp.net-mvc-4

【解决方案1】：

你不能只有搜索框和旁边的 2 个单选按钮，每个搜索选项一个。

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

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

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

更新

剃刀视图：

@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

}

控制器方法

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

           ........
    }

【讨论】：

感谢 Dez79。我对这种方法持开放态度，但我只是不确定如何将单选按钮的值传递给该方法。抱歉 - 我知道这是一个非常基本的问题。
查看更新的解决方案，您可能应该查看有关如何使用 razor 语法实现表单的教程
感谢 Dez79，因为 Stephen Muecke 暗示该方法有一些更复杂的问题，所以我采用了他的替代方法，我认为它更直接

【解决方案2】：

使用 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>
}

【讨论】：