2012-07-02 101 views
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); 
} 

回答

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> 

現在EHN表單提交,AJAX請求將被髮送到索引POST操作,自你內心的測試,如果該請求是一個AJAX請求,它將返回_CreateDialog.cshtml局部視圖並將其插入到#popUp div中。此外,爲了取消默認即使將瀏覽器從當前頁面重定向,也必須從表單提交處理程序返回false。

+0

謝謝你的答案,它的工作,現在我需要在ajax對話框中顯示對話框我該怎麼做? –

+0

您可以使用jQuery UI對話框控件。 –

+0

嗨,我已經創建了使用JQuery UI對話框控件的ajax對話框,現在我想爲它創建Html幫助器。我該怎麼做?你會給我一些想法嗎? –