Pass html control values in Url.Action: MVC

Question

I want to pass two parameters in @Url.Action.

View:

 <select id="ddlSearchBy" name="ddlSearchBy" style="width: 150px">
      <option value="TaxCode">Tax Code</option>
      <option value="TaxDescription">Tax Description</option>
      <option value="ClassDescription">Class Description</option>
      <option value="ZoneName">Zone Name</option>
  </select>
  <input type="text" name="txtSearchValue" id="txtSearchValue"/>
  <button type="button" id="btnDownload">Download</button>
  <button type="button" id="btnSearch">Search</button>

On Download button click, I am calling the method "ExportToExcel" in Masters Controller and also I need to pass two parameters. i.e. the selected value of select html and textbox value.

Now, I am using like below;

  <button type="button" id="btnDownload" onclick="location.href='@Url.Action("ExportToExcel", "Masters", new { ddlSearchBy = @TempData["ddlSearchBy"], txtSearchValue = @TempData["txtSearchValue"] })'">Download</button>

Can I directly pass the html control values in @Url.Action?

Edited:

Controller:

[HttpPost]
public ActionResult ExportToExcel(string ddlSearchBy, string txtSearchValue)
    {
        var grid = new GridView();

        grid.DataSource = from data in GetTaxMasterTable(ddlSearchBy, txtSearchValue)
                          select new
                              {
                                  Code = data.taxCode,
                                  TaxDescription = data.taxDescription,
                                  ClassDescription = data.classDescription,
                                  Location = data.locationShortName,
                                  Zone = data.zoneName,
                                  TaxValue = data.taxValue,
                                  Tax = data.taxPercentage,
                                  ModifiedDate = data.modifiedDate
                              };

        grid.DataBind();

        Response.ClearContent();
        Response.AddHeader("Content-Disposition", "attachment; filename = TaxMaster.xls");
        Response.ContentType = "application/vnd.ms-excel";
        StringWriter sw = new StringWriter();
        HtmlTextWriter htw = new HtmlTextWriter(sw);

        grid.RenderControl(htw);
        Response.Write(sw.ToString());
        Response.End();

        return RedirectToAction("TaxMaster");           
    }

jQuery:

$("#btnSubmitDownloadExcel").click(function (e) {
            var ddlSearchBy = $("#ddlSearchBy").val();
            var txtSearchValue = $("#txtSearchValue").val();
            $.ajax({
                type: "POST",
                url: "/Masters/ExportToExcel",
                data: JSON.stringify({ "ddlSearchBy": ddlSearchBy, "txtSearchValue": txtSearchValue }),
                contentType: "application/json; charset=utf-8",
                datatype: "json",
                success: function (data) {
                    alert(JSON.stringify(data));                        
                },
                error: function (data) {
                    alert("err");
                    alert(JSON.stringify(data));
                }
            });
        });

This code is not downloading the Excel.

You need javascript/jquery to update the value of `location.href` (or just use a form with `FormMethod.Get`) — , Nov 04 '15 at 10:28
I need to download an excel in the method, if I use Jquery ajax call, its is not downloading. But if I use the above method, its downloading. — thevan, Nov 04 '15 at 10:35
use a form with method="get". It *will* work, as it's just like using a regular hyperlink. — HaukurHaf, Nov 04 '15 at 10:35
Then use javascript/jquery to update the url you want to call — , Nov 04 '15 at 10:41
You dont need any javascript, jQuery, or Ajax. Have a look at my answer below. Just use a regular form with a method of get. — HaukurHaf, Nov 04 '15 at 10:53
Either way (using a form or updating the url) will work fine. You need to show your controller method if its not working. — , Nov 04 '15 at 10:57
Yeah both methods should work, but when you already have a button which is supposed to invoke the action, skipping the onclick handler and just have it submit a regular form seems like a no brainer to me :-) — HaukurHaf, Nov 04 '15 at 11:04
@StephenMuecke: Please look at the edited portion in the question. I have put the jQuery I have used to download the excel. — thevan, Nov 04 '15 at 11:09
You need to return a `FileResult`, not `RedirectToAction()` - refer [this answer](http://stackoverflow.com/questions/5826649/returning-a-file-to-view-download-in-asp-net-mvc) for an example (no ajax!) — , Nov 04 '15 at 11:11
And refer also [this answer](http://stackoverflow.com/questions/16670209/download-excel-file-via-ajax-mvc) that explains why you cannot use ajax — , Nov 04 '15 at 11:13
@thevan Have you tried using a form? :-) Using jQuery/javascript/ajax etc. for such a simple problem seems overkill to me. — HaukurHaf, Nov 04 '15 at 11:24
@HaukurHaf: Ya, its working.. But when I click search, it also calls the download excel event.. — thevan, Nov 04 '15 at 11:39
I see, I did not realize you already had a form with a different action. Let me update my answer, hold on. — HaukurHaf, Nov 04 '15 at 12:53

HaukurHaf · Accepted Answer · 2015-11-04T13:01:10.427

You cannot pass values from input elements using regular hyperlinks (Url.Action) without resorting to javascript.

But you can simply use a form with a method of GET.

<form action="Masters/ExportToExcel" method="get">
  <select id="ddlSearchBy" name="ddlSearchBy" style="width: 150px">
      <option value="TaxCode">Tax Code</option>
      <option value="TaxDescription">Tax Description</option>
      <option value="ClassDescription">Class Description</option>
      <option value="ZoneName">Zone Name</option>
  </select>
  <input type="text" name="txtSearchValue" id="txtSearchValue"/>
  <button type="submit" id="btnDownload">Download</button>
</form>

Might want to use the Html.BeginForm() helper to generate the form for a more cleaner code, but the end result is the same.

Update - If you already have a form with another submit action

If you don't need to support IE 9 or below, you can use the formaction attribute to have the button change the action of the form.

Example:

<form action="SomeController/Search" method="get">
      <select id="ddlSearchBy" name="ddlSearchBy" style="width: 150px">
          <option value="TaxCode">Tax Code</option>
          <option value="TaxDescription">Tax Description</option>
          <option value="ClassDescription">Class Description</option>
          <option value="ZoneName">Zone Name</option>
      </select>
      <input type="text" name="txtSearchValue" id="txtSearchValue"/>
      <button type="submit" id="btnSearch">Search</button>
      <button type="submit" id="btnDownload" formaction="Masters/ExportToExcel">Download</button>
    </form>

In this example, the form will do a get by default on SomeController/Search, when you click the btnSearch button. However, if you click the btnDownload button, the form will do a get request to Masters/ExportToExcel.

If you need to support IE below version 10, you need to use javascript to change the action of the form before you submit it.

Example using jQuery:

<form action="SomeController/Search" method="get">
          <select id="ddlSearchBy" name="ddlSearchBy" style="width: 150px">
              <option value="TaxCode">Tax Code</option>
              <option value="TaxDescription">Tax Description</option>
              <option value="ClassDescription">Class Description</option>
              <option value="ZoneName">Zone Name</option>
          </select>
          <input type="text" name="txtSearchValue" id="txtSearchValue"/>
          <button type="submit" id="btnSearch" onclick="$(this).closest('form').attr('action','SomeController/Search');">Search</button>
          <button type="submit" id="btnDownload" onclick="$(this).closest('form').attr('action','Masters/ExportToExcel');">Download</button>
        </form>

Pass html control values in Url.Action: MVC

1 Answers1

Update - If you already have a form with another submit action