7

強く型付けされたビューからコントローラーにモデルデータを取得しようとしています。送信ボタンを使用しても問題ありません。データを取得できます。今、私はhtml.actionlinkで同じことを達成したいと思います。これは私が持っているものです： 表示：

@model WordAutomation.Models.Document    
    @{
        ViewBag.Title = "Document";
    }
      <script type="text/javascript">
          $(function () {
              $("#dialog").dialog();
          });
        </script>

    <h2>Document</h2>

    @using (Html.BeginForm()) {
        @Html.ValidationSummary(true)

        <fieldset>
            <legend>Document</legend>

            <div class="editor-label">
                @Html.LabelFor(model => model.ClientTitle)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.ClientTitle)
                @Html.ValidationMessageFor(model => model.ClientTitle)
            </div>

            <div class="editor-label">
                @Html.LabelFor(model => model.ClientFullName)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.ClientFullName)
                @Html.ValidationMessageFor(model => model.ClientFullName)
            </div>

            <div class="editor-label">
                @Html.LabelFor(model => model.ClientCustomSSN)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.ClientCustomSSN)
                @Html.ValidationMessageFor(model => model.ClientCustomSSN)
            </div>

            <p>
                <input type="submit" value="Create" />            
            </p>
        </fieldset>
    }

    <div>
        @Html.ActionLink("Preview", "PreviewWordDocument", "Home", null, new { id = "previewLink" })    

    </div>

    <div id="dialogcontainer">
        <div id="dialogcontent"><input type="submit" value="Create" />        </div>
    </div>

    @section Scripts {

        <script type="text/javascript">

                $(document).ready(function() {

                    $("#dialogcontainer").dialog({
                        width: 400,
                        autoOpen:false,
                        resizable: false,
                        title: 'Test dialog',
                        open: function (event, ui) {
                            $("#dialogcontent").load("@Url.Action("PreviewWordDocument", "Home")");
                        },
                        buttons: {
                            "Close": function () {
                                $(this).dialog("close");
                            }
                        }
                    });

                    $("#previewLink").click(function(e) {
                        e.preventDefault();
                        $("#dialogcontainer").dialog('open');
                    });

                });

            </script>
    }

コントローラ：

public ActionResult Document()
        {      
            return View();
        }

        [HttpPost]
        public ActionResult Document(WordAutomation.Models.Document model)
        {
            Models.Utility.EditWord word = new Models.Utility.EditWord();
            word.EditWordDoc(model);
            return View("Display", model);
        }

        public ActionResult PreviewWordDocument()
        {           
            var image = Url.Content("~/Content/preview.jpeg");

            return PartialView((object)image);
        }

ドキュメントのactionresultはモデルを取得できますが、PreviewWordDocumentアクションをトリガーするactionlinkから値を取得する方法を知りたいです。

よろしくお願いします、ラツィオ

4

2 に答える 2

5

HTMLページで送信ボタンをクリックすると、送信ボタンが存在するフォーム内のすべての入力要素がサーバーに送信されますが、アンカー（<a>タグ）をクリックすると送信されます。Getメソッドを使用してリクエストを送信するだけで、値を投稿することはありません。ただし、このアプローチで特定の値をサーバーに送信する場合は、クエリ文字列で送信できます。次を使用してリクエストを作成しました:

     @Html.ActionLink("Preview", "PreviewWordDocument", "Home", null, 
     new { id = "previewLink" })

これは以下を生成します:

<a id="previewLink" href="/Home/PreviewWordDocument"> Preview </a>

ActionLinkこれは正しくありません。次のように 4 番目のパラメーターを使用してサーバーに任意の値を渡すには:

     @Html.ActionLink("Preview", "PreviewWordDocument", "Home",
     new { id = "previewLink" }, null)

このコードの結果は次のようになります。

 <a href="/Home/PreviewWordDocument?id=previewLink"> Preview </a>

乾杯！

于 2012-12-06T20:32:09.130 に答える
5

フォームは、アクション属性で指定された URL に送信ボタンを使用してのみ投稿できます。

ただし、jQuery post メソッドを使用してフォーム データを別の URL に送信し、送信前にフォームを手動で検証することができます。そうすれば、フォーム データを PreviewWordDocument コントローラー メソッドに送信し、応答を処理して、目的の div にプレビューを表示できます。（フォームにidをつけていただけると助かりますので、jQueryで簡単に見つけられます）

したがって、プレビュー リンクのクリック イベント ハンドラーは次のようになります。

$("#previewLink").click(function(e) {
    e.preventDefault();
    if($("#YourFormId").valid()){
        $("#dialogcontainer").dialog('open');
    }
});

ダイアログの open 関数で、jQuery ajax 関数を使用して、フォーム (既に検証済み) をプレビュー コントローラー メソッドにポストします。応答は、dialogContent div に読み込まれます。

    $.ajax({
        type: "POST",
        url: $("#previewLink").attr("href"), //the preview controller method
        data: $("#YourFormId").serialize(), 
        success: function (data) {
            //load ajax response into the dialogContent div
            $("#dialogcontent").html(data);
        },
        error: function(xhr, error) {
            $("#YourFormId").prepend('<div id="ajaxErrors"></div>')
                            .html(xhr.responseText);
        }
    });

これで、PreviewWordDocument アクションでドキュメント全体を受け取ることができるようになりました。

public ActionResult PreviewWordDocument(WordAutomation.Models.Document model)
{           
    var image = Url.Content("~/Content/preview.jpeg");

    return PartialView((object)image);
}
于 2012-12-06T20:43:15.877 に答える