2012-12-06 16 views
6

Sto cercando di ottenere i dati del modello da una vista fortemente tipizzata a un controller. L'uso del pulsante di invio è ok, posso ottenere i dati. Ora voglio ottenere lo stesso con html.actionlink. Questo è quello che ho: Vista:passa il modello da view a controller con 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> 
    } 

Controller:

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); 
     } 

L'ActionResult documento può ottenere il modello, ma voglio sapere come posso ottenere i valori da il link di azione che attiverà l'azione PreviewWordDocument.

Grazie in anticipo, Laziale

risposta

4

Il modulo può essere registrato solo utilizzando il pulsante di invio per l'URL fornito dal relativo attributo di azione.

È tuttavia possibile inviare i dati del modulo a un altro URL utilizzando il metodo jQuery post, convalidando manualmente il modulo prima che venga inviato. In questo modo è possibile inviare i dati del modulo al metodo del controllore PreviewWordDocument e gestire la risposta per mostrare l'anteprima nel div desiderato. (Sarà utile se si dà un id alla forma, in modo da poter facilmente trovare utilizzando jQuery)

Così il vostro gestore di eventi click per il link di anteprima sarà simile a questa:

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

In la funzione di apertura della finestra di dialogo pubblicherà il modulo (che è stato già convalidato) al metodo del controller di anteprima, utilizzando la funzione jQuery ajax. La risposta verrà caricato nel div 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); 
     } 
    }); 

Ora sarete ora in grado di ricevere l'intero documento nell'azione PreviewWordDocument:

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

    return PartialView((object)image); 
} 
4

in una pagina HTML quando si fa clic su un pulsante di invio di tutti gli elementi di ingresso all'interno della forma che il pulsante di invio risiede nella volontà pubblicato al server, ma quando si fa clic su un ancoraggio (<a> tag). si invia una richiesta solo con un metodo Get e senza pubblicare alcun valore.ma se si desidera inviare un valore particolare al server con questo approccio è possibile farlo tramite query string.si hanno utilizzato i seguenti per effettuare una richiesta:

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

questo produrrà:

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

che è incorrect.to passare qualsiasi valore al server con ActionLink uso 4 ° parametro in questo modo:

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

il risultato fr om questo codice sarebbe:

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

evviva!

Problemi correlati