2012-03-14 23 views
0

jQueryオーバーレイでAJAXフォームを作成することに興味があります。私はこれにアプローチする方法がわかりません。オーバーレイに部分的な見方をするだけですか?asp.net 4.0 MVC 3オーバーレイのajaxフォーム

モデルの形式でデータを渡したいので、データベースを保存することができます。要求が成功するかどうかの表示を作成する必要があります。誰もがこれで私を導くことができますか?

私はAJAXでちょっと新しくなりました。

答えて

4

jQuery UI Dialogを使用できます。

public class MyViewModel 
{ 
    public string Foo { get; set; } 

    [Required] 
    public string Bar { get; set; } 
} 

とコントローラ:

public class HomeController : Controller 
{ 
    public ActionResult Index() 
    { 
     return View(); 
    } 

    public ActionResult Modal() 
    { 
     return PartialView(new MyViewModel()); 
    } 

    [HttpPost] 
    public ActionResult Modal(MyViewModel model) 
    { 
     if (!ModelState.IsValid) 
     { 
      return PartialView(model); 
     } 

     return Json(new { success = true }); 
    } 
} 

この例では、indexアクションは、単に表示するようにできるようにリンクが含まれていますメインビューを提供しますたとえば、あなたがビューモデルを持っていると仮定してみましょうモーダルダイアログとしてのフォーム。

はここIndex.cshtmlビューです:

@model MyViewModel 

@using (Ajax.BeginForm(new AjaxOptions { OnSuccess = "onSubmitSuccess" })) 
{ 
    <div> 
     @Html.LabelFor(x => x.Foo) 
     @Html.EditorFor(x => x.Foo) 
     @Html.ValidationMessageFor(x => x.Foo) 
    </div> 
    <div> 
     @Html.LabelFor(x => x.Bar) 
     @Html.EditorFor(x => x.Bar) 
     @Html.ValidationMessageFor(x => x.Bar) 
    </div> 

    <button type="submit">OK</button> 
} 

最後のステップではJavaScriptを使用して、すべてを配線することです。フォームが含まれています

@Ajax.ActionLink(
    "show form in modal", 
    "modal", 
    new AjaxOptions { OnSuccess = "onModalLoad" } 
) 

<div id="modal"></div> 

Modal.cshtml部分。使用される2つのコールバックは次のとおりです。

それだけです。

は、あなたのページにjqueryの-UIとjquery.unobtrusive-AJAXスクリプトを参照することを忘れないでください:あなたは非常に多くの

<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script> 
+0

感謝を! – Aziz

+0

@ダーリン・ディミトロフ、あなたは本当のことです!しかし、なぜOnErrorコールバックを作成しないのですか? OnSuccessコールバックはエラーが発生したときに実行されますか?一見、それは直感的ではないようです。 –