Question

单击提交按钮时，我想生成一个弹出窗口，显示项目列表。我试图创建弹出的代码如下：`

索引视图：

<script type="text/javascript">
$('#popUp').Hide();
$('#button').click(function () {
    $('#popUp').click();
});
</script>

<div class="left-panel-bar">
@using (Html.BeginForm(FormMethod.Post))
{
        <p>Search For: &nbsp;</p>
        @Html.TextBox("companyName",Model);
        <input id="button" type="submit" value="Submit" />
}
</div>

<div id="popUp">
    @Html.ActionLink("Get Company List", "CreateDialog", "Company", null, new 
    { 
        @class = "openDialog", 
        data_dialog_id = "emailDialog", 
        data_dialog_title = "Get Company List" 
    });
</div>

但我在使用此代码时遇到了麻烦..当我点击提交按钮时，它会打开另一个页面而不是弹出窗口。控制器代码如下：

[HttpPost]
public ActionResult Index(Companies c)
{
    Queries q1 = new Queries(c.companyName); 
    if (Request.IsAjaxRequest())
        return PartialView("_CreateDialog", q1);
    else
        return View("CreateDialog", q1);
}

Answer 1

您可以使用AJAX：

<script type="text/javascript">
    $(function() {
        $('form').submit(function() {
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function(result) {
                    $('#popUp').html(result);
                }
            });
            return false;
        });
    });
</script>

<div class="left-panel-bar">
    @using (Html.BeginForm())
    {
        <p>Search For: &nbsp;</p>
        @Html.TextBox("companyName", Model);
        <input id="button" type="submit" value="Submit" />
    }
</div>

<div id="popUp">
</div>

现在提交表单，一个AJAX请求将被发送到Index POST操作，因为在你内部测试请求是否是一个AJAX请求，它将返回_CreateDialog.cshtml部分视图并将其插入{ {1}} div。同样重要的是从表单提交处理程序返回false以取消默认，即使是将浏览器重定向到当前页面也是如此。

单击按钮时生成弹出窗口

1 个答案: