2012-12-06 194 views
6

我想從一個強類型的視圖到控制器的模型數據。 使用提交按鈕是好的,我可以獲取數據。現在我想用html.actionlink實現同樣的效果。 這是我有: 查看:將模型從視圖傳遞到控制器與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。

由於提前,Laziale

回答

4

表單只能使用提交按鈕發佈到其操作屬性給出的URL。

然而,您可以使用jQuery post方法將表單數據發送到不同的URL,並在發送之前手動驗證表單。 通過這種方式,您可以將表單數據發送到PreviewWordDocument控制器方法並處理響應,以便在所需的div中顯示預覽。 (這將是有益的,如果你給一個ID的形式,讓您可以用輕鬆地找到它的jQuery)

所以對於預覽鏈接點擊事件處理程序將是這樣的:

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

在對話框的打開功能將使用jQuery ajax函數將表單(已被驗證)發佈到預覽控制器方法。響應將被加載到dialogContent格:

$.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); 
} 
4

在一個HTML頁面,當你在一個提交按鈕,單擊該提交按鈕位於會發布到服務器,但是當你點擊一個錨(表單內的所有輸入單元<a>標籤)。您只發送帶有Get方法的請求並且沒有發佈任何值。但是如果要使用此方法向服務器發送特定值,則可以通過查詢字符串來完成。您使用以下方法提出請求:

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

這將產生:

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

是incorrect.to任何值傳遞給服務器以像這樣ActionLink使用第四參數:

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

結果FR om此代碼將是:

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

乾杯!

相關問題