C#MVC HTML.具有引导程序外观/操作的文本框

本文关键字:操作 文本 外观 HTML 引导程序 C#MVC | 更新日期: 2023-09-27 18:20:58

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

我遇到的问题是我只想要一个按钮,但当我试图将两者结合时,我得到了模态,字符串搜索从未发生过。

有人能告诉我如何把两者结合起来吗?

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

模态不变。

C#MVC HTML.具有引导程序外观/操作的文本框

您可以使用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/