Question

我有一个asp.net mvc项目，它具有典型的搜索功能。我有我的主视图，然后当用户单击一个选项时，它会在同一视图上加载局部视图，但是当我在局部视图中搜索时，它会将结果加载到另一个页面。

这是我主要观点的代码：

<section class="content" id="partialview">
            <!-- Main row -->
            <div class="row">
                <a href="#" id="option1">
                    <div class="col-lg-12 col-md-12 col-xs-12 wrapper">
                        <center><div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"><img src="~/Images/icon.png" class="icons" /></div></center>
                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"><div class="text">Option1</div></div>
                    </div>
                </a>
            </div>
        </section>

的javascript：

<script>
document.getElementById("option1").onclick = function () { ViewResults() };
function ViewResults() {
    $("#partialview").load("@Url.Action("ActionName", "Controller")");
}
</script>

这里是加载局部视图的控制器：

public ActionResult ActionName(DateTime? datefrom, DateTime? dateto)
    {
        Model rmodel = new Model();
        string path = Server.MapPath("~/Files/");
        DirectoryInfo dir = new DirectoryInfo(path);


        if (datefrom != null && dateto != null)
        {
            rmodel = dir.GetFiles("*.pdf*").Where(a => a.CreationTime >= datefrom && a.CreationTime <= dateto);
        }
        else
        { 
            rmodel.PDFFile = dir.GetFiles("*.pdf*")
        }

        return View(rmodel);
    }

有什么想法吗？感谢。

修改

这是部分视图：

     @using (Html.BeginForm("ActionName", "Controller", FormMethod.Get))
        {
          <div class="form-inline">
          <div class="form-group">
              @Html.TextBox("datefrom", null, new { @placeholder = "Date         
                         From", @class = "form-control", @id = "DateFrom" })
          </div>
          <div class="form-group">
             @Html.TextBox("dateto", null, new { @placeholder = "Date To",   
                         @class = "form-control", @id = "DateTo" })
          </div>
       <input type="submit" class="btn btn-sm btn-primary" value="Filter" />
          </div>
       }

搜索/过滤器的代码已经在控制器中。

Answer 1

您可以使用@using (Ajax.BeginForm("ActionName", "ActionName", new AjaxOptions() { UpdateTargetId = "tagId"})) 这将转储tagId中服务器返回的html（这是rendred html的容器的id）。您不需要使用任何额外的脚本。
或者你也可以使用jquery函数，在这种情况下你不需要html帮助器，你将在脚本中使用这样的东西

 var values = {
                    datefrom: $('#DateFrom').val(),
                    dateto: $('#DateTo').val(),
                };

                $.ajax({
                    url: "Controller/Action",
                    type: "get",
                    data: values,
                    success: function (html) {
                        $("#tagId").html(html); 
                    }
                });

部分视图搜索结果加载到另一个页面

1 个答案: