2

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

索引视图：

<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);
}
4

1 回答 1

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部分视图并将其插入到#popUpdiv 中。同样重要的是从表单提交处理程序返回 false 以取消默认设置，即使将浏览器重定向到当前页面。

于 2012-07-02T05:56:13.893 回答