C# MVC HTML.Textbox 与 Bootstrap 外观/动作

Question

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

我遇到的问题是我只想要一个按钮，但是当我尝试将这两个按钮结合起来时，我得到了模态并且字符串搜索从未发生过。

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

按钮 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>
            }

按钮 2（激活模态但没有数据比较）

 <div class="form-group">
                <div class="col-xs-offset-2 col-xs-10">
                    <div class="span7 text-center">                           
                            <input type="text" class="form-control" id="theCode" placeholder="Please Enter Code">                                
                        <input type="submit" value="Go!" class="btn btn-success" id="sendcoderequest" data-toggle="modal"
                               data-target="#basicModal2" />                           
                    </div>
                </div>
            </div>

首页/索引方法：

    public ActionResult Index(string filtername)        
    {

        var filterresults = from m in db.UserInfoes
                            select m;            

        filterresults = filterresults.Where(x => x.UserCode.ToString().Contains(filtername)).OrderBy(x => x.UserCode);

        return View(filterresults);
    }

模态：

<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>

JQuery:

 $("#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
    });

模态不变。

Answer 1

您可以使用 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 将过滤器名称发送到服务器的示例，用服务器响应填充模态，最后显示模态： http://jsfiddle.net/yohanrobert/e3p4yv55/