提交第二个表单后重新加载表单中的部分内容 - c#

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 控制器：

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部分应为空，用户需要在搜索字段中输入文本，按“搜索”按钮，然后部分重新加载与sql中的选项查询。

所以我的问题是：

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

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

我正在使用 MVC 实体框架、Visual Studio 2015、C#、JavaScript、引导程序等。

Answer 1

1. 我不确定你的意思，你能改一下这个问题吗？

2. 您需要做的就是返回一个局部视图。它应该看起来像这样：

   return PartialView("PartialViewName", value(s) you want to pass back to view);

3. 在理解这个问题时也有些困难。在我看来，您应该创建一个模型，并使用它来传递您的数据。