0

フォームを使用してモーダル ダイアログを作成する方法を探しています。私はすでにasp.net mvcにフォームを持っています。これはページです。そして、フォームがモーダルダイアログで課金されることを望みます。

誰かがそれを行う方法を知っていますか、またはどこで情報を見つけることができますか? 見つけたものはすべて新しいフォームを作成しているためですが、必要なことを行う方法がわかりません

  dialog.load(
  $("#dialog").dialog({
      close: function(event, ui) {
          dialog.remove();
      },
      resizable: false,
      height: 140,
      width: 460
      modal: true,
      buttons: {
          "Ok": function() {
              $(this).dialog("close");
              isConfirmed = true;
              $("form").submit();
           },
           Cancel: function() {
              $(this).dialog("close");
           }
       }

私はこのようなものを一度使用しますが、フォームでページをrecibeに変更する方法、またはその方法を知っています

4

1 に答える 1

1

最初のステップは、このフォームをパーシャル ビューに配置し、コントローラー アクションにこのパーシャルを提供させることです。それでは、サンプルコントローラーを見てみましょう:

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

    public ActionResult MyForm()
    {
        var model = new MyViewModel();
        return PartialView(model);
    }

    [HttpPost]
    public ActionResult MyForm(MyViewModel model)
    {
        if (!ModelState.IsValid)
        {
            // there were validation errors => redisplay
            // the form so that the user can fix them
            return PartialView(model);
        }

        // at this stage validation has passed => we could do
        // some processing and return a JSON object to the client
        // indicating the success of the operation
        return Json(new { success = true });
    }
}

MyForm アクションは、フォームの表示と送信時の処理にそれぞれ使用されます。Index アクションは、モーダルをポップアップできるリンクを含むビューを提供するだけです。

だからここにMyForm.cshtml部分的です：

@model MyViewModel

@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "dialog", OnSuccess = "submitSuccess" }))
{
    @Html.LabelFor(x => x.Foo)
    @Html.EditorFor(x => x.Foo)
    @Html.ValidationMessageFor(x => x.Foo)
    <button type="submit">OK</button>
}

そして最後にIndex.cshtmlビュー：

<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>
<script type="text/javascript">
    $(function () {
        // we subscribe to the click handler of the link
        $('#mylink').click(function () {
            // when the anchor is clicked we attach the dialog to the div
            var url = this.href;
            $('#dialog').dialog({
                open: function (event, ui) {
                    // when the dialog is shown we trigger an AJAX request
                    // to the MyForm action to retrieve the contents of the 
                    // form and show it
                    $(this).load(url);
                }
            });
            return false;
        });
    });

    // this function is used by the Ajax form. It is called
    // when the form is submitted.     
    var submitSuccess = function (result) {
        // we check to see if the controller action that was 
        // supposed to process the submission of the form
        // returned a JSON object indicating the success of the
        // operation
        if (result.success) {
            // if that is the case we thank the user and close the dialog
            alert('thanks for submitting');
            $('#dialog').dialog('close');
        }
    };
</script>

@Html.ActionLink("Show modal form", "myform", null, new { id = "mylink" })
<div id="dialog"></div>

明らかに、javascript は別のファイルに外部化する必要がありますが、このデモンストレーションの目的で、ビューに残しています。

于 2012-04-17T06:18:32.510 に答える