Question

在视图中，我为搜索操作编写了以下代码。我想在视图页面第一次加载时自动运行一次搜索按钮。实际上，在没有用户点击的情况下在运行时运行此Button的解决方案是什么？

Using (Ajax.BeginForm("Index", "Brand", FormMethod.Post, New AjaxOptions With {
                                        .InsertionMode = InsertionMode.Replace,
                                        .UpdateTargetId = "GridList"}))
@Html.TextBox("strName", Nothing, New With {.class = "form-control", .PlaceHolder = "XXXXX"})
<button type="submit" style="display: none">Search</button>

最终使用

Answer 1

您可以使用JavaScript触发提交按钮的点击。

为按钮提供一个ID

<button type="submit" style="display: none" id="btn-search">Search</button>

现在在document.ready事件中，您可以触发点击事件

$(function () {

    $("#btn-search").trigger("click");

})

另一种选择是使用JavaScript触发表单submit事件。

这里我正在使用jQuery。但是您也可以使用原始JavaScript执行相同的操作。

编辑：根据评论中的问题

我应该如何将条件设置为只能运行一次。例如，如果用户单击搜索按钮，信息将被过滤并加载到视图中，是否不运行此触发器？

您可以在其中使用一个标志变量来控制它。将JavaScript方法指定为OnBegin的{{1}}属性值。在进行ajax调用之前，将调用此方法。根据您的标志变量值，您可以返回true或false。当此方法返回AjaxOptions时，将不会进行ajax调用。

这是一个简单的例子。

false

以及您的JavaScript

@using (Ajax.BeginForm("Index", "Brand",
                        new AjaxOptions
                        {
                            InsertionMode = InsertionMode.Replace,
                            OnBegin = "searchAjaxBegin",
                            UpdateTargetId = "GridList"
                        }))
{
    <input type="text" name="query" value="" />
    <button type="submit" id="btn-search">Search</button>
}

如果您想更好地控制如何进行Ajax调用，则还可以考虑放弃<script> var searchCallMade = false; function searchAjaxBegin() { if (searchCallMade) { console.log('Will not proceed with AJAX call'); return false; } } $(function () { $("#btn-search").trigger("click"); searchCallMade = true; }) </script>帮助器，并编写代码来处理表单提交事件并自行进行ajax调用。

Answer 2

我添加了代码，但是btn-search在第一次加载页面时未运行请查看我的视图内容：

<section class="panel">
    <header Class="panel-heading tab-bg-dark-navy-blue">
        <label class="bg-transparent wht-color">اطلاعات جامع ماشین آلات</label>
    </header>

    <div class="panel-body  pull-left">
        @Using (Ajax.BeginForm("Index", "MachinInfo", FormMethod.Post, New AjaxOptions With {
                                                                    .InsertionMode = InsertionMode.Replace,
                                                                    .OnBegin = "searchAjaxBegin",
                                                                    .UpdateTargetId = "GridList"}))

            @Html.DropDownList("DDSearchItems", New SelectListItem() {
                     New SelectListItem With {.Text = "نوع", .Value = "MachinName"},
                     New SelectListItem With {.Text = "برند", .Value = "BrandName"},
                         New SelectListItem With {.Text = "تیپ", .Value = "MachinTypeName"},
                         New SelectListItem With {.Text = "پلاک", .Value = "NPlate"},
                         New SelectListItem With {.Text = "کد سازمانی", .Value = "OrgCode"},
                         New SelectListItem With {.Text = "محل استقرار", .Value = "Mcamp"},
                         New SelectListItem With {.Text = "سریال کارت", .Value = "CardSerial"},
                         New SelectListItem With {.Text = "VIN", .Value = "VIN"}}, "جستجو در همه ستونها",
                 htmlAttributes:=New With {.class = "btn btn-white btn-sm"})

            @Html.TextBox("strName", Nothing, New With {.class = "btn btn-white btn-sm", .PlaceHolder = "متن جستجو"})
            @<button type="submit" id="btn-search" value="" Class="glyphicon glyphicon-search btn btn-default" />
        End Using
    </div>


    <div id="GridList">
        @Html.Partial("_PVMachinInfoGrid")
    </div>

</section>

<div Class="pull-left btn-toolbar">
    <div Class="btn btn-default">
        @Html.ActionLink(" ", "MachinInfoAdd", Nothing, htmlAttributes:=New With {.class = "glyphicon glyphicon-plus btn btn-small", .data_toggle = "tooltip", .data_placement = "top", .title = "اضافه کردن سطر جدید"})
    </div>
    @*<div Class="btn btn-default">
            @Html.ActionLink(" ", "Index", Nothing, htmlAttributes:=New With {.class = "glyphicon glyphicon-tasks btn btn-small", .data_toggle = "tooltip", .data_placement = "top", .title = "لیست برندها"})
        </div>*@
</div>


<script>

    var searchCallMade = false;

    function searchAjaxBegin() {
        if (searchCallMade) {
            console.log('Will not proceed with AJAX call');
            return false;
        }
    }

    $(function () {

        $("#btn-search").trigger("click");
        searchCallMade = true;

    })

</script>

如何以编程方式在MVC视图上运行按钮提交类型

2 个答案: