asp.net-mvc – 使用html.actionlink将模型从视图传递到控制器

发布时间：2020-12-15 20:54:56 所属栏目：asp.Net 来源：网络整理

导读：我试图将模型数据从强类型视图获取到控制器. 使用提交按钮是可以的,我可以获取数据.现在我想用html.actionlink实现相同的功能. 这就是我所拥有的：视图： @model WordAutomation.Models.Document @{ ViewBag.Title = "Document"; } script type="text/javas

我试图将模型数据从强类型视图获取到控制器.
使用提交按钮是可以的,我可以获取数据.现在我想用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可以获取模型,但我想知道如何从actionlink获取将触发PreviewWordDocument操作的值.

提前谢谢,Laziale

解决方法

表单只能使用提交按钮发布到其action属性给出的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);
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!