Geek Answers Handbook

Pass the model from view to controller using html.actionlink

I am trying to get model data from a strongly typed view to a controller. Using the submit button is ok, I can get the data. Now I want to achieve the same with html.actionlink. This is what I have: View:

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

An actionresult document can get the model, but I want to know how to get the values ​​from the actionlink that will trigger the PreviewWordDocument action.

Thanks in advance, Laziale

+6
source share
2 answers

A form can only be submitted using the submit button to the URL indicated by its action attribute.

However, you can submit the form data to a different URL using the jQuery post method, manually checking the form before submitting it. Thus, you can send form data to the controller method PreviewWordDocument and process the response to show the preview in the desired div. (It will be useful if you provide a form identifier so that you can easily find it using jQuery)

So, your click event handler for the preview link will look like this:

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

In the open dialog box function, you will display the form (which has already been verified) on the preview controller method using the jQuery ajax function. The response will be loaded into the div 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); } });

Now you can get the whole document in the PreviewWordDocument action:

 public ActionResult PreviewWordDocument(WordAutomation.Models.Document model) { var image = Url.Content("~/Content/preview.jpeg"); return PartialView((object)image); }
+4
source

on the HTML page, when you click the submit button, all input elements inside the form in which the submit button is located will be sent to the server, but when you click on the anchor ( <a> tag). you send a request using the Get method only and do not publish any values. But if you want to send a specific value to the server using this approach, you can do this by query string. You used the following to query:

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

this will produce:

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

which is wrong. To pass any value to the server using ActionLink , use the 4th parameter as follows:

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

the result of this code will be:

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

Hurrah!

+4
source

More articles:


All Articles