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 リクエストであるかどうかをテストすると、部分ビューが返され、それがdiv_CreateDialog.cshtmlに挿入されます。#popUpまた、現在のページからブラウザーをリダイレクトするデフォルトをキャンセルするために、フォーム送信ハンドラーから false を返すことも重要です。

于 2012-07-02T05:56:13.893 に答える