C# 具有引导外观/操作的C MVC HTML.Textbox

我有一个文本框，当用户输入一个字符串并按下一个按钮时，将对其进行比较，以找到数据库中的匹配字段。我还有另一个按钮，启动引导模式的显示，然后查看结果

我遇到的问题是我只需要一个按钮，但是当我尝试组合这两个按钮时，我得到的是模态和字符串搜索从未发生过

谁能告诉我如何将两者结合起来

按钮1搜索字符串按钮

@using (Html.BeginForm("Index", "Home", FormMethod.Get))
            {
                <p>
                    <label for="platform" class="control-label">Enter Code:</label><br />
                   @Html.TextBox("filtername")
                    <input type="submit" value="Filter" "/>
                </p>
            }

模态：

<div class="modal fade" id="basicModal2" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&amp;times;</button>
                                <h4 class="modal-title" id="myModalLabel">Summary</h4>
                            </div>
                            <div class="modal-body">
                                <h2>Results</h2>
                                <span id="printCode"></span><br />

                                <div class="pull-right"><button type="submit" class="btn btn-success" id="toggle">Toggle</button> </div>

                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th></th>
                                            <th>Date</th>
                                            <th>Test Type</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach (var item in Model)
                                        {
                                            <tr>
                                                <td>
                                                    <input type="checkbox" class="checks">
                                                </td>
                                                <td>
                                                    @Html.DisplayFor(modelItem => item.CreationDateTime)
                                                </td>
                                                <td>
                                                    @Html.DisplayFor(modelItem => item.AppModeId)
                                                </td>
                                            </tr>
                                        }
                                    </tbody>
                                </table>

---

模式不变。

您可以使用AJAX调用而不是表单提交。然后，您可以在收到AJAX响应后通过Javascript打开模式。根据标记，您可能正在使用JQuery，因此它看起来如下所示：

$("form").submit(function(){
  $.ajax({
    url: "Home",
    data: $(this).serialize()
  }).done(function(response){
      // Fill your modal window with the response here
      $('#basicModal2').modal('show');
  });
  return false; // prevent the form submission
});

编辑

您可以在这里找到一个示例，该示例使用AJAX将过滤器名称发送到服务器，用服务器响应填充模式，最后显示模式：

---

Hi Groyoh我尝试在标签中使用上述代码，比如普通jquery，但没有效果。我对jquery非常陌生，但据我所知，这将影响此页面上的所有表单？是的，这将影响所有表单，但您只需在表单标记中添加一个ID，并在该表单上使用jquery选择器即可。您是否确保将脚本标记放在JQuery标记之后？我无法使上述解决方案正常工作抱歉，我已将已更改的$form.submit添加到$formid.submit和to，但单击submit按钮后，不会启动模式。我在上面添加了我的模式，如果这有帮助的话？那么，AJAX调用可能不会成功。你检查过了吗？你使用了上面的代码还是添加了什么？嗨，Groyoh，我添加了上面的代码，这样你就可以看到我的更改了。我不确定你在哪一行//在你的模态窗口中填入了这里的响应我刚刚用了小提琴上的代码，但我猜这是错的？我是一个AJAX noob：

<div class="modal fade" id="basicModal2" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&amp;times;</button>
                                <h4 class="modal-title" id="myModalLabel">Summary</h4>
                            </div>
                            <div class="modal-body">
                                <h2>Results</h2>
                                <span id="printCode"></span><br />

                                <div class="pull-right"><button type="submit" class="btn btn-success" id="toggle">Toggle</button> </div>

                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th></th>
                                            <th>Date</th>
                                            <th>Test Type</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach (var item in Model)
                                        {
                                            <tr>
                                                <td>
                                                    <input type="checkbox" class="checks">
                                                </td>
                                                <td>
                                                    @Html.DisplayFor(modelItem => item.CreationDateTime)
                                                </td>
                                                <td>
                                                    @Html.DisplayFor(modelItem => item.AppModeId)
                                                </td>
                                            </tr>
                                        }
                                    </tbody>
                                </table>

<form id="formid">
  <label for="platform" class="control-label">Enter Code:</label>
  <input type="text" name="filtername" />
  <input type="submit" class="btn btn-success" value="Filter" />
</form>

 $("#formid").submit(function () {
        $.ajax({
            url: "Home",
            data: $(this).serialize()
        }).done(function (response) {
            $('#modal_content').html(response);
            $('#basicModal2').modal('show');
        });
        return false; // prevent the form submission
    });

$("form").submit(function(){
  $.ajax({
    url: "Home",
    data: $(this).serialize()
  }).done(function(response){
      // Fill your modal window with the response here
      $('#basicModal2').modal('show');
  });
  return false; // prevent the form submission
});