Question

我正在创建一个表单，其中包含一个基于用户输入的搜索从sql查询中填充的选择（无线电，但打开下拉或其他）。

例如，如果我的选择是位置，我需要允许用户搜索“加利福尼亚”，然后查看加利福尼亚州的列表城市。选项列表超过20k，因此我不希望用户看到整个列表 - 他们需要能够搜索/过滤到合理数量的选项。（列表的过滤将在数据库端，存储过程正在处理逻辑。）

理想情况下，表单看起来像这样：

Field 1: [text]
---------------- (inserted partial)
Search: [text area] [submit button] --> sends of an sql query and reloads partial
Field 2: radio buttons --> these options loaded from sql query
---------------- (end partial)
Field 3: [text]
[submit button] --> submits all 3 field values to form handler

这是我的主要表格HTML：

@using (Html.BeginForm())
{
<div class="form-group">
  @Html.LabelFor(model => model.Field1, htmlAttributes: new { @class = "control-label col-md-2" })
  <div class="col-md-10">
    @Html.EditorFor(model => model.Field1, new { htmlAttributes = new { @class = "form-control" } })
    @Html.ValidationMessageFor(model => model.Field1, "", new { @class = "text-danger" })
  </div>
</div>
<div class="form-group">
  @Html.Action("Field2_Lookup", "Field2", new { });
</div>
<div class="form-group">
  @Html.LabelFor(model => model.Field3, htmlAttributes: new { @class = "control-label col-md-2" })
  <div class="col-md-10">
    @Html.EditorFor(model => model.Field3, new { htmlAttributes = new { @class = "form-control" } })
    @Html.ValidationMessageFor(model => model.Field3, "", new { @class = "text-danger" })
  </div>
</div>
<div class="form-group">
  <div class="col-md-offset-2 col-md-10">
    <input type="submit" value="Save" class="btn btn-default" />
  </div>
  </div>
</div>
}

这是Field2的部分HTML：

@using (Html.BeginForm())
{
    <div class="form-horizontal">
        <div class="form-group">
            @Html.LabelFor(model => model.Field2_Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="form-horizontal">
                <div class="col-md-10">
                    @Html.TextBox("SearchString")
                    <input type="submit" value="Search" class="btn btn-default" />
                </div>
            </div>

            <div class="col-md-10">
                @if (Model != null)
            {
                foreach (var item in Model.Field2)
                {
                        <input type="radio" name="@Model.Field2_Name" value="@item.Field2" id="item.Field2_ID">@item.Field2<br />
                        @Html.ValidationMessageFor(model => item.Field2, "", new { @class = "text-danger" })
                    }
                }
            </div>
        </div>
    </div>
}

Field2 Controller：

public ActionResult Field2_Lookup(string searchTerm)
    {
        if (!String.IsNullOrEmpty(searchTerm))
        {
            return View(DB.Field2_LookUp(searchTerm));
        }
        //Only return values if there is a searchTerm. If not, return an empty partial.
        return View();
    }

就用户流而言，当表单页面加载时，Field2 partial应为空，用户需要在搜索字段中输入文本，按“搜索”按钮，然后部分重新加载来自sql的选项查询。

所以我的问题是：

如何让Field2搜索按钮结束搜索？（目前此按钮结束整个页面的表单。）
如何重新加载部分，将控制器传递给searchTerm？
如何将Field2选择值传递给常规表单？

我知道我需要使用JavaScript，但我不确定实现（我是JavaScript的新手）。任何指向正确方向的人都非常感谢!!!

我正在使用MVC Entity Framework，Visual Studio 2015，C＃，JavaScript，bootstrap等。

Answer 1

我不确定你的意思，你能改一下这个问题吗？
您只需返回部分视图即可。应该看起来像这样：

return PartialView("PartialViewName", value(s) you want to pass back to view);
也很难理解这个问题。听起来我应该创建一个模型，然后使用它来传递数据。

提交第二份表格后重新加载部分表格 - c＃

1 个答案: